Label

No notes defined.

<!-- Default -->
<label for="" class="sds-label">
    Label

</label>

<!-- Form -->
<label for="" class="sds-label -form">
    Label

</label>

<!-- Form Large -->
<label for="" class="sds-label -large -form">
    Label

</label>

<!-- Success -->
<label for="" class="sds-label -form -success">
    Label

</label>

<!-- Error -->
<label for="" class="sds-label -form -error">
    Label

</label>

<!-- Success Large -->
<label for="" class="sds-label -form -success -large">
    Label

</label>

<!-- Error Large -->
<label for="" class="sds-label -form -error -large">
    Label

</label>

<!-- Optional -->
<label for="" class="sds-label -form -optional">
    Label

    <span class="sds-label__helper">Optionnel</span>

</label>

<!-- Div -->
<div class="sds-label">
    Label

</div>

<!-- Info Dot -->
<label for="" class="sds-label -form">
    Label

    <a href="#!" tabindex="0" 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>
    </a>

</label>

<!-- Info Dot Modal -->
<label for="" class="sds-label -form">
    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>
    </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}}>
  • Content:
    /* 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 {
    
    		// 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 {
    		padding-left: 0;
    	}
    	
    	&.-noBottomSpacing.-noBottomSpacing {
    
    		padding-bottom: 0;
    
    	}
    
    	&.-optional {
    
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		padding-right: $input-padding-x;
    
    	}
    
    	&.-success,
    	&.-error {
    
    		&::before {
    			@include icon-base;
    			margin-right: map-deep-get($token-spacer-unit-map, "4");
    		}
    
    	}
    
    	&.-error {
    
    		&::before {
    
    			content: map-deep-get($token-icon-map, "close");
    			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
    
    		}
    
    	}
    
    	&.-success {
    
    		&::before {
    
    			content: map-deep-get($token-icon-map, "check");
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    	}
    
    	&.-large {
    
    		@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 {
    	}
    
    }
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/token-based/actions-and-inputs/label/_label.scss
  • Size: 2.5 KB