No notes defined.
<span class="sds-loader -loaderXl"></span>
<span class="{{ namespace }}loader{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"></span>
/* variables specific to current element */
$loader-base-dimensions: map-deep-get($token-sizes-unit-map, "80");
$loader-xs-dimensions: map-deep-get($token-sizes-unit-map, "40");
$loader-sm-dimensions: 60px; //@TODO rework sprites
$loader-lg-dimensions: map-deep-get($token-sizes-unit-map, "120");
$loader-xl-dimensions: map-deep-get($token-sizes-unit-map, "160");
$loader-anim-values: 1.5s steps(25) infinite;
.#{$namespace}loader {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
width: $loader-base-dimensions;
height: $loader-base-dimensions;
display: inline-flex;
align-items: center;
justify-content: center;
background-image: url('#{$media-path}/loaders/loader-80.png');
background-size: cover;
background-position: left center;
animation: loader-anim-base $loader-anim-values;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
@keyframes loader-anim-xs {
100% {
background-position: -1000px;
}
}
@keyframes loader-anim-sm {
100% {
background-position: -1500px;
}
}
@keyframes loader-anim-base {
100% {
background-position: -2000px;
}
}
@keyframes loader-anim-lg {
100% {
background-position: -3000px;
}
}
@keyframes loader-anim-xl {
100% {
background-position: -4000px;
}
}
}
/* children - write selector in full in comments in order to facilitate search */
// loader__childElement
&__childElement {
// follows same logic as parent
}
/* modifiers */
// loader -loaderXs
&.-loaderXs {
// follows same logic as base element
width: $loader-xs-dimensions;
height: $loader-xs-dimensions;
background-image: url('#{$media-path}/loaders/loader-40.png');
animation: loader-anim-xs $loader-anim-values;
}
&.-loaderSm {
// follows same logic as base element
width: $loader-sm-dimensions;
height: $loader-sm-dimensions;
background-image: url('#{$media-path}/loaders/loader-60.png');
animation: loader-anim-sm $loader-anim-values;
}
&.-loaderLg {
// follows same logic as base element
width: $loader-lg-dimensions;
height: $loader-lg-dimensions;
background-image: url('#{$media-path}/loaders/loader-120.png');
animation: loader-anim-lg $loader-anim-values;
}
&.-loaderXl {
// follows same logic as base element
width: $loader-xl-dimensions;
height: $loader-xl-dimensions;
background-image: url('#{$media-path}/loaders/loader-160.png');
animation: loader-anim-xl $loader-anim-values;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}