Skip to content

Commit

Permalink
style(switch): update styles for material and bootstrap switches
Browse files Browse the repository at this point in the history
  • Loading branch information
Dilyana Dimova authored and Dilyana Dimova committed Mar 10, 2022
1 parent 0e4702d commit 8edfdd2
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 64 deletions.
16 changes: 5 additions & 11 deletions projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,25 +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 == 'fluent' {
@if $variant == 'bootstrap' or $variant == 'fluent'{
%switch-composite--x {
border-color: var-get($theme, 'border-disabled-color');
background: var-get($theme, 'track-on-disabled-color');
}

%switch-composite-thumb--x {
background: var-get($theme, 'thumb-on-disabled-color');
border-color: var-get($theme, 'track-on-disabled-color');
}
}
}
Expand Down
29 changes: 17 additions & 12 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand All @@ -27,13 +27,13 @@ $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-on-hover-color [color('primary', 200)] - The border color of the on-switch.
/// @property {Map} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch.
/// @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 {Map} thumb-off-color [color: ('grays', 500)] - The color of the thumb when the switch is off.
/// @property {Map} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled.
/// @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
Expand Down Expand Up @@ -70,7 +70,8 @@ $dark-fluent-switch: extend($fluent-switch, $base-dark-switch, (

/// 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
Expand All @@ -80,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(
Expand Down
105 changes: 64 additions & 41 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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: (
Expand All @@ -86,21 +96,22 @@ $light-switch: extend(
/// Generates a fluent switch schema.
/// @type {Map}
///
/// @property {Map} border-color [color('grays', 700)] - 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', 400)] - 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', 800)] - 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 {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb 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-on-color [color: ('primary', 500)] - 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-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 {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', 100)] - The color of the thumb when the switch is on and disabled.
/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color.
/// @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.
///
Expand Down Expand Up @@ -155,6 +166,10 @@ $fluent-switch: extend(
color: ('grays', 400)
),

thumb-disabled-color:(
color: ('grays', 400)
),

thumb-on-disabled-color:(
color: ('grays', 100)
),
Expand All @@ -169,13 +184,15 @@ $fluent-switch: extend(

/// 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.
Expand Down Expand Up @@ -213,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
Expand Down

0 comments on commit 8edfdd2

Please sign in to comment.