No notes defined.
<div class="sds-emptyState sds-box -insetLg">
<span class="sds-emptyState__icon sds-icon sds-icon-history-l"></span>
<div class="sds-stackXxs">
<p class="sds-emptyState__text sds-textSemiBold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-emptyState__btn">
<span class="sds-btn__text">Créer un ordre permanent</span>
</button>
</div>
<div class="{{ namespace }}emptyState{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<span class="{{ namespace }}emptyState__icon {{ namespace }}icon {{ namespace }}{{ icon }}"></span>
<div class="{{ namespace }}stackXxs">
<p class="{{ namespace }}emptyState__text {{ namespace }}textSemiBold{% if textBodyLg %} {{ namespace }}textBodyLg{% endif %}">{{ text }}</p>
{% if subText %}
<p class="{{ namespace }}emptyState__text {{ namespace }}textSemiBold">{{ subText }}</p>
{% endif %}
</div>
{% if button %}
{% if big %}
{% render "@btn-secondary--icon-left",{
classes: btnClasses,
icon: btnIcon,
text: btnText
},true %}
{% else %}
{% render "@btn-secondary--small",{
classes: btnClasses,
text: btnText
},true %}
{% endif %}
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}emptyState {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: map-deep-get($token-spacer-unit-map, "40");
color: map-deep-get($token-color-brand-map, "fade", "120");
flex-grow: 1;
&::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 */
&__icon {
// follows same logic as parent
&::before {
font-size: map-deep-get($token-sizes-unit-map, "40");
}
}
&__text {
margin-top: map-deep-get($token-spacer-unit-map, "8");
text-align: center;
max-width: 50ch;
}
&__btn {
margin-top: map-deep-get($token-spacer-unit-map, "24");
}
/* modifiers */
// emptyState -big
&.-big {
// follows same logic as base element
#{$self}__icon {
// follows same logic as parent
&::before {
font-size: map-deep-get($token-sizes-unit-map, "64");
}
}
#{$self}__text {
margin-top: map-deep-get($token-spacer-unit-map, "16");
@extend .#{$namespace}textBodyLg;
}
#{$self}__btn {
margin-top: map-deep-get($token-spacer-unit-map, "32");
}
}
&.-bgSecondary06 {
background-color: map-deep-get($token-color-brand-map, "secondary", "06");
}
&.-noPadding {
padding: 0;
}
&.-verticalSpacingBig {
padding-top: map-deep-get($token-spacer-unit-map, "64");
padding-bottom: map-deep-get($token-spacer-unit-map, "64");
@include media-breakpoint-up(lg) {
padding-top: map-deep-get($token-spacer-unit-map, "64") * 2;
padding-bottom: map-deep-get($token-spacer-unit-map, "64") * 2;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}