Adjust Switch CSS Variable

This commit is contained in:
copecone committed 2026-03-12 16:37:10 +09:00
1 parent d76794d971
commit 04a5350587
1 file changed
+3 -3
+3 -3
View File
@@ -2,7 +2,6 @@
@use "sass:list"; @use "sass:list";
@use "styles/library" as library; @use "styles/library" as library;
$switch_inset_border_color: oklch(0 0 0 / 20%);
$switch_on_bg: oklch(0.7086 0.1896 39.86); // #FF6E37 $switch_on_bg: oklch(0.7086 0.1896 39.86); // #FF6E37
$switch_off_bg: oklch(0.683 0 0); // #999999 $switch_off_bg: oklch(0.683 0 0); // #999999
@@ -10,6 +9,7 @@ $switch_dimension: (57px, 30px);
$switch_slider_dimension: (24px, 24px); $switch_slider_dimension: (24px, 24px);
$switch_padding: (3px, 3px); $switch_padding: (3px, 3px);
$switch_border_radius: 15px; $switch_border_radius: 15px;
$switch_border_color: oklch(0 0 0 / 20%);
$switch_animation_timing: cubic-bezier(0.4, 0, 0.2, 1); $switch_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
$switch_animation_duration: 0.3s; $switch_animation_duration: 0.3s;
@@ -22,7 +22,7 @@ $switch_animation_duration: 0.3s;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 0 1px $switch_inset_border_color inset; box-shadow: 0 0 0 1px $switch_border_color inset;
outline: none; outline: none;
--switch-duration: #{$switch_animation_duration}; --switch-duration: #{$switch_animation_duration};
@@ -39,7 +39,7 @@ $switch_animation_duration: 0.3s;
} }
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 1px $switch_inset_border_color inset, 0 0 0 2px white, 0 0 0 4px $switch_on_bg; box-shadow: 0 0 0 1px $switch_border_color inset, 0 0 0 2px white, 0 0 0 4px $switch_on_bg;
} }
&.active { &.active {