[6a3a178] | 1 | /// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
|
---|
[e29cc2e] | 2 | /// to make that element visually hidden while remaining available to assistive technology.
|
---|
[6a3a178] | 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 | }
|
---|
| 26 |
|
---|
| 27 | /// @deprecated Use `a11y-visually-hidden`.
|
---|
| 28 | @mixin a11y() {
|
---|
| 29 | @include a11y-visually-hidden;
|
---|
| 30 | }
|
---|
| 31 |
|
---|
| 32 | /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
|
---|
| 33 | /// is non-empty.
|
---|
| 34 | /// @param {String} selector-context The selector under which to nest the mixin's content.
|
---|
| 35 | @mixin _optionally-nest-content($selector-context) {
|
---|
| 36 | @if ($selector-context == '') {
|
---|
| 37 | @content;
|
---|
| 38 | }
|
---|
| 39 | @else {
|
---|
| 40 | #{$selector-context} {
|
---|
| 41 | @content;
|
---|
| 42 | }
|
---|
| 43 | }
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | /// Applies styles for users in high contrast mode. Note that this only applies
|
---|
| 47 | /// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
|
---|
| 48 | /// attribute, however Chrome handles high contrast differently.
|
---|
| 49 | ///
|
---|
| 50 | /// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
|
---|
| 51 | /// `white-on-black` or `black-on-white`.
|
---|
| 52 | /// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
|
---|
| 53 | /// * `on` - works for `Emulated`, `Native`, and `ShadowDom`
|
---|
| 54 | /// * `off` - works for `None`
|
---|
| 55 | /// * `any` - works for all encapsulation modes by emitting the CSS twice (default).
|
---|
| 56 | @mixin high-contrast($target: active, $encapsulation: 'any') {
|
---|
| 57 | @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
|
---|
| 58 | @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
|
---|
| 59 | 'Allowed values are "active", "black-on-white", and "white-on-black"';
|
---|
| 60 | }
|
---|
| 61 |
|
---|
| 62 | @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
|
---|
| 63 | @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
|
---|
| 64 | 'Allowed values are "on", "off", and "any"';
|
---|
| 65 | }
|
---|
| 66 |
|
---|
| 67 | // If the selector context has multiple parts, such as `.section, .region`, just doing
|
---|
| 68 | // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
|
---|
| 69 | // context. We address this by nesting the selector context under .cdk-high-contrast.
|
---|
| 70 | @at-root {
|
---|
| 71 | $selector-context: #{&};
|
---|
| 72 |
|
---|
| 73 | @if ($encapsulation != 'on') {
|
---|
| 74 | // Note that if this selector is updated, the same change has to be made inside
|
---|
| 75 | // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
|
---|
| 76 | .cdk-high-contrast-#{$target} {
|
---|
| 77 | @include _optionally-nest-content($selector-context) {
|
---|
| 78 | @content;
|
---|
| 79 | }
|
---|
| 80 | }
|
---|
| 81 | }
|
---|
| 82 |
|
---|
| 83 | @if ($encapsulation != 'off') {
|
---|
| 84 | .cdk-high-contrast-#{$target} :host {
|
---|
| 85 | @include _optionally-nest-content($selector-context) {
|
---|
| 86 | @content;
|
---|
| 87 | }
|
---|
| 88 | }
|
---|
| 89 | }
|
---|
| 90 | }
|
---|
| 91 | }
|
---|