119 lines
2.8 KiB
SCSS
Executable File
119 lines
2.8 KiB
SCSS
Executable File
@use "sass:math";
|
|
|
|
@import "material-design-color/material-color";
|
|
$red: $clr-red;
|
|
$body-bg: $clr-white !default;
|
|
$body-color: $clr-black !default;
|
|
|
|
$grid-gutter-width: 2rem !default;
|
|
$grid-gutter-height: 2rem !default;
|
|
|
|
$meta-overlay-bg: transparentize($clr-black, 0.2) !default;
|
|
|
|
$meta-text-wrapper-bg: $body-bg !default;
|
|
$meta-text-wrapper-color: $body-color !default;
|
|
$meta-text-wrapper-padding-width: $grid-gutter-width * 0.5 !default;
|
|
$meta-text-wrapper-padding-height: $grid-gutter-height * 0.5 !default;
|
|
|
|
$meta-nav-size: 2rem !default;
|
|
$meta-nav-arrows-size: 2.5rem !default;
|
|
$meta-nav-color: $clr-white !default;
|
|
$meta-nav-hover-color: $clr-blue-grey-50 !default;
|
|
$meta-nav-hover-bg: none !default;
|
|
$meta-nav-hover-shadow: $clr-black !default;
|
|
$meta-nav-hover-transform: scale(1.5) !default;
|
|
$meta-nav-close-hover-transform: rotate(-180deg) !default;
|
|
|
|
$meta-nav-padding: 0.25rem 0.5rem !default;
|
|
|
|
$meta-spinner-color: $clr-white !default;
|
|
$meta-spinner-weight: bold !default;
|
|
$meta-spinner-size: 2rem !default;
|
|
|
|
$meta-embed-loading-failed-color: $meta-spinner-color !default;
|
|
$meta-embed-loading-failed-size: 1.2rem !default;
|
|
$meta-embed-loading-failed-weight: $meta-spinner-weight !default;
|
|
|
|
$meta-video-width: 16 !default;
|
|
$meta-video-height: 9 !default;
|
|
|
|
// extra variables and mixings
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1390px,
|
|
xxxl: 1590px,
|
|
) !default;
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px,
|
|
xxl: 1330px,
|
|
xxxl: 1560px,
|
|
) !default;
|
|
|
|
// hovers
|
|
@mixin hover-focus() {
|
|
&:hover,
|
|
&:focus {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin hover-focus-active() {
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin spinner_style() {
|
|
color: $meta-spinner-color;
|
|
font-size: $meta-spinner-size;
|
|
font-weight: $meta-spinner-weight;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// screen reader
|
|
// Only display content to screen readers
|
|
//
|
|
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
|
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
|
|
|
@mixin sr-only() {
|
|
border: 0;
|
|
clip: rect(0, 0, 0, 0);
|
|
height: 1px;
|
|
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
|
|
@mixin pseudo($display: block, $pos: absolute, $content: "") {
|
|
content: $content;
|
|
display: $display;
|
|
position: $pos;
|
|
}
|
|
|
|
@mixin responsive-ratio($x, $y, $pseudo: false) {
|
|
$padding: unquote(math.div($y, $x) * 100 + "%");
|
|
|
|
@if $pseudo {
|
|
&:before {
|
|
@include pseudo($pos: relative);
|
|
padding-top: $padding;
|
|
width: 100%;
|
|
}
|
|
} @else {
|
|
padding-top: $padding;
|
|
}
|
|
}
|