diff --git a/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss index 4c27069e4..12000e205 100644 --- a/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss +++ b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss @@ -56,15 +56,6 @@ $theme: $bootstrap; :host(:not([disabled]):hover), :host(:not(:disabled):hover) { - [part~='control'] { - border-color: var-get($theme, 'border-hover-color'); - } - - [part~='control'][part~='checked'] { - background: var-get($theme, 'track-on-hover-color'); - border-color: var-get($theme, 'border-on-hover-color'); - } - [part~='thumb'][part~='checked'] { background: var-get($theme, 'thumb-on-color'); } diff --git a/src/components/checkbox/themes/shared/switch/switch.common.scss b/src/components/checkbox/themes/shared/switch/switch.common.scss index 076397949..d354dd4da 100644 --- a/src/components/checkbox/themes/shared/switch/switch.common.scss +++ b/src/components/checkbox/themes/shared/switch/switch.common.scss @@ -20,6 +20,18 @@ $theme: $material; } } +:host(:not([disabled]):hover), +:host(:not(:disabled):hover) { + [part~='control'] { + border-color: var-get($theme, 'border-hover-color'); + } + + [part~='control'][part~='checked'] { + background: var-get($theme, 'track-on-hover-color'); + border-color: var-get($theme, 'border-on-hover-color'); + } +} + :host([disabled]), :host(:disabled) { [part~='label'] { diff --git a/src/components/checkbox/themes/shared/switch/switch.fluent.scss b/src/components/checkbox/themes/shared/switch/switch.fluent.scss index fdb7f80dd..93dbf3fec 100644 --- a/src/components/checkbox/themes/shared/switch/switch.fluent.scss +++ b/src/components/checkbox/themes/shared/switch/switch.fluent.scss @@ -61,16 +61,14 @@ $theme: $fluent; :host(:not([disabled]):hover), :host(:not(:disabled):hover) { - [part~='control'] { - border-color: var-get($theme, 'border-hover-color'); + [part~='thumb'][part~='checked'] { + background: var-get($theme, 'thumb-on-color'); } +} +:host([disabled]), +:host(:disabled) { [part~='control'][part~='checked'] { - background: var-get($theme, 'track-on-hover-color'); - border-color: var-get($theme, 'border-on-hover-color'); - } - - [part~='thumb'][part~='checked'] { - background: var-get($theme, 'thumb-on-color'); + border-color: var-get($theme, 'track-on-disabled-color'); } } diff --git a/src/components/checkbox/themes/shared/switch/switch.indigo.scss b/src/components/checkbox/themes/shared/switch/switch.indigo.scss index 04eef3b3f..929e86c92 100644 --- a/src/components/checkbox/themes/shared/switch/switch.indigo.scss +++ b/src/components/checkbox/themes/shared/switch/switch.indigo.scss @@ -19,17 +19,6 @@ $border-width: rem(1px); @include type-style('body-2'); } -:host(:hover) { - [part~='control'] { - border-color: var-get($theme, 'border-hover-color'); - } - - [part~='control'][part~='checked'] { - background: var-get($theme, 'track-on-hover-color'); - border-color: var-get($theme, 'border-on-hover-color'); - } -} - [part~='control'][part~='focused'] { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); } diff --git a/src/components/checkbox/themes/shared/switch/switch.material.scss b/src/components/checkbox/themes/shared/switch/switch.material.scss index fb9ea218f..6a322e6a8 100644 --- a/src/components/checkbox/themes/shared/switch/switch.material.scss +++ b/src/components/checkbox/themes/shared/switch/switch.material.scss @@ -32,14 +32,6 @@ $ripple-radius: calc(#{$ripple-size} / 2); background: var-get($theme, 'thumb-on-color'); } } - - [part~='control'] { - border-color: var-get($theme, 'border-hover-color'); - } - - [part~='control'][part~='checked'] { - border-color: var-get($theme, 'border-on-hover-color'); - } } &:focus-visible, @@ -98,6 +90,10 @@ $ripple-radius: calc(#{$ripple-size} / 2); overflow: hidden; z-index: -1; } + + &:hover { + box-shadow: var-get($theme, 'hover-elevation'); + } } [part~='thumb'][part~='checked'] { @@ -107,3 +103,10 @@ $ripple-radius: calc(#{$ripple-size} / 2); animation-duration: .2s; animation-fill-mode: forwards; } + +:host([disabled]), +:host(:disabled) { + [part~='thumb'] { + box-shadow: var-get($theme, 'disabled-elevation'); + } +}