72 lines
1.7 KiB
SCSS
72 lines
1.7 KiB
SCSS
/**
|
|
*
|
|
* Makes working with themeable CSS variables easier.
|
|
*
|
|
* $property: the CSS property to theme.
|
|
* $cssVariable: The CSS variable that will store the themed value.
|
|
* $fallback: The value to use as a fallback but as well for the CSS variable default value.
|
|
*/
|
|
@mixin themeable($property, $cssVariable, $fallback) {
|
|
#{$property}: #{$fallback};
|
|
#{$property}: var(--#{$cssVariable}, #{$fallback});
|
|
}
|
|
|
|
/* Mixin for a load more wrapper, made by a container div and child button */
|
|
@mixin load-more() {
|
|
text-align: center;
|
|
|
|
button {
|
|
background: transparent;
|
|
border: 1px solid var(--card-color-tertiary);
|
|
font-size: 17px;
|
|
padding: 14px 5px;
|
|
margin: 40px auto 70px;
|
|
width: 320px;
|
|
max-width: 80%;
|
|
border-radius: 100px;
|
|
font-weight: bold;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Card styling
|
|
@mixin dev-card {
|
|
background: var(--card-bg);
|
|
@include themeable(border, theme-container-border, none);
|
|
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
|
|
|
@media screen and (min-width: 950px) {
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--su-2);
|
|
}
|
|
}
|
|
|
|
// Sidebar links
|
|
@mixin sidebar-link {
|
|
display: block;
|
|
padding: 8px 16px;
|
|
margin: 0 -16px;
|
|
border-radius: var(--radius);
|
|
color: var(--link-color);
|
|
|
|
&:hover {
|
|
color: var(--link-color-hover);
|
|
background: var(--link-bg-hover);
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* Generates the src property for @font-face. The mixin is required
|
|
* so that webpack for Storybook and the application can both
|
|
* generate the font URL correctly.
|
|
*
|
|
* $font: the font file name, e.g. 'OpenDyslexic-Regular.otf'
|
|
*/
|
|
@mixin font-src($font) {
|
|
@if variable-exists(environment) and $environment == 'storybook' {
|
|
src: '/fonts/' + $font;
|
|
} @else {
|
|
src: font-url($font);
|
|
}
|
|
}
|