diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 541f07f892c..5d02d8959cf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -18,10 +18,13 @@ /// /// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on. /// @param {Color} $track-on-color [null] - The color of the track when the switch is on. +/// @param {Color} $track-on-hover-color [null] - The color of the track when the switch is on and hovered. /// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off. /// @param {Color} $track-off-color [null] - The color of the track when the switch is off. /// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled. +/// @param {Color} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled. /// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled. +/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and disabled. /// @param {Color} $label-color [null] - The color of the switch label /// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled /// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch. @@ -57,12 +60,15 @@ $thumb-on-color: null, $track-on-color: null, + $track-on-hover-color: null, $thumb-off-color: null, $track-off-color: null, $track-disabled-color: null, + $track-on-disabled-color: null, $thumb-disabled-color: null, + $thumb-on-disabled-color: null, $label-color: null, $label-disabled-color: null, @@ -127,12 +133,15 @@ thumb-on-color: $thumb-on-color, track-on-color: $track-on-color, + track-on-hover-color: $track-on-hover-color, thumb-off-color: $thumb-off-color, track-off-color: $track-off-color, track-disabled-color: $track-disabled-color, + track-on-disabled-color: $track-on-disabled-color, thumb-disabled-color: $thumb-disabled-color, + thumb-on-disabled-color: $thumb-on-disabled-color, label-color: $label-color, label-disabled-color: $label-disabled-color, @@ -291,6 +300,18 @@ border-color: var-get($theme, 'border-hover-color'); } } + + @if $variant == 'fluent' { + &:hover { + %switch-composite-thumb { + background: var-get($theme, 'border-hover-color'); + } + + %switch-composite-thumb--x { + background: var-get($theme, 'thumb-on-color'); + } + } + } } %switch-composite--x { @@ -301,6 +322,12 @@ &:focus { border-color: var-get($theme, 'border-on-hover-color'); } + + @if $variant == 'fluent' { + &:hover { + background: var-get($theme, 'track-on-hover-color'); + } + } } %switch-composite--disabled { @@ -368,18 +395,20 @@ %igx-switch--focused { @if $variant == 'fluent' { - position: relative; - $focus-outline-offset-top: rem(2px); - $focus-outline-offset-left: rem(2px); - - &::after { - content: ''; - position: absolute; - top: -$focus-outline-offset-top; - left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); - width: calc(100% + (#{$focus-outline-offset-left} * 2)); - height: calc(100% + (#{$focus-outline-offset-top} * 2)); + %switch-composite { + position: relative; + $focus-outline-offset-top: rem(2px); + $focus-outline-offset-left: rem(2px); + + &::after { + content: ''; + position: absolute; + top: -$focus-outline-offset-top; + left: -$focus-outline-offset-left; + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); + width: calc(100% + (#{$focus-outline-offset-left} * 2)); + height: calc(100% + (#{$focus-outline-offset-top} * 2)); + } } } @@ -421,14 +450,19 @@ } %igx-switch--disabled-checked { - @if $variant == 'bootstrap' { + @if $variant != 'indigo-design' { %switch-composite--x { - background: var-get($theme, 'focus-fill-color'); - border-color: var-get($theme, 'focus-fill-color'); + background: var-get($theme, 'track-on-disabled-color'); } %switch-composite-thumb--x { - background: var-get($theme, 'thumb-on-color'); + background: var-get($theme, 'thumb-on-disabled-color'); + } + } + + @if $variant == 'bootstrap' or $variant == 'fluent'{ + %switch-composite--x { + border-color: var-get($theme, 'track-on-disabled-color'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss index 6e96c50f2f4..744fbac8234 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -9,7 +9,7 @@ /// Generates a base dark switch schema. /// @type {Map} -/// @prop {Map} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. +/// @prop {Color} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. /// @see $default-palette $base-dark-switch: ( thumb-disabled-color: ( @@ -27,11 +27,14 @@ $dark-switch: extend($light-switch, $base-dark-switch); /// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch. /// @type {Map} -/// @property {Map} border-color [color: ('grays', 500)] - The border color of the switch. -/// @property {Map} border-hover-color [color: ('grays', 800)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch. -/// @property {Map} track-disabled-color [color: ('grays', 200)] - The color of the track when the switch is disabled. -/// @property {Map} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} border-color [color: ('grays', 500)] - The border color of the switch. +/// @property {Color} border-on-hover-color [color('primary', 200)] - The border color of the on-switch. +/// @property {Color} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch. +/// @property {Color} track-on-disabled-color [color: ('grays', 200)] - The color of the track when the switch is on and disabled. +/// @property {Color} track-on-hover-color [color: ('primary', 200)] - The color of the track when the switch is on and hovered. +/// @property {Color} thumb-off-color [color: ('grays', 500)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. +/// /// @requires {function} extend /// @requires $fluent-switch /// @requires $base-dark-switch @@ -40,26 +43,35 @@ $dark-fluent-switch: extend($fluent-switch, $base-dark-switch, ( color: ('grays', 500) ), - border-hover-color:( - color: ('grays', 800) + thumb-off-color: ( + color: ('grays', 500) + ), + + border-on-hover-color:( + color: ('primary', 200) + ), + + track-on-hover-color:( + color: ('primary', 200) ), border-disabled-color:( color: ('grays', 200) ), - track-disabled-color: ( + thumb-disabled-color: ( color: ('grays', 200) ), - thumb-on-color: ( - color: ('grays', 900) + track-on-disabled-color:( + color: ('grays', 200) ), )); /// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch. /// @type {Map} -/// @property {Map} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 900)] - The color of the thumb when the switch is on and disabled. /// @requires {function} extend /// @requires $bootstrap-switch /// @requires $base-dark-switch @@ -69,22 +81,26 @@ $dark-bootstrap-switch: extend( thumb-on-color: ( color: ('grays', 900) ), + + thumb-on-disabled-color: ( + color: ('grays', 900) + ), ) ); /// Generates a dark indigo switch schema. /// @type {Map} -/// @property {Map} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('grays', 900)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. -/// @property {Map} track-off-color [transparent] - The color of the track when the switch is off. +/// @property {Color} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('grays', 900)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. +/// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. /// /// @property {Color} border-color [color: ('grays', 700)] - The border color of the switch. /// @property {Color} border-hover-color [color: ('grays', 700)] - The border color of the switch on hover. /// @property {Color} border-disabled-color [color: ('grays', 400)] - The border color of the disabled switch. /// @property {Color} border-on-color [color: ('grays', 900)] - The border color of the on-switch. /// @property {Color} border-on-hover-color [color: ('grays', 900)] - The border color of the on-switch. -/// @property {Map} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled +/// @property {Color} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled /// @requires {function} extend /// @requires $indigo-switch $dark-indigo-switch: extend( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index 91c6a551cee..9f7c159db6a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -11,14 +11,16 @@ /// Generates a light switch schema. /// @type {Map} /// -/// @property {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 200)] - The color of the thumb when the switch is off. -/// @property {Map} track-off-color [color: ('grays', 600)] - The color of the track when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. -/// @property {Map} track-disabled-color [color: ('grays', 300)] - The color of the track when the switch is disabled. -/// @property {Map} label-color [color: ('grays', 900)] - The color of the switch label -/// @property {Map} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled +/// @property {Color} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 50)] - The color of the thumb when the switch is off. +/// @property {Color} track-off-color [color: ('grays', 500)] - The color of the track when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled. +/// @property {Color} track-disabled-color [color: ('grays', 300)] - The color of the track when the switch is disabled. +/// @property {Color} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled. +/// @property {Color} label-color [color: ('grays', 900)] - The color of the switch label +/// @property {Color} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled /// @property {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @property {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state. /// @property {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state. @@ -58,19 +60,27 @@ $light-switch: extend( ), thumb-off-color: ( - color: ('grays', 200) + color: ('grays', 50) ), track-disabled-color: ( - color: ('grays', 300, .54) + color: ('grays', 300) + ), + + track-on-disabled-color: ( + color: ('secondary', 50) ), track-off-color: ( - color: ('grays', 600) + color: ('grays', 500) ), thumb-disabled-color: ( - color: ('grays', 400), + color: ('grays', 200), + ), + + thumb-on-disabled-color: ( + color: ('secondary', 100), ), label-color: ( @@ -86,17 +96,22 @@ $light-switch: extend( /// Generates a fluent switch schema. /// @type {Map} /// -/// @property {Map} border-color [color('grays', 500)] - The border color of the switch. -/// @property {Map} border-hover-color [color('grays', 800)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color('grays', 300)] - The border color of the disabled switch. -/// @property {Map} border-on-color [color('primary', 500)] - The border color of the on-switch. -/// @property {Map} border-on-hover-color [color('primary', 500)] - The border color of the on-switch. +/// @property {Color} border-color [color('grays', 700)] - The border color of the switch. +/// @property {Color} border-hover-color [color('grays', 800)] - The border color of the switch on hover. +/// @property {Color} border-disabled-color [color('grays', 400)] - The border color of the disabled switch. +/// @property {Color} border-on-color [color('primary', 500)] - The border color of the on-switch. +/// @property {Color} border-on-hover-color [color('primary', 800)] - The border color of the on-switch. /// -/// @property {Map} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 900)] - The color of the thumb when the switch is off. -/// @property {Map} track-on-color [color: ('secondary', 500)] - The color of the track when the switch is on. +/// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. -/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color. +/// @property {Color} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered. +/// @property {Color} track-on-disabled-color [color: ('grays', 400)] - The color of the track when the switch is on and disabled. +/// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. +/// @property {Color} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled. +/// @property {Color} focus-outline-color [color: ('grays', 800)] - The focus outlined color. /// /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @@ -114,50 +129,70 @@ $fluent-switch: extend( ), border-color: ( - color: ('grays', 500), + color: ('grays', 700), ), + thumb-off-color: ( + color: ('grays', 700), + ), + + track-off-color: transparent, + border-hover-color:( color: ('grays', 800), ), - border-disabled-color:( - color: ('grays', 300), + track-on-color: ( + color: ('primary', 500), ), border-on-color:( color: ('primary', 500) ), + track-on-hover-color:( + color: ('primary', 800) + ), + border-on-hover-color:( - color: ('primary', 500) + color: ('primary', 800) ), thumb-on-color: ( color: ('grays', 50) ), - thumb-off-color: ( - color: ('grays', 900), + track-on-disabled-color:( + color: ('grays', 400) ), - track-on-color: ( - color: ('secondary', 500), + thumb-disabled-color:( + color: ('grays', 400) ), - track-off-color: transparent, + thumb-on-disabled-color:( + color: ('grays', 100) + ), + + border-disabled-color:( + color: ('grays', 400), + ), + + track-disabled-color: transparent, ) ); /// Generates a bootstrap switch schema. /// @type {Map} -/// @property {Map} focus-outline-color [color: ('primary', 100)] - The focus outlined color. -/// @property {Map} focus-fill-color [color: ('primary', 200)] - The focus fill color. -/// @property {Map} border-color [color('grays', 400)] - The border color of the switch. -/// @property {Map} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. -/// @property {Map} thumb-off-color [color: ('grays', 400)] - The color of the thumb when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. -/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} focus-outline-color [color: ('primary', 100)] - The focus outlined color. +/// @property {Color} focus-fill-color [color: ('primary', 200)] - The focus fill color. +/// @property {Color} border-color [color('grays', 400)] - The border color of the switch. +/// @property {Color} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. +/// @property {Color} thumb-off-color [color: ('grays', 400)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 50)] - The color of the thumb when the switch is on and disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. /// @property {Number} border-radius-track [32px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [32px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. @@ -195,34 +230,40 @@ $bootstrap-switch: extend( color: ('grays', 300), ), + thumb-on-disabled-color: ( + color: ('grays', 50) + ), + track-on-color: ( color: ('primary', 500), ), - track-disabled-color: transparent, + track-on-disabled-color:( + color: ('primary', 200) + ) ) ); /// Generates an indigo switch schema. /// @type {Map} /// -/// @property {Map} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 600)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 600)] - The color of the thumb when the switch is off. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. /// -/// @property {Map} border-color [color: ('grays', 600)] - The border color of the switch. -/// @property {Map} border-hover-color [color: ('grays', 600)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. -/// @property {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch. -/// @property {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the on-switch. -/// @property {Map} label-disabled-color [color: ('grays', 300)] - The color of the switch label when the switch is disabled +/// @property {Color} border-color [color: ('grays', 600)] - The border color of the switch. +/// @property {Color} border-hover-color [color: ('grays', 600)] - The border color of the switch on hover. +/// @property {Color} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. +/// @property {Color} border-on-color [color: ('primary', 500)] - The border color of the on-switch. +/// @property {Color} border-on-hover-color [color: ('primary', 500)] - The border color of the on-switch. +/// @property {Color} label-disabled-color [color: ('grays', 300)] - The color of the switch label when the switch is disabled /// @property {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [1] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. -/// @property {Map} focus-outline-color [color: ('grays', 300)] - The focus outlined color. -/// @property {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state. +/// @property {Color} focus-outline-color [color: ('grays', 300)] - The focus outlined color. +/// @property {Color} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state. /// /// @requires {function} extend /// @requires $light-switch