104 lines
3.6 KiB
SCSS
104 lines
3.6 KiB
SCSS
|
// Copyright 2020 Google Inc.
|
||
|
|
//
|
||
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
|
|
// of this software and associated documentation files (the "Software"), to deal
|
||
|
|
// in the Software without restriction, including without limitation the rights
|
||
|
|
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||
|
|
// copies of the Software, and to permit persons to whom the Software is
|
||
|
|
// furnished to do so, subject to the following conditions:
|
||
|
|
//
|
||
|
|
// The above copyright notice and this permission notice shall be included in
|
||
|
|
// all copies or substantial portions of the Software.
|
||
|
|
//
|
||
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
|
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
|
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
|
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||
|
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||
|
|
// THE SOFTWARE.
|
||
|
|
|
||
|
|
@use '@material/feature-targeting/feature-targeting';
|
||
|
|
///
|
||
|
|
/// Emits necessary layout styles to set a transparent border around an element
|
||
|
|
/// without interfering with the rest of its component layout. The border is
|
||
|
|
/// only visible in high-contrast mode. The target element should be a child of
|
||
|
|
/// a relatively positioned top-level element (i.e. a ::before pseudo-element).
|
||
|
|
///
|
||
|
|
/// @param {number} $border-width - The width of the transparent border.
|
||
|
|
/// @param {string} $border-style - The style of the transparent border.
|
||
|
|
///
|
||
|
|
@mixin transparent-border(
|
||
|
|
$border-width: 1px,
|
||
|
|
$border-style: solid,
|
||
|
|
$query: feature-targeting.all()
|
||
|
|
) {
|
||
|
|
$feat-structure: feature-targeting.create-target($query, structure);
|
||
|
|
|
||
|
|
@include feature-targeting.targets($feat-structure) {
|
||
|
|
position: absolute;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
border: $border-width $border-style transparent;
|
||
|
|
border-radius: inherit;
|
||
|
|
content: '';
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).
|
||
|
|
@include forced-colors-mode($exclude-ie11: true) {
|
||
|
|
@include feature-targeting.targets($feat-structure) {
|
||
|
|
border-color: CanvasText;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
///
|
||
|
|
/// Visually hides text content for accessibility. This text should only be
|
||
|
|
/// visible to screen reader users.
|
||
|
|
/// See https://a11yproject.com/posts/how-to-hide-content/
|
||
|
|
///
|
||
|
|
@mixin visually-hidden($query: feature-targeting.all()) {
|
||
|
|
$feat-structure: feature-targeting.create-target($query, structure);
|
||
|
|
|
||
|
|
@include feature-targeting.targets($feat-structure) {
|
||
|
|
clip: rect(1px, 1px, 1px, 1px);
|
||
|
|
height: 1px;
|
||
|
|
overflow: hidden;
|
||
|
|
position: absolute;
|
||
|
|
white-space: nowrap; /* added line */
|
||
|
|
width: 1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Selects for IE11 support.
|
||
|
|
///
|
||
|
|
/// @content styles to emit for IE11 support
|
||
|
|
@mixin ie11-support {
|
||
|
|
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Selects for `forced-colors` high contrast mode.
|
||
|
|
///
|
||
|
|
/// While in `forced-colors` mode, only system colors should be used.
|
||
|
|
///
|
||
|
|
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors
|
||
|
|
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
|
||
|
|
/// @content styles to emit in `forced-colors` mode
|
||
|
|
@mixin forced-colors-mode($exclude-ie11: false) {
|
||
|
|
@if $exclude-ie11 {
|
||
|
|
@media screen and (forced-colors: active) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|