xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue correct button styles.

Browse Source
This commit is contained in:
Vixalie 2025-03-10 08:43:10 +08:00
parent edf4163e38
commit 55b10f5a5c
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components.css
View File

@ -227,10 +227,12 @@
--button-text: var(--color-info); --button-text: var(--color-info);
} }
&:hover { &:hover {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent); background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent); background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
@ -276,6 +278,7 @@
&.icon:not(:disabled) { &.icon:not(:disabled) {
--button-text: var(--color-on-surface-variant); --button-text: var(--color-on-surface-variant);
--button-surface: transparent; --button-surface: transparent;
padding: calc(var(--spacing) * 1);
&.selected { &.selected {
--button-text: var(--color-primary); --button-text: var(--color-primary);
&.secondary { &.secondary {
@ -310,10 +313,12 @@
&.icon:disabled { &.icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: transparent; --button-surface: transparent;
padding: calc(var(--spacing) * 1);
} }
&.filled_icon:not(:disabled) { &.filled_icon:not(:disabled) {
--button-text: var(--color-on-primary); --button-text: var(--color-on-primary);
--button-surface: var(--color-primary); --button-surface: var(--color-primary);
padding: calc(var(--spacing) * 1);
&.secondary { &.secondary {
--button-text: var(--color-on-secondary); --button-text: var(--color-on-secondary);
--button-surface: var(--color-secondary); --button-surface: var(--color-secondary);
@ -346,10 +351,12 @@
&.filled_icon:disabled { &.filled_icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent); --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
} }
&.tonal_icon:not(:disabled) { &.tonal_icon:not(:disabled) {
--button-text: var(--color-on-primary-container); --button-text: var(--color-on-primary-container);
--button-surface: var(--color-primary-container); --button-surface: var(--color-primary-container);
padding: calc(var(--spacing) * 1);
&.secondary { &.secondary {
--button-text: var(--color-on-secondary-container); --button-text: var(--color-on-secondary-container);
--button-surface: var(--color-secondary-container); --button-surface: var(--color-secondary-container);
@ -364,38 +371,40 @@
} }
&.warn { &.warn {
--button-text: var(--color-on-warning-container); --button-text: var(--color-on-warning-container);
--button-surface: var(--color-warning); --button-surface: var(--color-warning-container);
} }
&.success { &.success {
--button-text: var(--color-on-success-container); --button-text: var(--color-on-success-container);
--button-surface: var(--color-success-container); --button-surface: var(--color-success-container);
} }
&.info { &.info {
--button-text: var(--color-on-info); --button-text: var(--color-on-info-container);
--button-surface: var(--color-info); --button-surface: var(--color-info-container);
} }
&.unselected { &.unselected {
--button-text: var(--color-on-surface-variant); --button-text: var(--color-on-surface-variant);
--button-surface: var(--color-surface-container-highest); --button-surface: var(--color-surface-container-highest);
} }
&:hover { &:hover {
color: var(--button-text); color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent); background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
color: var(--button-text); color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent); background-color: color-mix(in oklch, var(--button-surface) 18%, transparent);
} }
} }
&.tonal_icon:disabled { &.tonal_icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent); --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
} }
&.outlined_icon:not(:disabled) { &.outlined_icon:not(:disabled) {
--button-text: var(--color-on-surface-variant); --button-text: var(--color-on-surface-variant);
--button-surface: transparent; --button-surface: transparent;
border: 1px solid var(--button-outline); border: 1px solid var(--button-outline);
padding: calc(var(--spacing) * 1);
&.selected { &.selected {
--button-text: var(--color-inverse-on-surface); --button-text: var(--color-inverse-on-surface);
--button-surface: var(--color-inverse-surface); --button-surface: var(--color-inverse-surface);
@ -414,6 +423,7 @@
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent); --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent); border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
} }
} }