Skip to content

Commit f42d81c

Browse files
zdrawkuzdrawku
authored
Merge pull request #8536 from IgniteUI/mpopov/fix-for-8482-master
Add focus styles for fluent, indigo and bootstrap themes
2 parents 42d8942 + 60bbc76 commit f42d81c

File tree

9 files changed

+216
-5
lines changed

9 files changed

+216
-5
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,17 @@
5757
}
5858

5959
@include m(focused) {
60+
@extend %igx-checkbox--focused !optional;
61+
6062
@include e(ripple) {
6163
@extend %cbx-ripple--focused !optional;
6264
}
6365
}
6466

67+
@include mx(focused, checked) {
68+
@extend %igx-checkbox--focused-checked !optional;
69+
}
70+
6571
@include m(indeterminate) {
6672
@extend %igx-checkbox--indeterminate !optional;
6773

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
/// @param {Color} $disabled-color-label [null] - The disabled label color.
2020
/// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.
2121
/// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple.
22+
/// @param {Color} $focus-outline-color [null] - TThe focus outlined color.
2223
/// Set to light when the surrounding area is dark.
2324
///
2425
/// @requires $default-palette
@@ -41,7 +42,8 @@
4142
$tick-color: null,
4243
$disabled-color: null,
4344
$disabled-color-label: null,
44-
$border-radius-ripple: null
45+
$border-radius-ripple: null,
46+
$focus-outline-color: null
4547
) {
4648
$name: 'igx-checkbox';
4749
$checkbox-schema: ();
@@ -72,7 +74,8 @@
7274
disabled-color: $disabled-color,
7375
disabled-color-label: $disabled-color-label,
7476
border-radius: $border-radius,
75-
border-radius-ripple: $border-radius-ripple
77+
border-radius-ripple: $border-radius-ripple,
78+
focus-outline-color: $focus-outline-color
7679
));
7780
}
7881

@@ -331,6 +334,47 @@
331334
filter: opacity(1);
332335
}
333336

