ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change Switch Stylesheet to Use OKLCH

Browse Source
This commit is contained in:
copecone committed 2026-03-12 09:17:55 +09:00
1 parent 9f4ed96190
commit 5ef0af7b56
1 file changed
+7 -7
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/switch/switch.scss
+7 -7
View File
@@ -2,8 +2,9 @@
@use "sass:list"; @use "sass:list";
@use "styles/library" as library; @use "styles/library" as library;
$slider_on_bg: #FF6E37; $switch_inset_border_color: oklch(0 0 0 / 20%);
$slider_off_bg: #999999; $switch_on_bg: oklch(0.7086 0.1896 39.86); // #FF6E37
$switch_off_bg: oklch(0.683 0 0); // #999999
$switch_dimension: (57px, 30px); $switch_dimension: (57px, 30px);
$switch_slider_dimension: (24px, 24px); $switch_slider_dimension: (24px, 24px);
@@ -17,11 +18,11 @@ $switch_animation_duration: 0.3s;
display: inline-block; display: inline-block;
width: list.nth($switch_dimension, 1); height: list.nth($switch_dimension, 2); width: list.nth($switch_dimension, 1); height: list.nth($switch_dimension, 2);
border-radius: $switch_border_radius; border-radius: $switch_border_radius;
background-color: $slider_off_bg; background-color: $switch_off_bg;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 0 0 1px $switch_inset_border_color inset;
outline: none; outline: none;
--switch-duration: #{$switch_animation_duration}; --switch-duration: #{$switch_animation_duration};
@@ -38,14 +39,13 @@ $switch_animation_duration: 0.3s;
} }
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px white, 0 0 0 4px $slider_on_bg; box-shadow: 0 0 0 1px $switch_inset_border_color inset, 0 0 0 2px white, 0 0 0 4px $switch_on_bg;
} }
&.active { &.active {
background-color: $slider_on_bg; background-color: $switch_on_bg;
.switch-knob { .switch-knob {
transform: translate( transform: translate(
list.nth($switch_dimension, 1) - list.nth($switch_slider_dimension, 1) - list.nth($switch_padding, 1) * 2, list.nth($switch_dimension, 1) - list.nth($switch_slider_dimension, 1) - list.nth($switch_padding, 1) * 2,
list.nth($switch_dimension, 2) - list.nth($switch_slider_dimension, 2) - list.nth($switch_padding, 2) * 2 list.nth($switch_dimension, 2) - list.nth($switch_slider_dimension, 2) - list.nth($switch_padding, 2) * 2