101 lines
2.3 KiB
SCSS
101 lines
2.3 KiB
SCSS
/** @format */
|
|
|
|
// Rem output with px fallback
|
|
@mixin font-size($sizeValue: 16, $lineHeight: false ) {
|
|
font-size: $sizeValue + px;
|
|
font-size: ($sizeValue / 16) + rem;
|
|
@if ($lineHeight) {
|
|
line-height: $lineHeight;
|
|
}
|
|
}
|
|
|
|
@mixin hover-state {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Adds animation to placeholder section
|
|
@mixin placeholder( $lighten-percentage: 30% ) {
|
|
animation: loading-fade 1.6s ease-in-out infinite;
|
|
background-color: $core-grey-light-500;
|
|
color: transparent;
|
|
|
|
&::after {
|
|
content: '\00a0';
|
|
}
|
|
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
// Adds animation to transforms
|
|
@mixin animate-transform( $duration: 0.2s ) {
|
|
transition: transform ease $duration;
|
|
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
// Gutenberg Button variables. These are temporary until Gutenberg's variables are exposed.
|
|
@mixin button-style__focus-active() {
|
|
background-color: $white;
|
|
color: $dark-gray-900;
|
|
box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
|
|
|
|
// Windows High Contrast mode will show this outline, but not the box-shadow
|
|
outline: 2px solid transparent;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
// Sets positions for children of grid elements
|
|
@mixin set-grid-item-position( $wrap-after, $number-of-items ) {
|
|
@for $i from 1 through $number-of-items {
|
|
&:nth-child(#{$i}) {
|
|
grid-column-start: #{($i - 1) % $wrap-after + 1};
|
|
grid-column-end: #{($i - 1) % $wrap-after + 2};
|
|
grid-row-start: #{floor(($i - 1) / $wrap-after) + 1};
|
|
grid-row-end: #{floor(($i - 1) / $wrap-after) + 2};
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide an element from sighted users, but availble to screen reader users.
|
|
@mixin visually-hidden() {
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
|
overflow-wrap: normal !important;
|
|
word-wrap: normal !important;
|
|
}
|
|
|
|
// Unhide a visually hidden element
|
|
@mixin visually-shown() {
|
|
clip: auto;
|
|
clip-path: none;
|
|
height: auto;
|
|
width: auto;
|
|
margin: unset;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Create a string-repeat function
|
|
@function str-repeat($character, $n) {
|
|
@if $n == 0 {
|
|
@return '';
|
|
}
|
|
$c: '';
|
|
@for $i from 1 through $n {
|
|
$c: $c + $character;
|
|
}
|
|
@return $c;
|
|
}
|