99 lines
2.2 KiB
SCSS
99 lines
2.2 KiB
SCSS
// Converts a font-size in px to rem and optionally sets a relative line-height.
|
|
@mixin font-size($sizeValue: 16px, $lineHeight: false) {
|
|
font-size: ($sizeValue / 16px) * 1rem;
|
|
|
|
@if ($lineHeight) {
|
|
line-height: $lineHeight / $sizeValue;
|
|
}
|
|
}
|
|
|
|
@keyframes loading-fade {
|
|
0% {
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
// Adds animation to placeholder section
|
|
@mixin placeholder() {
|
|
animation: loading-fade 1.2s ease-in-out infinite;
|
|
background-color: $core-grey-light-500 !important;
|
|
border-color: $core-grey-light-500 !important;
|
|
color: $core-grey-light-500 !important;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
|
|
// Forces direct descendants to keep layout but lose visibility.
|
|
> * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@mixin force-content() {
|
|
&::after {
|
|
content: "\00a0";
|
|
}
|
|
}
|
|
|
|
// Hide an element from sighted users, but available 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;
|
|
}
|
|
|
|
// Reset <button> style so we can use link style for action buttons.
|
|
@mixin link-button() {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
|
|
box-shadow: none;
|
|
display: inline;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
letter-spacing: inherit;
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
vertical-align: baseline;
|
|
|
|
background: transparent;
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// Makes sure long words are broken if they overflow the container.
|
|
@mixin wrap-break-word() {
|
|
// This is the current standard, works in most browsers.
|
|
overflow-wrap: anywhere;
|
|
// Safari supports word-break.
|
|
word-break: break-word;
|
|
// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
|
|
-ms-word-break: break-all;
|
|
}
|
|
|
|
// Converts a px unit to rem.
|
|
@function rem($size, $base: 16px) {
|
|
@return $size / $base * 1rem;
|
|
}
|