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