Skeleton Unit: H 1

Modifiers

Has inverted color variant class -inverted

<span class="sds-skeletonUnit -h1"></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>
  • Handle: @skeleton-unit--h1
  • Preview:
  • Filesystem Path: components/base-components/atoms/skeleton-unit/skeleton-unit.njk
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/skeleton-unit/_skeleton-unit.scss
  • Filesystem Path: components/base-components/atoms/skeleton-unit/_skeleton-unit.scss
  • Size: 3.6 KB