No notes defined.
<!-- Default -->
<label for="" class="sds-label">
Label
</label>
<!-- Form -->
<label for="" class="sds-label -labelForm">
Label
</label>
<!-- Form Large -->
<label for="" class="sds-label -labelLarge -labelForm">
Label
</label>
<!-- Success -->
<label for="" class="sds-label -labelForm -labelSuccess">
Label
</label>
<!-- Error -->
<label for="" class="sds-label -labelForm -labelError">
Label
</label>
<!-- Success Large -->
<label for="" class="sds-label -labelForm -labelSuccess -labelLarge">
Label
</label>
<!-- Error Large -->
<label for="" class="sds-label -labelForm -labelError -labelLarge">
Label
</label>
<!-- Optional -->
<label for="" class="sds-label -labelForm -labelOptional">
Label
<span class="sds-label__helper">Optionnel</span>
</label>
<!-- Div -->
<div class="sds-label">
Label
</div>
<!-- Info Dot -->
<label for="" class="sds-label -labelForm">
Label
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<!-- Info Dot Modal -->
<label for="" class="sds-label -labelForm">
Label
<button type="button" class="sds-infoDot -small sds-label__infoDot -small" data-toggle="modal" data-target="#">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<{{ eltType}}{% if eltType === "label" %} for="{{ labelFor }}"{% endif %} class="{{ namespace }}label{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{{ text | safe }}
{% if optional %}
<span class="{{ namespace }}label__helper">{{ textOptional | safe }}</span>
{% endif %}
{% if infodot %}
{% render "@info-dot",infoDotOptions,true %}
{% elseif infoDotModal %}
{% render "@info-dot--modal-small",{
target: infoDotTarget,
classes: [namespace+"label__infoDot","-small"]
},true %}
{% endif %}
</{{ eltType}}>
/* variables specific to current element */
$label-form-bottom-padding: $label-form-bottom-padding-global;
.#{$namespace}label {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("color","comp-label-text-color");
@extend %textHelperSmall;
font-weight: map-deep-get($token-font-weight-map, "bold");
box-decoration-break: clone;
/* 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 */
// label__helper
&__helper {
@include custom-prop-fallback("color","comp-label-meta-text-color");
}
&__underlined {
@include link();
}
// label__infoDot
&__infoDot {
display: inline-flex;
font-size: $font-size-base;
}
/* modifiers */
// label -form
&.-form,
&.-labelForm {
// follows same logic as base element
padding-left: $input-padding-x;
padding-bottom: $label-form-bottom-padding;
#{$self}__infoDot {
position: relative;
top: 1px;
margin-left: map-deep-get($token-spacer-unit-map, "4");
}
}
&.-formNoOffset,
&.-labelFormNoOffset {
padding-left: 0;
}
&.-noBottomSpacing.-noBottomSpacing,
&.-labelNoBottomSpacing.-labelNoBottomSpacing {
padding-bottom: 0;
}
&.-optional,
&.-labelOptional {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: $input-padding-x;
}
&.-success,
&.-error,
&.-labelSuccess,
&.-labelError {
&::before {
@include icon-base;
margin-right: map-deep-get($design-tokens, "comp-label-inline");
}
}
&.-error,
&.-labelError {
&::before {
content: map-deep-get($token-icon-map, "close");
@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
}
}
&.-success,
&.-labelSuccess {
&::before {
content: map-deep-get($token-icon-map, "check");
@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
}
}
&.-large,
&.-labelLarge {
@extend %headingBase;
@extend %h4;
@include custom-prop-fallback("color","comp-label-text-color", true, true);
padding-bottom: map-deep-get($token-spacer-inset-map, "sm");
}
&.-highlight {
@include custom-prop-fallback("color","sys-color-text-highlight-vivid");
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}