Adjust Switch CSS Variable
This commit is contained in:
1 parent
d76794d971
commit
04a5350587
1 file changed
+3
-3
@@ -2,7 +2,6 @@
|
||||
@use "sass:list";
|
||||
@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_off_bg: oklch(0.683 0 0); // #999999
|
||||
|
||||
@@ -10,6 +9,7 @@ $switch_dimension: (57px, 30px);
|
||||
$switch_slider_dimension: (24px, 24px);
|
||||
$switch_padding: (3px, 3px);
|
||||
$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_duration: 0.3s;
|
||||
@@ -22,7 +22,7 @@ $switch_animation_duration: 0.3s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
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;
|
||||
|
||||
--switch-duration: #{$switch_animation_duration};
|
||||
@@ -39,7 +39,7 @@ $switch_animation_duration: 0.3s;
|
||||
}
|
||||
|
||||
&: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 {
|
||||
|
||||
Reference in new issue
Block a user