-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
_focus-indicators.scss
129 lines (112 loc) · 4.48 KB
/
_focus-indicators.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
@import '../../material/core/theming/theming';
@import '../../material/core/style/layout-common';
@import '../../material/core/focus-indicators/focus-indicators';
/// Mixin that turns on strong focus indicators.
///
/// @example
/// .my-app {
/// @include mat-mdc-strong-focus-indicators($config);
/// }
@mixin mat-mdc-strong-focus-indicators($config: ()) {
// Default focus indicator config.
$default-config: (
border-style: solid,
border-width: 3px,
border-radius: 4px,
);
// Merge default config with user config.
$config: map-merge($default-config, $config);
$border-style: map-get($config, border-style);
$border-width: map-get($config, border-width);
$border-radius: map-get($config, border-radius);
// Base styles for focus indicators.
.mat-mdc-focus-indicator::before {
@include mat-fill();
box-sizing: border-box;
pointer-events: none;
border: $border-width $border-style transparent;
border-radius: $border-radius;
}
// By default, all focus indicators are flush with the bounding box of their
// host element. For particular elements (listed below), default inset/offset
// values are necessary to ensure that the focus indicator is sufficiently
// contrastive and renders appropriately.
.mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
.mat-mdc-raised-button .mat-mdc-focus-indicator::before,
.mdc-fab .mat-mdc-focus-indicator::before,
.mat-mdc-focus-indicator.mdc-chip::before {
margin: -($border-width + 2px);
}
.mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
margin: -($border-width + 3px);
}
.mat-mdc-focus-indicator.mat-mdc-chip-remove::before,
.mat-mdc-focus-indicator.mat-mdc-chip-row-focusable-text-content::before {
margin: -$border-width;
}
.mat-mdc-focus-indicator.mat-mdc-tab::before,
.mat-mdc-focus-indicator.mat-mdc-tab-link::before {
margin: 5px;
}
// These components have to set `border-radius: 50%` in order to support density scaling
// which will clip a square focus indicator so we have to turn it into a circle.
.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
.mat-radio-ripple.mat-mdc-focus-indicator::before {
border-radius: 50%;
}
// Render the focus indicator on focus. Defining a pseudo element's
// content will cause it to render.
// For checkboxes, radios and slide toggles, render the focus indicator when we know
// the hidden input is focused (slightly different for each control).
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
.mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
// For buttons, render the focus indicator when the parent button is focused.
.mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
// For options, render the focus indicator when the class .mat-mdc-option-active is present.
.mat-mdc-focus-indicator.mat-mdc-option-active::before,
// For all other components, render the focus indicator on focus.
.mat-mdc-focus-indicator:focus::before {
content: '';
}
}
// Mixin that applies the border color for the focus indicators.
@mixin _mat-mdc-strong-focus-indicators-border-color($color) {
.mat-mdc-focus-indicator::before {
border-color: $color;
}
}
@mixin mat-mdc-strong-focus-indicators-color($config-or-theme) {
$config: mat-get-color-config($config-or-theme);
@include _mat-mdc-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
}
/// Mixin that sets the color of the focus indicators.
///
/// @param {color|map} $theme-or-color
/// If theme, focus indicators are set to the primary color of the theme. If
/// color, focus indicators are set to that color.
///
/// @example
/// .demo-dark-theme {
/// @include mat-mdc-strong-focus-indicators-theme($dark-theme-map);
/// }
///
/// @example
/// .demo-red-theme {
/// @include mat-mdc-strong-focus-indicators-theme(#f00);
/// }
/* stylelint-disable-next-line material/theme-mixin-api */
@mixin mat-mdc-strong-focus-indicators-theme($theme-or-color) {
@if type-of($theme-or-color) != 'map' {
@include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
}
@else {
$theme: _mat-legacy-get-theme($theme-or-color);
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') {
$color: mat-get-color-config($theme);
@if $color != null {
@include mat-mdc-strong-focus-indicators-color($color);
}
}
}
}