Skip to content

Update Switch Styles #11207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 10, 2022
Merged

Update Switch Styles #11207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2173bae
style(switch): update fluent switch styles
Mar 9, 2022
7269e39
style(switch): bring back focus styles
Mar 9, 2022
0e4702d
style(switch): fix switch focus border styles
Mar 10, 2022
8edfdd2
style(switch): update styles for material and bootstrap switches
Mar 10, 2022
b935ea5
Merge branch '13.1.x' into didimmova/fluent-switch-13.1.x
simeonoff Mar 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 50 additions & 16 deletions projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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));
}
}
}

Expand Down Expand Up @@ -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');
}
}
}
Expand Down
50 changes: 33 additions & 17 deletions projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss
View file
Open in desktop
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,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
Expand All @@ -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
Expand All @@ -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(
Expand Down
Loading