Skip to content

Commit daae1eb

Browse files
SisIvanovasimeonoff
SisIvanova
and
simeonoff
authored
refactor(slider): update fluent theme colors and focus styles (#11954)
* refactor(slider): update fluent theme colors and focus styles Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent b655112 commit daae1eb

File tree

6 files changed

+85
-29
lines changed

6 files changed

+85
-29
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ $_igx-slider-thumbs: 'from' 'to';
8282
@extend %igx-slider-thumbs-container !optional;
8383
}
8484

85-
8685
@include e(track-steps) {
8786
@extend %igx-slider-track-steps !optional;
8887
}
@@ -116,6 +115,10 @@ $_igx-slider-thumbs: 'from' 'to';
116115
@extend %igx-slider-thumb__dot !optional;
117116
}
118117

118+
@include m(focused) {
119+
@extend %igx-slider-thumb--focused !optional;
120+
}
121+
119122
@include m(pressed) {
120123
@include e(dot){
121124
@extend %igx-slider-thumb__dot--pressed !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@
199199

200200
@if $variant == 'fluent'{
201201
%igx-slider-thumb__dot::before {
202-
border-color: var-get($theme, 'thumb-focus-color');
202+
border: rem($thumb-border-width) solid var-get($theme, 'thumb-focus-color');
203203
}
204204
}
205205
}
@@ -450,14 +450,16 @@
450450
top: -#{rem($thumb-radius)};
451451
margin-inline-start: -#{rem($thumb-radius)};
452452

453-
&:hover div::after {
454-
opacity: .12;
455-
transform: scale(1);
456-
}
453+
@if $variant == 'material' {
454+
&:hover div::after {
455+
opacity: .12;
456+
transform: scale(1);
457+
}
457458

458-
&:focus div::after {
459-
opacity: .18;
460-
transform: scale(1);
459+
&:focus div::after {
460+
opacity: .18;
461+
transform: scale(1);
462+
}
461463
}
462464

463465
&:focus div::before {
@@ -469,6 +471,24 @@
469471
}
470472
}
471473

474+
@if $variant == 'fluent' {
475+
%igx-slider-thumb--focused {
476+
div::after {
477+
$focus-outline-offset: rem(2px);
478+
479+
position: absolute;
480+
content: '';
481+
pointer-events: none;
482+
left: 50%;
483+
top: 50%;
484+
transform: translate(-50%, -50%);
485+
box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color');
486+
width: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));
487+
height: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));
488+
}
489+
}
490+
}
491+
472492
%igx-thumb--disabled {
473493
&:focus div::before {
474494
box-shadow: none;
@@ -563,9 +583,11 @@
563583
}
564584

565585
%igx-slider-thumb__dot--pressed {
566-
&::after {
567-
opacity: .24 !important;
568-
transform: scale(1) !important;
586+
@if $variant == 'material' {
587+
&::after {
588+
opacity: .24 !important;
589+
transform: scale(1) !important;
590+
}
569591
}
570592
}
571593

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@ $dark-slider: $light-slider;
1515

1616
/// Generates a dark fluent slider schema.
1717
/// @type {Map}
18-
/// @property {Map} base-track-color [color: ('grays', 100)] - The base background color of the track.
19-
/// @property {Map} track-color [color: ('grays', 400)] - The color of the track.
18+
/// @property {Map} base-track-color [color: ('grays', 300)] - The base background color of the track.
19+
/// @property {Map} base-track-hover-color [color: ('grays', 300)] - The base background color of the track on hover.
20+
/// @property {Map} track-color [color: ('grays', 600)] - The color of the track.
2021
/// @property {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
2122
/// @property {Map} thumb-border-color [color: ('grays', 400)] - The thumb border color.
22-
/// @property {Map} thumb-focus-color [color: ('primary', 300)] - The focus outline color of the thumb.
23+
/// @property {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
2324
/// @property {Map} thumb-disabled-border-color [color: ('grays', 200)] - The thumb border color when it's disabled.
2425
/// @property {Map} disabled-base-track-color [color: ('grays', 100)] - The base background color of the track when is disabled.
2526
/// @property {Map} disabled-fill-track-color [color: ('grays', 300)] - The background color of the fill track when is disabled.
@@ -30,11 +31,15 @@ $dark-fluent-slider: extend(
3031
$fluent-slider,
3132
(
3233
base-track-color: (
33-
color: ('grays', 100),
34+
color: ('grays', 300),
35+
),
36+
37+
base-track-hover-color: (
38+
color: ('grays', 300),
3439
),
3540

3641
track-color: (
37-
color: ('grays', 400),
42+
color: ('grays', 600),
3843
),
3944

4045
track-hover-color: (
@@ -46,7 +51,7 @@ $dark-fluent-slider: extend(
4651
),
4752

4853
thumb-focus-color: (
49-
color: ('primary', 300)
54+
color: ('primary', 100)
5055
),
5156

5257
thumb-disabled-border-color: (

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -105,24 +105,27 @@ $light-slider: (
105105

106106
/// Generates a fluent slider schema.
107107
/// @type {Map}
108-
/// @property {Map} track-color [color: ('grays', 700)] - The color of the track.
108+
/// @property {Map} track-color [color: ('grays', 800)] - The color of the track.
109109
/// @property {Color} track-step-color [white] - The color of the track steps.
110110
/// @property {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
111111
/// @property {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
112112
/// @property {Map} thumb-border-color [color: ('grays', 700)] - The thumb border color.
113113
/// @property {Map} thumb-border-focus-color [color: ('grays', 700)] - The thumb border color when focused.
114-
/// @property {Map} thumb-focus-color [color: ('primary', 500)] - The focus outline color of the thumb.
114+
/// @property {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
115115
/// @property {Map} thumb-disabled-border-color [color: ('grays', 400)] - The thumb border color when it's disabled.
116116
/// @property {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
117-
/// @property {Map} base-track-color [color: ('grays', 400)] - The base background color of the track.
118-
/// @property {Map} base-track-hover-color [color: ('primary', 500, .32)] - The base background color of the track on hover.
117+
/// @property {Map} label-background-color [color: ('primary', 500)] - The background color of the bubble label.
118+
/// @property {Map} base-track-color [color: ('grays', 600)] - The base background color of the track.
119+
/// @property {Map} base-track-hover-color [color: ('grays', 600)] - The base background color of the track on hover.
120+
/// @property {Map} disabled-base-track-color [color: ('grays', 100)] - The base background color of the track when is disabled.
121+
/// @property {Map} disabled-fill-track-color [color: ('grays', 500)] - The background color of the fill track when is disabled.
119122
/// @requires {function} extend
120123
/// @requires {Map} $light-slider
121124
$fluent-slider: extend($light-slider, (
122125
variant: 'fluent',
123126

124127
track-color: (
125-
color: ('grays', 700),
128+
color: ('grays', 800),
126129
),
127130

128131
track-step-color: white,
@@ -144,7 +147,7 @@ $fluent-slider: extend($light-slider, (
144147
),
145148

146149
thumb-focus-color: (
147-
color: ('primary', 500)
150+
color: ('primary', 700)
148151
),
149152

150153
thumb-disabled-border-color: (
@@ -156,12 +159,24 @@ $fluent-slider: extend($light-slider, (
156159
),
157160

158161
base-track-color: (
159-
color: ('grays', 400),
162+
color: ('grays', 600),
160163
),
161164

162165
base-track-hover-color: (
163-
color: ('primary', 500, .32)
164-
)
166+
color: ('grays', 600)
167+
),
168+
169+
disabled-base-track-color: (
170+
color: ('grays', 100)
171+
),
172+
173+
disabled-fill-track-color: (
174+
color: ('grays', 500)
175+
),
176+
177+
label-background-color: (
178+
color: ('primary', 500),
179+
),
165180
));
166181

167182
/// Generates a bootstrap slider schema.

‎projects/igniteui-angular/src/lib/slider/slider.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -819,7 +819,7 @@ export class IgxSliderComponent implements
819819
return;
820820
}
821821

822-
const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbTo;
822+
const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
823823
activeThumb.nativeElement.releasePointerCapture($event.pointerId);
824824

825825
this.hideSliderIndicators();

‎projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
7171
@HostBinding('attr.z-index')
7272
public zIndex = 0;
7373

74+
@HostBinding('class.igx-slider-thumb-to--focused')
75+
public focused = false;
76+
7477
@HostBinding('class.igx-slider-thumb-from')
7578
public get thumbFromClass() {
7679
return this.type === SliderHandle.FROM;
@@ -141,7 +144,8 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
141144
constructor(private _elementRef: ElementRef, private _dir: IgxDirectionality) { }
142145

143146
@HostListener('pointerenter')
144-
public onPinterEnter() {
147+
public onPointerEnter() {
148+
this.focused = false;
145149
this.hoverChange.emit(true);
146150
}
147151

@@ -150,6 +154,12 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
150154
this.hoverChange.emit(false);
151155
}
152156

157+
@HostListener('keyup', ['$event'])
158+
public onKeyUp(event: KeyboardEvent) {
159+
event.stopPropagation();
160+
this.focused = true;
161+
}
162+
153163
@HostListener('keydown', ['$event'])
154164
public onKeyDown(event: KeyboardEvent) {
155165
if (this.disabled) {
@@ -174,6 +184,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
174184
public onBlur() {
175185
this.isActive = false;
176186
this.zIndex = 0;
187+
this.focused = false;
177188
}
178189

179190
@HostListener('focus')

0 commit comments

Comments
 (0)