1 | @use 'sass:map';
|
---|
2 | @use '../style/layout-common';
|
---|
3 |
|
---|
4 | /// Mixin that turns on strong focus indicators.
|
---|
5 | ///
|
---|
6 | /// @example
|
---|
7 | /// .my-app {
|
---|
8 | /// @include mat-strong-focus-indicators($config);
|
---|
9 | /// }
|
---|
10 | @mixin strong-focus-indicators($config: ()) {
|
---|
11 | // Default focus indicator config.
|
---|
12 | $default-config: (
|
---|
13 | border-style: solid,
|
---|
14 | border-width: 3px,
|
---|
15 | border-radius: 4px,
|
---|
16 | );
|
---|
17 |
|
---|
18 | // Merge default config with user config.
|
---|
19 | $config: map.merge($default-config, $config);
|
---|
20 | $border-style: map.get($config, border-style);
|
---|
21 | $border-width: map.get($config, border-width);
|
---|
22 | $border-radius: map.get($config, border-radius);
|
---|
23 |
|
---|
24 | // Base styles for focus indicators.
|
---|
25 | .mat-focus-indicator::before {
|
---|
26 | @include layout-common.fill();
|
---|
27 | box-sizing: border-box;
|
---|
28 | pointer-events: none;
|
---|
29 | border: $border-width $border-style transparent;
|
---|
30 | border-radius: $border-radius;
|
---|
31 | }
|
---|
32 |
|
---|
33 | // By default, all focus indicators are flush with the bounding box of their
|
---|
34 | // host element. For particular elements (listed below), default inset/offset
|
---|
35 | // values are necessary to ensure that the focus indicator is sufficiently
|
---|
36 | // contrastive and renders appropriately.
|
---|
37 |
|
---|
38 | .mat-focus-indicator.mat-flat-button::before,
|
---|
39 | .mat-focus-indicator.mat-raised-button::before,
|
---|
40 | .mat-focus-indicator.mat-fab::before,
|
---|
41 | .mat-focus-indicator.mat-mini-fab::before,
|
---|
42 | .mat-focus-indicator.mat-chip::before,
|
---|
43 | .mat-focus-indicator.mat-sort-header-container::before {
|
---|
44 | margin: -($border-width + 2px);
|
---|
45 | }
|
---|
46 |
|
---|
47 | .mat-focus-indicator.mat-stroked-button::before,
|
---|
48 | .mat-focus-indicator.mat-calendar-body-cell-content::before {
|
---|
49 | margin: -($border-width + 3px);
|
---|
50 | }
|
---|
51 |
|
---|
52 | .mat-focus-indicator.mat-tab-link::before,
|
---|
53 | .mat-focus-indicator.mat-tab-label::before {
|
---|
54 | margin: 5px;
|
---|
55 | }
|
---|
56 |
|
---|
57 | // Render the focus indicator on focus. Defining a pseudo element's
|
---|
58 | // content will cause it to render.
|
---|
59 |
|
---|
60 | // Checkboxes, radios, and slide toggles render focus indicators when the
|
---|
61 | // associated visually-hidden input is focused.
|
---|
62 | .mat-checkbox-input:focus ~ .mat-focus-indicator::before,
|
---|
63 | .mat-radio-input:focus ~ .mat-focus-indicator::before,
|
---|
64 | .mat-slide-toggle-input:focus ~ .mat-slide-toggle-thumb-container .mat-focus-indicator::before,
|
---|
65 |
|
---|
66 | // For options, render the focus indicator when the class .mat-active
|
---|
67 | // is present.
|
---|
68 | .mat-focus-indicator.mat-option.mat-active::before,
|
---|
69 |
|
---|
70 | // For calendar cells, render the focus indicator when the parent cell is
|
---|
71 | // focused.
|
---|
72 | .mat-calendar-body-cell:focus .mat-focus-indicator::before,
|
---|
73 |
|
---|
74 | // Stepper headers have the focus indicator as a descendant,
|
---|
75 | // because `::before` is used for other styling.
|
---|
76 | .mat-step-header:focus .mat-focus-indicator::before,
|
---|
77 |
|
---|
78 | // For all other components, render the focus indicator on focus.
|
---|
79 | .mat-focus-indicator:focus::before {
|
---|
80 | content: '';
|
---|
81 | }
|
---|
82 | }
|
---|
83 |
|
---|
84 | // Mixin that ensures focus indicator host elements are positioned so that the focus indicator
|
---|
85 | // pseudo element within is positioned relative to the host. Private mixin included within
|
---|
86 | // `mat-core`.
|
---|
87 | @mixin private-strong-focus-indicators-positioning() {
|
---|
88 | .mat-focus-indicator {
|
---|
89 | position: relative;
|
---|
90 | }
|
---|
91 | }
|
---|