Section Title: Amount

Use .sds-sectionTitle__stackAboveContent for elements that should be interacted with.
<div class="sds-sectionTitle -isTimelineItem">
    <div class="sds-sectionTitle__inner">
        <div class="sds-sectionTitle__col">
            <div class="sds-sectionTitle__textMain">
                Relevé, Avril 2023
            </div>

            <div class="sds-amount -amountXl -secondary100">
                <span class="sds-amount__value">953,63</span>

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

            </div>

        </div>

    </div>

    <div class="sds-sectionTitle__toggleWrapper">
        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link">

            <span class="sds-icon sds-icon-plus"></span>

            <div class="sr-only">Toggle transactions list</div>

        </button>

    </div>

</div>
<div class="{{ namespace }}sectionTitle{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionTitle__inner">
		<div class="{{ namespace }}sectionTitle__col">
			<div class="{{ namespace }}sectionTitle__textMain">
				{{ text }}
			</div>
			{% if amount %}
			{% render "@amount--xtra-large",{text: sectionTitleAmountText , classes: ["-secondary100"]},true %}
			{% endif %}
		</div>
		{% if transactionStatus %}
		<div class="{{ namespace }}sectionTitle__col -status">
			{% render "@snet-transaction-state"+transactionStatus %}
			<div class="{{ namespace }}sectionTitle__meta {{ namespace }}textHelper">
				{{ transactionInfo }}
			</div>
		</div>
		{% endif %}
	</div>
	{% if toggle %}
		<div class="{{ namespace }}sectionTitle__toggleWrapper">
			{% render "@icon-btn-secondary--smaller",{
				icon: "icon-plus",
				classes: [namespace+"sectionTitle__toggle", "stretched-link"],
				attrs: toggleOptions,
				action: "Toggle transactions list"
			},true %}
			{% if isLoading %}
				{% render "@circle--loading-big",{
					classes: [namespace+"sectionTitle__loader"]
				},true %}
			{% endif %}
		</div>
	{% endif %}
</div>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $section-title-bottom-padding: map-deep-get($token-spacer-unit-map, "24");
    $section-title-timeline-line-height: map-deep-get($token-sizes-unit-map, "16");
    
    .#{$namespace}sectionTitle {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	position: relative;
    
    	/* 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 */
    
    	&__inner {
    
    		display: flex;
    		align-items: flex-start;
    		justify-content: space-between;
    		@include spacer-component-inline("sm");
    
    	}
    
    	&__col {
    		&.-status {
    
    			// follows same logic as base element
    
    			text-align: right;
    
    		}
    	}
    
    	// sectionTitle__text
    	&__text {
    
    		// follows same logic as parent
    
    		display: flex;
    		flex-direction: column;
    
    	}
    
    	&__toggleWrapper {
    
    		position: absolute;
    		z-index: z("zero");
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
    
    	}
    	
    	&__toggle {
    		
    		&[aria-expanded="true"] > * {
    			&::before {
    				content: $icon-minus
    			}
    		}
    
    	}
    	
    	&__aboveClickArea {
    
    		position: relative;
    		z-index: z("low");
    
    	}
    
    	&__textMain {
    		@extend %headingBase;
    		@extend %h4;
    		@include custom-prop-fallback-override("color", "sys-color-text-primary-vivid");
    	}
    
    	&__meta {
    
    		@include custom-prop-fallback("color","sys-color-text-primary-muted");
    
    	}
    
    
    	/* modifiers */
    
    	// sectionTitle -altStyle
    	&.-isTimelineItem {
    
    		padding-top: map-deep-get($token-spacer-unit-map, "8");
    		padding-bottom: $section-title-bottom-padding;
    		margin-bottom: -($section-title-timeline-line-height);
    
    		// follows same logic as base element
    
    		&::before {
    			content: "";
    			position: absolute;
    			z-index: z("negative");
    			height: $section-title-timeline-line-height;
    			bottom: 0;
    			left: $section-item-horiz-padding-global + $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2);
    			transform: translateX(-50%);
    			width: 2px;
    			@include custom-prop-fallback("background-color", "sys-color-background-primary-30")
    
    		}
    
    
    		#{$self}__inner {
    
    			padding-left: $section-item-col-date-width-global;
    
    		}
    
    		#{$self}__toggleWrapper {
    			padding: $timeline-item-vert-padding-global;
    			top: -($timeline-item-vert-padding-global);
    			right: -($section-item-horiz-padding-global + $timeline-item-content-negative-margin-global);
    			left: -($section-item-horiz-padding-global + $timeline-item-content-negative-margin-global);
    
    			> * {
    				margin-top: map-deep-get($token-spacer-unit-map, "2");
    
    			}
    
    		}
    
    
    		#{$self}__loader {
    			display: none;
    		}
    
    	}
    
    	&.-isTimelineItem.-isLoading  {
    
    		#{$self}__toggle {
    			display: none;
    		}
    
    		#{$self}__loader {
    			display: block;
    		}
    		
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-section-title/_section-title.scss
  • Filesystem Path: components/snet/molecules/section-title/_section-title.scss
  • Size: 3.2 KB