[6a3a178] | 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 | }
|
---|