337+
%igx-checkbox--focused {
338+
@if $variant == 'fluent' {
339+
position: relative;
340+
$focus-outline-offset-top: rem(2px);
341+
$focus-outline-offset-left: rem(2px);
342+
343+
&::after {
344+
content: '';
345+
position: absolute;
346+
top: -$focus-outline-offset-top;
347+
left: -$focus-outline-offset-left;
348+
box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color');
349+
width: calc(100% + (#{$focus-outline-offset-left} * 2));
350+
height: calc(100% + (#{$focus-outline-offset-top} * 2));
351+
}
352+
}
353+
354+
@if $variant == 'bootstrap' {
355+
%cbx-composite {
356+
border-radius: --var($theme, 'border-radius');
357+
box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color');
358+
}
359+
}
360+
361+
@if $variant == 'indigo-design' {
362+
%cbx-composite {
363+
border-radius: --var($theme, 'border-radius');
364+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color');
365+
}
366+
}
367+
}
368+
369+
%igx-checkbox--focused-checked {
370+
@if $variant == 'indigo-design' {
371+
%cbx-composite {
372+
border-radius: --var($theme, 'border-radius');
373+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused');
374+
}
375+
}
376+
}
377+
334378
%cbx-ripple--focused {
335379
@include animation('scale-in-out' 1s $ease-out-quad infinite);
336380
background: --var($theme, 'empty-color');

‎projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,17 @@
5757
}
5858

5959
@include m(focused) {
60+
@extend %igx-radio--focused !optional;
61+
6062
@include e(ripple) {
6163
@extend %radio-ripple--focused !optional;
6264
}
6365
}
6466

67+
@include mx(focused, checked) {
68+
@extend %igx-radio--focused-checked !optional;
69+
}
70+
6571
@include m(checked) {
6672
@include e(composite) {
6773
@extend %radio-composite--x !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
/// @param {Color} $hover-color [null] - The border and dot colors on hover.
1919
/// @param {Color} $fill-color-hover [null] - The checked border and dot colors on hover.
2020
/// @param {Color} $fill-hover-border-color [null] - The checked dot border color on hover.
21+
/// @param {Color} $focus-outline-color [null] - TThe focus outlined color.
2122
///
2223
/// @requires $default-palette
2324
/// @requires $light-schema
@@ -37,6 +38,7 @@
3738
$empty-color: null,
3839
$fill-color: null,
3940
$fill-hover-border-color:null,
41+
$focus-outline-color: null,
4042
$disabled-color: null,
4143
$hover-color: null,
4244
$fill-color-hover: null,
@@ -61,7 +63,8 @@
6163
fill-hover-border-color: $fill-hover-border-color,
6264
disabled-color: $disabled-color,
6365
hover-color: $hover-color,
64-
fill-color-hover: $fill-color-hover
66+
fill-color-hover: $fill-color-hover,
67+
focus-outline-color: $focus-outline-color
6568
));
6669
}
6770

@@ -116,7 +119,8 @@
116119

117120
$ripple-display: map-get((
118121
material: block,
119-
fluent: none
122+
fluent: none,
123+
indigo-design: none,
120124
), $variant);
121125

122126
$border-style: solid;
@@ -298,6 +302,46 @@
298302
}
299303
}
300304

305+
%igx-radio--focused {
306+
@if $variant == 'fluent' {
307+
position: relative;
308+
$focus-outline-offset-top: rem(2px);
309+
$focus-outline-offset-left: rem(2px);
310+
311+
&::after {
312+
content: '';
313+
position: absolute;
314+
top: -$focus-outline-offset-top;
315+
left: -$focus-outline-offset-left;
316+
box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color');
317+
width: calc(100% + (#{$focus-outline-offset-left} * 2));
318+
height: calc(100% + (#{$focus-outline-offset-top} * 2));
319+
}
320+
}
321+
322+
@if $variant == 'bootstrap' {
323+
%radio-composite {
324+
border-radius: $border-radius;
325+
box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color');
326+
}
327+
}
328+
329+
@if $variant == 'indigo-design' {
330+
%radio-composite {
331+
border-radius: $border-radius;
332+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color');
333+
}
334+
}
335+
}
336+
337+
%igx-radio--focused-checked {
338+
@if $variant == 'indigo-design' {
339+
%radio-composite {
340+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused');
341+
}
342+
}
343+
}
344+
301345
%radio-ripple--focused {
302346
@include animation('scale-in-out' 1s $ease-out-quad infinite);
303347
background: --var($theme, 'empty-color');

‎projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,17 @@
5353
}
5454

5555
@include m(focused) {
56+
@extend %igx-switch--focused !optional;
57+
5658
@include e(ripple) {
5759
@extend %switch-ripple--focused !optional;
5860
}
5961
}
6062

63+
@include mx(focused, checked) {
64+
@extend %igx-switch--focused-checked !optional;
65+
}
66+
6167
@include m(checked) {
6268
@include e(composite) {
6369
@extend %switch-composite--x !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
/// @param {Color} $border-disabled-color [null] - The border color of the switch when it is disabled.
3232
/// @param {Color} $border-on-color [null] - The border color when the switch is on.
3333
/// @param {Color} $border-on-hover-color [null] - The border color when the switch is on and hovered.
34+
/// @param {Color} $focus-outline-color [null] - TThe focus outlined color.
3435
///
3536
/// @requires $default-palette
3637
/// @requires $light-schema
@@ -71,7 +72,8 @@
7172
$border-hover-color: null,
7273
$border-disabled-color: null,
7374
$border-on-color: null,
74-
$border-on-hover-color: null
75+
$border-on-hover-color: null,
76+
$focus-outline-color: null,
7577
) {
7678
$name: 'igx-switch';
7779
$switch-schema: ();
@@ -139,6 +141,7 @@
139141
border-disabled-color: $border-disabled-color,
140142
border-on-color: $border-on-color,
141143
border-on-hover-color: $border-on-hover-color,
144+
focus-outline-color: $focus-outline-color,
142145
));
143146
}
144147

@@ -348,6 +351,46 @@
348351
border-radius: --var($theme, 'border-radius-ripple');
349352
}
350353

354+
%igx-switch--focused {
355+
@if $variant == 'fluent' {
356+
position: relative;
357+
$focus-outline-offset-top: rem(2px);
358+
$focus-outline-offset-left: rem(2px);
359+
360+
&::after {
361+
content: '';
362+
position: absolute;
363+
top: -$focus-outline-offset-top;
364+
left: -$focus-outline-offset-left;
365+
box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color');
366+
width: calc(100% + (#{$focus-outline-offset-left} * 2));
367+
height: calc(100% + (#{$focus-outline-offset-top} * 2));
368+
}
369+
}
370+
371+
@if $variant == 'bootstrap' {
372+
%switch-composite {
373+
border-radius: --var($theme, 'border-radius-thumb');
374+
box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color');
375+
}
376+
}
377+
378+
@if $variant == 'indigo-design' {
379+
%switch-composite {
380+
border-radius: --var($theme, 'border-radius-thumb');
381+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color');
382+
}
383+
}
384+
}
385+
386+
%igx-switch--focused-checked {
387+
@if $variant == 'indigo-design' {
388+
%switch-composite {
389+
box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused');
390+
}
391+
}
392+
}
393+
351394
%switch-ripple--focused {
352395
@include animation('scale-in-out' 1s $ease-out-quad infinite);
353396
background: --var($theme, 'track-off-color');

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ $_light-checkbox: extend(
5555
/// @prop {Map} disabled-color [igx-color: ('grays', 300)] - The disabled border and fill colors.
5656
/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
5757
/// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
58+
/// @property {Map} focus-outline-color [igx-color: ('grays', 800)] - The focus outlined color.
59+
5860
///
5961
/// @requires {function} extend
6062
/// @requires {Map} $_light-checkbox
@@ -65,6 +67,10 @@ $_fluent-checkbox: extend(
6567
(
6668
variant: 'fluent',
6769

70+
focus-outline-color: (
71+
igx-color: ('grays', 800)
72+
),
73+
6874
empty-color: (
6975
igx-color: ('grays', 900)
7076
),
@@ -86,6 +92,7 @@ $_fluent-checkbox: extend(
8692
/// @prop {Map} disabled-color [igx-color: ('grays', 300)] - The disabled border and fill colors.
8793
/// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
8894
/// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
95+
/// @property {Map} focus-outline-color [igx-color: ('primary', 200)] - The focus outlined color.
8996
///
9097
/// @requires {function} extend
9198
/// @requires {Map} $_light-checkbox
@@ -96,6 +103,10 @@ $_bootstrap-checkbox: extend(
96103
(
97104
variant: 'bootstrap',
98105

106+
focus-outline-color: (
107+
igx-color: ('primary', 200)
108+
),
109+
99110
fill-color: (
100111
igx-color: ('primary', 500)
101112
),
@@ -120,6 +131,8 @@ $_bootstrap-checkbox: extend(
120131
/// @prop {Color} disabled-color-label [igx-color: ('grays', 300)] - The disabled label color.
121132
/// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
122133
/// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
134+
/// @property {Map} focus-outline-color [igx-color: ('grays', 300)] - The focus outlined color.
135+
/// @property {Map} focus-outline-color-focused [igx-color: ('primary', 200)] - The focus outlined color for focused state.
123136
///
124137
/// @requires {function} extend
125138
/// @requires {Map} $_light-checkbox
@@ -130,6 +143,14 @@ $_indigo-checkbox: extend(
130143
(
131144
variant: 'indigo-design',
132145

146+
focus-outline-color: (
147+
igx-color: ('grays', 300)
148+
),
149+
150+
focus-outline-color-focused: (
151+
igx-color: ('primary', 200)
152+
),
153+
133154
tick-color: (
134155
igx-color: 'surface'
135156
),

0 commit comments

Comments
 (0)