granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor Switch component styling

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 02:56:39 -08:00
parent b60eca43be
commit 0a45b13e71
1 changed files with 57 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/lib/components/ui/switch/Switch.svelte
View file

@ -69,16 +69,18 @@
--sw-checked-bg-hover: var(--null-button-bg-hover); --sw-checked-bg-hover: var(--null-button-bg-hover);
background: $grey-70; background: $grey-70;
border: 2px solid transparent; border: none;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
@include smooth-transition($duration-instant, background-color); @include smooth-transition($duration-instant, background-color);
} }
:global([data-switch-root].switch:focus), :global([data-switch-root].switch:focus),
:global([data-switch-root].switch:focus-visible) { :global([data-switch-root].switch:focus-visible) {
@include focus-ring($blue); outline: none;
} }
:global([data-switch-root].switch:hover:not(:disabled)) { :global([data-switch-root].switch:hover:not(:disabled)) {
@ -139,76 +141,93 @@
cursor: not-allowed; cursor: not-allowed;
} }
// Size: Small // Size: Small (22px track height, 16px thumb)
:global([data-switch-root].switch.small) { :global([data-switch-root].switch.small) {
$height: $unit-3x; // 24px $track-height: 22px;
border-radius: calc($height / 2); $thumb-size: 16px;
padding-left: $unit-fourth; $track-padding: 3px;
padding-right: $unit-fourth; $track-width: 40px;
width: calc($unit-5x + $unit-half); // 44px
height: $height; border-radius: calc($track-height / 2);
padding: 0 $track-padding;
width: $track-width;
height: $track-height;
} }
:global([data-switch-root].switch.small .thumb) { :global([data-switch-root].switch.small .thumb) {
height: calc($unit-2x + $unit-half); // 20px $thumb-size: 16px;
width: calc($unit-2x + $unit-half); // 20px height: $thumb-size;
border-radius: calc(($unit-2x + $unit-half) / 2); width: $thumb-size;
border-radius: 50%;
} }
:global([data-switch-root].switch.small .thumb[data-state='checked']) { :global([data-switch-root].switch.small .thumb[data-state='checked']) {
transform: translateX(calc($unit-2x + $unit-half)); // 20px // Move distance: track-width - thumb-size - (2 * padding)
transform: translateX(18px);
} }
// Size: Medium (default) // Size: Medium (default) (26px track height, 20px thumb)
:global([data-switch-root].switch.medium) { :global([data-switch-root].switch.medium) {
$height: calc($unit-4x + $unit-fourth); // 34px $track-height: 26px;
border-radius: calc($height / 2); $thumb-size: 20px;
padding-left: $unit-half; $track-padding: 3px;
padding-right: $unit-half; $track-width: 48px;
width: $unit-7x + $unit-fourth; // 58px
height: $height; border-radius: calc($track-height / 2);
padding: 0 $track-padding;
width: $track-width;
height: $track-height;
} }
:global([data-switch-root].switch.medium .thumb) { :global([data-switch-root].switch.medium .thumb) {
height: $unit-3x + $unit-fourth; // 26px $thumb-size: 20px;
width: $unit-3x + $unit-fourth; // 26px height: $thumb-size;
border-radius: calc(($unit-3x + $unit-fourth) / 2); width: $thumb-size;
border-radius: 50%;
} }
:global([data-switch-root].switch.medium .thumb[data-state='checked']) { :global([data-switch-root].switch.medium .thumb[data-state='checked']) {
transform: translateX(21px); // Move distance: track-width - thumb-size - (2 * padding)
transform: translateX(22px);
} }
// Size: Large // Size: Large (30px track height, 24px thumb)
:global([data-switch-root].switch.large) { :global([data-switch-root].switch.large) {
$height: $unit-5x; // 40px $track-height: 30px;
border-radius: calc($height / 2); $thumb-size: 24px;
padding-left: $unit-half; $track-padding: 3px;
padding-right: $unit-half; $track-width: 56px;
width: calc($unit-8x + $unit); // 72px
height: $height; border-radius: calc($track-height / 2);
padding: 0 $track-padding;
width: $track-width;
height: $track-height;
} }
:global([data-switch-root].switch.large .thumb) { :global([data-switch-root].switch.large .thumb) {
height: calc($unit-4x); // 32px $thumb-size: 24px;
width: calc($unit-4x); // 32px height: $thumb-size;
border-radius: $unit-2x; width: $thumb-size;
border-radius: 50%;
} }
:global([data-switch-root].switch.large .thumb[data-state='checked']) { :global([data-switch-root].switch.large .thumb[data-state='checked']) {
transform: translateX(calc($unit-4x)); // 32px // Move distance: track-width - thumb-size - (2 * padding)
transform: translateX(26px);
} }
// Thumb base styles // Thumb base styles
:global([data-switch-root] .thumb) { :global([data-switch-root] .thumb) {
background: $grey-100; background: white;
display: block; display: block;
flex-shrink: 0;
@include smooth-transition($duration-instant, transform); @include smooth-transition($duration-instant, transform);
transform: translateX(-1px); transform: translateX(0);
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
:global([data-switch-root] .thumb[data-state='checked']) { :global([data-switch-root] .thumb[data-state='checked']) {
background: $grey-100; background: white;
} }
</style> </style>