1 | /// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
|
2 | /// to make that element visually hidden while remaining available to assistive technology.
|
3 | @mixin a11y-visually-hidden() {
|
4 | .cdk-visually-hidden {
|
5 | border: 0;
|
6 | clip: rect(0 0 0 0);
|
7 | height: 1px;
|
8 | margin: -1px;
|
9 | overflow: hidden;
|
10 | padding: 0;
|
11 | position: absolute;
|
12 | width: 1px;
|
13 |
|
14 | // This works around a Chrome bug that can cause the tab to crash when large amounts of
|
15 | // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
|
16 | white-space: nowrap;
|
17 |
|
18 | // Avoid browsers rendering the focus ring in some cases.
|
19 | outline: 0;
|
20 |
|
21 | // Avoid some cases where the browser will still render the native controls (see #9049).
|
22 | -webkit-appearance: none;
|
23 | -moz-appearance: none;
|
24 |
|
25 | // We need at least one of top/bottom/left/right in order to prevent cases where the
|
26 | // absolute-positioned element is pushed down and can affect scrolling (see #24597).
|
27 | // `left` was chosen here, because it's the least likely to break overrides where the
|
28 | // element might have been positioned (e.g. `mat-checkbox`).
|
29 | left: 0;
|
30 |
|
31 | [dir='rtl'] & {
|
32 | left: auto;
|
33 | right: 0;
|
34 | }
|
35 | }
|
36 | }
|
37 |
|
38 | /// @deprecated Use `a11y-visually-hidden`.
|
39 | @mixin a11y() {
|
40 | @include a11y-visually-hidden;
|
41 | }
|
42 |
|
43 | /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
|
44 | /// is non-empty.
|
45 | /// @param {String} selector-context The selector under which to nest the mixin's content.
|
46 | @mixin _optionally-nest-content($selector-context) {
|
47 | @if ($selector-context == '') {
|
48 | @content;
|
49 | }
|
50 | @else {
|
51 | #{$selector-context} {
|
52 | @content;
|
53 | }
|
54 | }
|
55 | }
|
56 |
|
57 | /// Applies styles for users in high contrast mode. Note that this only applies
|
58 | /// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
|
59 | /// attribute, however Chrome handles high contrast differently.
|
60 | ///
|
61 | /// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
|
62 | /// `white-on-black` or `black-on-white`.
|
63 | /// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
|
64 | /// * `on` - works for `Emulated`, `Native`, and `ShadowDom`
|
65 | /// * `off` - works for `None`
|
66 | /// * `any` - works for all encapsulation modes by emitting the CSS twice (default).
|
67 | @mixin high-contrast($target: active, $encapsulation: 'any') {
|
68 | @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
|
69 | @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
|
70 | 'Allowed values are "active", "black-on-white", and "white-on-black"';
|
71 | }
|
72 |
|
73 | @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
|
74 | @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
|
75 | 'Allowed values are "on", "off", and "any"';
|
76 | }
|
77 |
|
78 | // If the selector context has multiple parts, such as `.section, .region`, just doing
|
79 | // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
|
80 | // context. We address this by nesting the selector context under .cdk-high-contrast.
|
81 | @at-root {
|
82 | $selector-context: #{&};
|
83 |
|
84 | @if ($encapsulation != 'on') {
|
85 | // Note that if this selector is updated, the same change has to be made inside
|
86 | // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
|
87 | .cdk-high-contrast-#{$target} {
|
88 | @include _optionally-nest-content($selector-context) {
|
89 | @content;
|
90 | }
|
91 | }
|
92 | }
|
93 |
|
94 | @if ($encapsulation != 'off') {
|
95 | .cdk-high-contrast-#{$target} :host {
|
96 | @include _optionally-nest-content($selector-context) {
|
97 | @content;
|
98 | }
|
99 | }
|
100 | }
|
101 | }
|
102 | }
|