source: trip-planner-front/node_modules/@angular/cdk/a11y/_index.scss

Last change on this file was e29cc2e, checked in by Ema <ema_spirova@…>, 3 years ago

primeNG components

  • Property mode set to 100644
File size: 3.3 KB
Line 
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}
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}
Note: See TracBrowser for help on using the repository browser.