82 lines
1.7 KiB
SCSS
82 lines
1.7 KiB
SCSS
// Mixins
|
|
// ===
|
|
//
|
|
// Background Shimmer
|
|
// ---
|
|
|
|
@mixin background-shimmer() {
|
|
overflow: hidden;
|
|
background: $neutral-10;
|
|
background-image: linear-gradient(to right,
|
|
$neutral-10 0%, scale-color($neutral-15, $lightness: -5%) 50%, $neutral-10 100%);
|
|
background-repeat: no-repeat;
|
|
background-size: 100vw 100vh;
|
|
animation: 1.5s linear infinite background-shimmer;
|
|
}
|
|
|
|
|
|
// Visually Hidden
|
|
// ---
|
|
|
|
@mixin visually-hidden() {
|
|
position: absolute;
|
|
|
|
overflow: hidden;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
|
|
// Wrap At Root
|
|
// ---
|
|
//
|
|
// Wraps the nested blocks in the `$selector` of your choice, and at the root
|
|
// level. Specificity of the selector can be increased by increasing the
|
|
// `$degree` to a higher number than the default `1`.
|
|
|
|
// Examples:
|
|
// ---
|
|
//
|
|
// Default:
|
|
//
|
|
// @include wrap-at-root("#app") {
|
|
// .u-border-red { border: 1px solid red; }
|
|
// }
|
|
//
|
|
// Output: #app .u-border-red { border: 1px solid red; }
|
|
//
|
|
//
|
|
// Custom:
|
|
//
|
|
// @include wrap-at-root("#app", 3) {
|
|
// .u-border-red { border: 1px solid red; }
|
|
// }
|
|
//
|
|
// Output: #app#app#app .u-border-red { border: 1px solid red; }
|
|
|
|
|
|
// Parameters
|
|
// ---
|
|
//
|
|
// @param $selector [String]: ID selector.
|
|
// @param $degree [Number]: Effectively the number of id-level selectors you
|
|
// need to override.
|
|
|
|
@mixin wrap-at-root($selector, $degree: 1) {
|
|
$selector-chain: '';
|
|
|
|
// Build an id selector by chaining the same id onto itself once more than
|
|
// the specified degree. So if degree: 3, we get #id#id#id.
|
|
|
|
@for $i from 1 through $degree {
|
|
$selector-chain: $selector-chain + $selector;
|
|
}
|
|
|
|
@at-root #{$selector-chain} {
|
|
@content;
|
|
}
|
|
}
|