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