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

adjust Switch component styles.

Browse Source
This commit is contained in:
Vixalie 2025-03-09 22:53:19 +08:00
parent eea7446346
commit 09cba205a4
2 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Switch.module.css
View File

@ -4,7 +4,7 @@
align-items: center;
gap: 1em;
cursor: pointer;
&[aria-disabled] {
&[aria-disabled='true'] {
cursor: not-allowed;
}
}
@ -14,11 +14,11 @@
height: calc(var(--spacing) * 5);
border: 1px solid var(--color-primary);
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-surface-container-high);
background-color: color-mix(in oklch, var(--color-surface-container-high) 38%, transparent);
&::before {
content: '';
position: absolute;
transform: translate(1px, 2px);
transform: translate(2px, 3px);
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2);
@ -26,20 +26,21 @@
transition: transform 0.2s ease-in-out;
}
&.checked {
background-color: var(--color-primary);
background-color: color-mix(in oklch, var(--color-primary) 38%, transparent);
&::before {
transform: translate(calc(var(--spacing) * 5 - 1px), 2px);
background-color: var(--color-primary);
transform: translate(calc(var(--spacing) * 5 - 2px), 3px);
}
[aria-disabled] & {
--disabled-color: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
background-color: var(--disabled-color);
border-color: var(--disabled-color);
&.checked {
background-color: var(--disabled-color);
}
&::before {
background-color: color-mix(in oklch, var(--color-on-surface) 45%, transparent);
}
}
[aria-disabled='true'] & {
--disabled-color: var(--color-on-surface);
background-color: color-mix(in oklch, var(--disabled-color) 8%, transparent);
border-color: var(--disabled-color);
&.checked {
background-color: color-mix(in oklch, var(--disabled-color) 20%, transparent);
}
&::before {
background-color: color-mix(in oklch, var(--disabled-color) 38%, transparent);
}
}
}

2
src/components/Switch.tsx
View File

@ -36,3 +36,5 @@ const Switch: FC<SwitchProps> = ({ name, checked = false, disabled = false, onCh
</div>
);
};
export default Switch;