Section Item: Default

Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.

<div class="sds-sectionItem">
    <div class="sds-sectionItem__inner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                18/03/2022
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -grow">
            <div class="sds-stackXs">
                <div class="sds-amount -negative">
                    <span class="sds-amount__value">{-#.###,##}</span>

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

                </div>
                <div>Lorem Ipsum</div>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                18/03/2022
            </div>
        </div>
    </div>
</div>
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionItem__inner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				18/03/2022
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-regular--secondary-10" %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -grow">
			<div class="{{ namespace }}stackXs">
				{% render "@amount--negative" %}
				<div>Lorem Ipsum</div>
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				18/03/2022
			</div>
		</div>
	</div>
</div>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $section-item-horiz-margin: $section-item-horiz-margin-global;
    $section-item-horiz-padding: $section-item-horiz-padding-global;
    $section-item-col-dot-min-height: $section-item-col-dot-min-height-global;
    $section-item-col-dot-width: $section-item-col-dot-width-global;
    $section-item-col-date-width: $section-item-col-date-width-global;
    $section-item-vertical-padding: $section-item-vertical-padding-global;
    
    .#{$namespace}sectionItem {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	/* 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,
    	&__detailInner {
    
    		display: flex;
    		align-items: flex-start;
    		@include spacer-component-inset-vert-greater("md", "sm");
    		@include custom-prop-fallback("background-color", "comp-box-background-color");
    		border-radius: map-deep-get($token-radius-map, "16");
    		position: relative;
    
    		&:hover {
    			@media (hover: hover) {
    				@include custom-prop-fallback("background-color", "comp-box-sunken-background-color");
    			}
    		}
    
    	}
    
    	// sectionItem__innerCol
    	&__innerCol {
    
    		// follows same logic as parent
    
    		display: flex;
    		align-items: center;
    		flex-grow: 0;
    		flex-shrink: 0;
    		min-height: 40px;
    
    		& + & {
    
    			margin-left: map-deep-get($token-spacer-inline-map, "md");
    
    		}
    
    		&.-date {
    
    			width: $section-item-col-date-width;
    			justify-content: flex-end;
    			text-align: right;
    			white-space: nowrap;
    
    		}
    
    		&.-dot {
    
    			width: $section-item-col-dot-width;
    
    			background-color: inherit;
    
    			display: flex;
    			align-items: flex-start;
    			align-self: stretch;
    			justify-content: center;
    
    			position: relative;
    			z-index: z("zero");
    
    
    		}
    
    		&.-grow {
    			flex-grow: 1;
    			flex-shrink: 1;
    		}
    
    		&.-content {
    
    			.#{$namespace}borderedImage {
    				margin-top: map-deep-get($token-spacer-unit-map, "24");
    			}
    
    		}
    
    		&.-justifyEnd {
    
    			justify-content: flex-end;
    
    		}
    
    	}
    
    	&__dotWrapper {
    
    		min-height: $section-item-col-dot-min-height;
    		display: flex;
    		background-color: inherit;
    
    		align-items: center;
    		justify-content: center;
    
    	}
    
    	&__textMeta {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    
    	}
    
    	&__collapse {
    
    		position: relative;
    		z-index: z("low");
    		transition: none;
    
    		&.in {
    
    			transition: none !important;
    
    		}
    
    		&.show {
    
    			transition: none !important;
    
    		}
    
    
    	}
    
    	&__detail {
    
    		box-shadow: map-deep-get($token-shadow-map, "detail");
    		position: relative; // necessary for shadow to show above next element
    		margin: 0 (-($timeline-item-horiz-padding-global + $section-item-horiz-padding));
    		padding: map-deep-get($token-spacer-inset-map, "md") ($timeline-item-horiz-padding-global + $section-item-horiz-padding);
    
    		&::before {
    
    			content: "";
    			width: $border-width*2;
    			position: absolute;
    			z-index: z("zero");
    			top: 0;
    			height: 100%;
    			left: $timeline-item-horiz-padding-global + $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2) + ($section-item-horiz-padding*2);
    			transform: translateX(-50%);
    			@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
    
    		}
    
    	}
    
    	&__transactionAmountIcon {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    		vertical-align: inherit;
    		position: relative;
    		top: 0.075em;
    
    		&::before {
    
    			font-size: 1em;
    
    		}
    
    	}
    
    	&__detailContent {
    
    		margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
    		padding-left: $section-item-col-date-width + $section-item-col-dot-width + $section-item-horiz-padding + ($section-item-horiz-margin*2);
    		padding-right: $section-item-horiz-padding;
    		@include spacer-component-stack("md");
    
    	}
    
    	&__toggle {
    
    		position: absolute;
    		z-index: z("zero");
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    
    	}
    
    	&__aboveClickArea {
    
    		position: relative;
    		z-index: z("low");
    
    	}
    	
    	&__loaderContentShort {
    
    		max-width: 144px;
    
    	}
    
    
    	/* modifiers */
    
    	// sectionItem -isTimelineItem
    	&.-isTimelineItem {
    
    		// follows same logic as base element
    
    		#{$self}__innerCol {
    
    			&.-dot {
    
    				&::before {
    
    					content: "";
    					position: absolute;
    					z-index: z("negative");
    					top: -($section-item-vertical-padding);
    					bottom: -($section-item-vertical-padding);
    					left: 50%;
    					transform: translateX(-50%);
    					width: $border-width*2;
    					@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-noLineFirstItem {
    
    		#{$self}__innerCol {
    
    			&.-dot {
    
    				&::before {
    
    					top: 50%;
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-noLineLastItem {
    
    		#{$self}__innerCol {
    
    			&.-dot {
    
    				&::before {
    
    					bottom: 50%;
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-noHover {
    
    		#{$self}__inner {
    			&:hover {
    				@media (hover: hover) {
    
    					background-color: transparent;
    
    				}
    			}
    		}
    
    	}
    
    	&.-detailShown {
    
    		#{$self}__inner {
    			display: none;
    		}
    
    	}
    
    	&.-hasNotif {
    
    		#{$self}__inner {
    			#{$self}__innerCol {
    
    				&.-date {
    
    					position: relative;
    					z-index: z("zero");
    
    					&::before {
    
    						content: "";
    						position: absolute;
    						top: 50%;
    						transform: translateY(-50%);
    						left: calc(100% + #{map-deep-get($token-spacer-inline-map, "sm")});
    						@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");
    						width: map-deep-get($token-sizes-unit-map, "8");
    						height: map-deep-get($token-sizes-unit-map, "8");
    						border-radius: map-deep-get($token-radius-map, "circle");
    
    					}
    
    				}
    
    			}
    		}
    
    	}
    
    	&.-dotNoWidth {
    		#{$self}__innerCol.-dot {
    			width: auto;
    		}
    	}
    
    	&.-isStatic {
    
    		&:hover {
    			@media (hover: hover) {
    				#{$self}__inner {
    					@include custom-prop-fallback("background-color", "comp-box-background-color");
    				}
    			}
    		}
    
    	}
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-section-item/_section-item.scss
  • Filesystem Path: components/snet/organisms/section-item/_section-item.scss
  • Size: 6.3 KB