Has inverted color variant class -inverted
<!-- Default -->
<span class="sds-skeletonUnit"></span>
<!-- Small -->
<span class="sds-skeletonUnit -small"></span>
<!-- Icon Circle -->
<span class="sds-skeletonUnit -iconCircle"></span>
<!-- Circle -->
<span class="sds-skeletonUnit -circle"></span>
<!-- H 1 -->
<span class="sds-skeletonUnit -h1"></span>
<!-- H 2 -->
<span class="sds-skeletonUnit -h2"></span>
<!-- H 3 -->
<span class="sds-skeletonUnit -h3"></span>
<!-- H 4 -->
<span class="sds-skeletonUnit -h4"></span>
<!-- H 5 -->
<span class="sds-skeletonUnit -h5"></span>
<!-- Text Helper Small -->
<span class="sds-skeletonUnit -textHelperSmall"></span>
<!-- Text Helper -->
<span class="sds-skeletonUnit -textHelper"></span>
<!-- Text Body -->
<span class="sds-skeletonUnit -textBody"></span>
<!-- Text Body Large -->
<span class="sds-skeletonUnit -textBodyLg"></span>
<!-- Form Group -->
<span class="sds-skeletonUnit -formGroup"></span>
<!-- Btn -->
<span class="sds-skeletonUnit -btn"></span>
<!-- Btn Small -->
<span class="sds-skeletonUnit -btn -btnSmall"></span>
<span class="{{ namespace }}skeletonUnit{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if inlineCSS %} style="{% for property, value in inlineCSS %} {{ property }}: {{ value }};{% endfor %}"{% endif %}></span>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}contentLoadingBlock,
.#{$namespace}skeletonUnit {
/* Save root element context for easy access if nesting is needed */
$self: ".#{$namespace}contentLoadingBlock";
$selfToRemove: ".#{$namespace}skeletonUnit";
/* properties of current element + media queries */
@extend %skeletonUnit;
display: block;
height: map-deep-get($token-sizes-unit-map, "40");
border-radius: map-deep-get($token-radius-map, "8");
/* 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 {
}
/* children - write selector in full in comments in order to facilitate search */
// contentLoading__childElement
&__childElement {
// follows same logic as parent
}
/* modifiers */
// contentLoading -small
&.-small {
// follows same logic as base element
height: map-deep-get($token-sizes-unit-map, "24");
}
&.-h1 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h1-font-size-min, $h1-font-size, true);
}
&.-h2 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h2-font-size-min, $h2-font-size, true);
}
&.-h3 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h3-font-size-min, $h3-font-size, true);
}
&.-h4 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h4-font-size-min, $h4-font-size, true);
}
&.-h5 {
// follows same logic as base element
height: $h5-font-size;
}
&.-textHelperSmall {
height: map-deep-get($token-font-size-map,"body","xs");
}
&.-textHelper {
height: map-deep-get($token-font-size-map,"body","s");
}
&.-textBody {
height: map-deep-get($token-font-size-map,"body","m");
}
&.-textBodyLg {
@include fluid-height($min_width, $max_width, $font-size-lg-min, $font-size-lg-max);
}
&.-formGroup {
height: calc(#{map-deep-get($token-font-size-map,"body","xs")*2} + #{$input-height} + #{$label-form-bottom-padding-global});
}
&.-iconCircle {
width: $icon-circle-regular-dimensions-global;
height: $icon-circle-regular-dimensions-global;
border-radius: $icon-circle-border-radius-global;
flex-shrink: 0;
}
&.-circle {
width: $circle-dimensions-global;
height: $circle-dimensions-global;
border-radius: $icon-circle-border-radius-global;
flex-shrink: 0;
}
&.-btn {
display: inline-flex;
border-radius: map-deep-get($token-radius-map, "button-small");
height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
width: 200px;
flex-shrink: 1;
flex-grow: 0;
&.-btnSmall {
height: map-deep-get($token-button-size-map, "small" , "desktop", "min-height");
}
}
&.-floating {
position: absolute;
z-index: z("medium");
top: 0;
bottom: 0;
left: 0; // overridden when direct child of [class*="col"] element
right: 0; // overridden when direct child of [class*="col"] element
height: auto;
}
&.-radiusInherit {
border-radius: inherit;
}
&.-square {
aspect-ratio: 1;
}
&.-inverted {
@extend %skeletonUnitInverted;
}
&.-boxBorderRadius {
border-radius: $box-border-radius-global;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}