增加ActionIcon基础样式的支持。
This commit is contained in:
徐涛
@@ -1,7 +1,5 @@
|
||||
@layer base {
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
:where(a, a:hover, a:visited) {
|
||||
text-decoration: none;
|
||||
color: var(--color-typo-dark);
|
||||
}
|
||||
@@ -26,16 +24,17 @@
|
||||
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.5em;
|
||||
color: var(--color-typo-dark);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--button-neutral-bg);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: oklch(from var(--button-neutral-bg) calc(l * 0.9) c h);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
cursor: not-allowed;
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
|
||||
}
|
||||
&.small {
|
||||
@@ -48,75 +47,103 @@
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
&.primary {
|
||||
color: var(--color-typo-dark-lightness);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-primary);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-primary-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-primary-disabled);
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
color: var(--color-typo-dark-lightness);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-secondary);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-secondary-hover);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-secondary-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-secondary-disabled);
|
||||
}
|
||||
}
|
||||
&.accent {
|
||||
color: var(--color-typo-dark-lightness);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-accent);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-accent-hover);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-accent-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-accent-disabled);
|
||||
}
|
||||
}
|
||||
&.danger {
|
||||
color: var(--color-typo-dark-lightness);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-danger);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-danger-hover);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-danger-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-danger-disabled);
|
||||
}
|
||||
}
|
||||
&.warn {
|
||||
color: var(--color-typo-dark-lightness);
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-warn);
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-warn-hover);
|
||||
}
|
||||
&:active {
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-warn-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--color-typo-dark-darkness);
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-warn-disabled);
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-success);
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-success-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-success-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-success-disabled);
|
||||
}
|
||||
}
|
||||
&.info {
|
||||
color: var(--color-fg);
|
||||
background-color: var(--color-info);
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-info-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-info-active);
|
||||
}
|
||||
&[disabled] {
|
||||
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
||||
background-color: var(--color-info-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 输入框以及输入框组合体默认样式 */
|
||||
@@ -151,4 +178,150 @@
|
||||
padding: calc(var(--spacing) * 2);
|
||||
background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
|
||||
}
|
||||
|
||||
/* 仅展示一个图标的ActionIcon */
|
||||
:where(.action_icon) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: calc(var(--spacing) * 2);
|
||||
border-radius: var(--border-radius-xxs);
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: var(--color-neutral);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-neutral-hover);
|
||||
svg {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-neutral-active);
|
||||
svg {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
svg {
|
||||
color: var(--color-neutral-disabled);
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-primary-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-primary-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
svg {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-secondary-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-secondary-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-secondary-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accent {
|
||||
svg {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-accent-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-accent-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-accent-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger {
|
||||
svg {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-danger-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-danger-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-danger-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warn {
|
||||
svg {
|
||||
color: var(--color-warn);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-warn-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-warn-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-warn-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
svg {
|
||||
color: var(--color-success);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-success-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-success-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-success-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.info {
|
||||
svg {
|
||||
color: var(--color-info);
|
||||
}
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-info-hover);
|
||||
}
|
||||
&:active:not([disabled]) {
|
||||
background-color: var(--color-info-active);
|
||||
}
|
||||
&[disabled] {
|
||||
svg {
|
||||
color: var(--color-info-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user