diff --git a/frontend/src/app/main/ui/ds/controls/switcher/switcher.scss b/frontend/src/app/main/ui/ds/controls/switcher/switcher.scss index f87bd01473..4bc7ddad88 100644 --- a/frontend/src/app/main/ui/ds/controls/switcher/switcher.scss +++ b/frontend/src/app/main/ui/ds/controls/switcher/switcher.scss @@ -26,12 +26,12 @@ $switcher-transition-duration: 0.2s; .switcher-wrapper { --switcher-track-outline: none; --switcher-track-outline-offset: 0; - + display: flex; align-items: center; gap: var(--sp-s); padding: 0; - + &:focus-visible { --switcher-track-outline: $b-2 solid var(--color-accent-primary); --switcher-track-outline-offset: #{$b-2}; @@ -40,7 +40,7 @@ $switcher-transition-duration: 0.2s; .switcher-label { --switcher-label-color: var(--color-foreground-secondary); - + color: var(--switcher-label-color); cursor: pointer; user-select: none; @@ -59,7 +59,7 @@ $switcher-transition-duration: 0.2s; --switcher-track-bg: var(--color-background-quaternary); --switcher-thumb-bg: var(--color-foreground-secondary); --switcher-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); - + position: relative; display: inline-block; cursor: pointer; @@ -67,7 +67,7 @@ $switcher-transition-duration: 0.2s; border: none; background: transparent; padding: 0; - + &:hover:not(.switcher-disabled) { --switcher-thumb-bg: var(--color-foreground-primary); } @@ -99,7 +99,7 @@ $switcher-transition-duration: 0.2s; --switcher-track-bg: var(--color-accent-success); --switcher-thumb-bg: var(--color-foreground-primary); --switcher-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); - + &:hover:not(.switcher-disabled) { --switcher-track-bg: var(--color-accent-tertiary); } @@ -120,7 +120,7 @@ $switcher-transition-duration: 0.2s; // Disabled state .switcher-disabled { cursor: not-allowed; - + &:not(.switcher-checked) { --switcher-track-bg: var(--color-background-tertiary); --switcher-thumb-bg: var(--color-foreground-secondary); @@ -157,7 +157,9 @@ $switcher-transition-duration: 0.2s; background-color: var(--switcher-thumb-bg); box-shadow: var(--switcher-thumb-shadow); transform: var(--switcher-thumb-transform); - transition: transform $switcher-transition-duration ease-in-out, background-color $switcher-transition-duration ease-in-out; + transition: + transform $switcher-transition-duration ease-in-out, + background-color $switcher-transition-duration ease-in-out; } .switcher-thumb-disabled { @@ -177,7 +179,7 @@ $switcher-transition-duration: 0.2s; --switcher-track-bg: var(--color-background-secondary); --switcher-thumb-bg: var(--color-foreground-secondary); } - + .switcher-checked { --switcher-track-bg: var(--color-accent-primary-muted); --switcher-thumb-bg: var(--color-background-default);