Has inverted color variant class -inverted
<!-- Default -->
<span class="sds-skeletonUnit"></span>
<!-- Small -->
<span class="sds-skeletonUnit -skeletonUnitSmall"></span>
<!-- Icon Circle -->
<span class="sds-skeletonUnit -skeletonUnitIconCircle"></span>
<!-- Circle -->
<span class="sds-skeletonUnit -skeletonUnitCircle"></span>
<!-- H 1 -->
<span class="sds-skeletonUnit -skeletonUnitH1"></span>
<!-- H 2 -->
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<!-- H 3 -->
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<!-- H 4 -->
<span class="sds-skeletonUnit -skeletonUnitH4"></span>
<!-- H 5 -->
<span class="sds-skeletonUnit -skeletonUnitH5"></span>
<!-- Text Helper Small -->
<span class="sds-skeletonUnit -skeletonUnitTextHelperSmall"></span>
<!-- Text Helper -->
<span class="sds-skeletonUnit -skeletonUnitTextHelper"></span>
<!-- Text Body -->
<span class="sds-skeletonUnit -skeletonUnitTextBody"></span>
<!-- Text Body Large -->
<span class="sds-skeletonUnit -skeletonUnitTextBodyLg"></span>
<!-- Form Group -->
<span class="sds-skeletonUnit -skeletonUnitFormGroup"></span>
<!-- Btn -->
<span class="sds-skeletonUnit -skeletonUnitBtn"></span>
<!-- Btn Small -->
<span class="sds-skeletonUnit -skeletonUnitBtn -skeletonUnitBtnSmall"></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,
&.-skeletonUnitSmall {
// follows same logic as base element
height: map-deep-get($token-sizes-unit-map, "24");
}
&.-skeletonUnitH1,
&.-h1 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h1-font-size-min, $h1-font-size, true);
}
&.-skeletonUnitH2,
&.-h2 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h2-font-size-min, $h2-font-size, true);
}
&.-skeletonUnitH3,
&.-h3 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h3-font-size-min, $h3-font-size, true);
}
&.-skeletonUnitH4,
&.-h4 {
// follows same logic as base element
@include fluid-height($min_width, $max_width, $h4-font-size-min, $h4-font-size, true);
}
&.-skeletonUnitH5,
&.-h5 {
// follows same logic as base element
height: $h5-font-size;
}
&.-skeletonUnitTextHelperSmall,
&.-textHelperSmall {
height: map-deep-get($design-tokens, "sys-font-size-helper-small");
}
&.-skeletonUnitTextHelper,
&.-textHelper {
height: map-deep-get($design-tokens, "sys-font-size-helper-medium");
}
&.-skeletonUnitTextBody,
&.-textBody {
height: map-deep-get($design-tokens,"sys-font-size-body-medium");
}
&.-skeletonUnitTextBodyLg,
&.-textBodyLg {
@include fluid-height($min_width, $max_width, $font-size-lg-min, $font-size-lg-max);
}
&.-skeletonUnitFormGroup,
&.-formGroup {
height: calc(#{map-deep-get($design-tokens, "sys-font-size-helper-small")*2} + #{$input-height} + #{$label-form-bottom-padding-global});
}
&.-skeletonUnitIconCircle,
&.-iconCircle {
width: $icon-circle-regular-dimensions-global;
height: $icon-circle-regular-dimensions-global;
border-radius: $icon-circle-border-radius-global;
flex-shrink: 0;
}
&.-skeletonUnitCircle,
&.-circle {
width: $circle-dimensions-global;
height: $circle-dimensions-global;
border-radius: $icon-circle-border-radius-global;
flex-shrink: 0;
}
&.-skeletonUnitBtn,
&.-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;
}
&.-skeletonUnitBtnSmall,
&.-btnSmall {
height: map-deep-get($design-tokens, "comp-common-button-small-min-height");
}
&.-skeletonUnitFloating,
&.-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;
}
&.-skeletonUnitRadiusInherit,
&.-radiusInherit {
border-radius: inherit;
}
&.-skeletonUnitSquare,
&.-square {
aspect-ratio: 1;
}
&.-skeletonUnitInverted,
&.-inverted {
@extend %skeletonUnitInverted;
}
&.-skeletonUnitBoxBorderRadius,
&.-boxBorderRadius {
border-radius: $box-border-radius-global;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}