Amount

No notes defined.

<!-- Default -->
<div class="sds-amount">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Positive -->
<div class="sds-amount -positive">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Negative -->
<div class="sds-amount -negative">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Processing -->
<div class="sds-amount -processing">
    <span class="sds-amount__value">{#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Highlight -->
<div class="sds-amount -highlight100">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Negative Faded -->
<div class="sds-amount -negative -fade">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Small -->
<div class="sds-amount -amountXs">
    <span class="sds-amount__value">335,30</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Medium -->
<div class="sds-amount -amountSm">
    <span class="sds-amount__value">335,30</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Small Positive -->
<div class="sds-amount -positive -amountXs">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Small Negative -->
<div class="sds-amount -negative -amountXs">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Small Negative Faded -->
<div class="sds-amount -negative -amountXs -fade">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Large -->
<div class="sds-amount -amountLg">
    <span class="sds-amount__value">335,30</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Large Positive -->
<div class="sds-amount -positive -amountLg">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Large Negative -->
<div class="sds-amount -negative -amountLg">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Small Negative Faded -->
<div class="sds-amount -negative -amountLg -fade">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Xtra Large -->
<div class="sds-amount -amountXl">
    <span class="sds-amount__value">335,30</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Xtra Large Secondary 100 -->
<div class="sds-amount -amountXl -secondary100">
    <span class="sds-amount__value">335,30</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Xtra Large Positive -->
<div class="sds-amount -positive -amountXl">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Xtra Large Positive Frequency -->
<div class="sds-amount -positive -amountXl">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

    <span class="sds-amount__frequency">
        / mois
    </span>

</div>

<!-- Xtra Large Negative -->
<div class="sds-amount -negative -amountXl">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Xtra Large Negative -->
<div class="sds-amount -negative -amountXl -fade">
    <span class="sds-amount__value">{-#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<!-- Body Xxl -->
<div class="sds-amount -positive -amountXxl">
    <span class="sds-amount__value">{+#.###,##}</span>

    <span class="sds-amount__currency"></span>

</div>

<div class="{{ namespace }}amount{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<span class="{{ namespace }}amount__value">{{ text }}</span>
	{% if currency %}
	<span class="{{ namespace }}amount__currency">{{ currency }}</span>
	{% endif %}
	{% if frequency %}
		<span class="{{ namespace }}amount__frequency">
			{{ frequency }}
		</span>
	{% endif %}
</div>
  • Content:
    /* variables specific to current element */
    
    .#{$namespace}amount {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	display: inline-flex;
    	align-items: center;
    	font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    	flex-shrink: 0;
    	@include custom-prop-fallback("color","sys-color-text-primary-contrast");
    
    	/* 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 */
    
    	// amount__childElement
    	&__currency {
    
    		// follows same logic as parent
    
    		margin-left: 0.15em;
    
    	}
    
    	&__frequency {
    
    		margin-left: 0.35em;
    		margin-top: -0.35em;
    		font-size: 0.7em; // => base font MAX
    		line-height: $line-height-base; // => base font line height
    		font-weight: inherit;
    		position: relative;
    		top: -0.1em; // positioning tweak
    		align-self: flex-end;
    
    	}
    
    
    	/* modifiers */
    
    	// amount -positive
    	&.-positive {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    	}
    
    	// amount -negative
    	&.-negative {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
    
    		&.-fade {
    
    			font-style: italic;
    			@include custom-prop-fallback("color", "sys-color-text-secondary-muted");
    
    		}
    
    	}
    
    	&.-processing {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("color", "sys-color-text-status-warning-vivid");
    
    	}
    
    	&.-secondary100 {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
    
    	}
    
    	&.-highlight100 {
    
    		@include custom-prop-fallback("color", "sys-color-text-highlight-vivid");
    
    	}
    
    
    	&.-amountXs {
    		font-size: map-deep-get($token-font-size-map, "body", "xs");
    	}
    
    	&.-amountSm {
    		@extend %textHelper;
    	}
    
    	&.-amountLg {
    		@extend %textBodyLg;
    	}
    
    	&.-amountXl {
    		@extend %textBodyXl;
    		font-weight: map-deep-get($token-font-weight-map, "bold");
    	}
    
    	&.-amountXxl {
    		@extend %textBodyXxl;
    		font-weight: map-deep-get($token-font-weight-map, "regular");
    	}
    
    	&.-regular {
    		font-weight: map-deep-get($token-font-weight-map, "regular");
    	}
    
    	//&.-huge {
    	//	font-size: map-deep-get($token-font-size-map, "body", "xxl");
    	//	line-height: map-deep-get($token-font-line-height-map, "l");
    	//}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/amount/_amount.scss
  • Filesystem Path: components/base-components/atoms/amount/_amount.scss
  • Size: 2.7 KB