You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.3 KiB
91 lines
3.3 KiB
/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
|
|
/// to make that element visually hidden while remaining available to assistive technology.
|
|
@mixin a11y-visually-hidden() {
|
|
.cdk-visually-hidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
|
|
// This works around a Chrome bug that can cause the tab to crash when large amounts of
|
|
// non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
|
|
white-space: nowrap;
|
|
|
|
// Avoid browsers rendering the focus ring in some cases.
|
|
outline: 0;
|
|
|
|
// Avoid some cases where the browser will still render the native controls (see #9049).
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
}
|
|
|
|
/// @deprecated Use `a11y-visually-hidden`.
|
|
@mixin a11y() {
|
|
@include a11y-visually-hidden;
|
|
}
|
|
|
|
/// Emits the mixin's content nested under `$selector-context` if `$selector-context`
|
|
/// is non-empty.
|
|
/// @param {String} selector-context The selector under which to nest the mixin's content.
|
|
@mixin _optionally-nest-content($selector-context) {
|
|
@if ($selector-context == '') {
|
|
@content;
|
|
}
|
|
@else {
|
|
#{$selector-context} {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Applies styles for users in high contrast mode. Note that this only applies
|
|
/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
|
|
/// attribute, however Chrome handles high contrast differently.
|
|
///
|
|
/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
|
|
/// `white-on-black` or `black-on-white`.
|
|
/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
|
|
/// * `on` - works for `Emulated`, `Native`, and `ShadowDom`
|
|
/// * `off` - works for `None`
|
|
/// * `any` - works for all encapsulation modes by emitting the CSS twice (default).
|
|
@mixin high-contrast($target: active, $encapsulation: 'any') {
|
|
@if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
|
|
@error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
|
|
'Allowed values are "active", "black-on-white", and "white-on-black"';
|
|
}
|
|
|
|
@if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
|
|
@error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
|
|
'Allowed values are "on", "off", and "any"';
|
|
}
|
|
|
|
// If the selector context has multiple parts, such as `.section, .region`, just doing
|
|
// `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
|
|
// context. We address this by nesting the selector context under .cdk-high-contrast.
|
|
@at-root {
|
|
$selector-context: #{&};
|
|
|
|
@if ($encapsulation != 'on') {
|
|
// Note that if this selector is updated, the same change has to be made inside
|
|
// `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
|
|
.cdk-high-contrast-#{$target} {
|
|
@include _optionally-nest-content($selector-context) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if ($encapsulation != 'off') {
|
|
.cdk-high-contrast-#{$target} :host {
|
|
@include _optionally-nest-content($selector-context) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|