List Item: Link

Content aligned at the end of the element goes in .sds-rightContent.
<a href="" class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

    <div class="sds-avatar centeredBgi">

        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

    </div>

    <div class="sds-listItem__text">
        <div class="sds-listItem__textMain">text</div>

    </div>

    <div class="sds-listItem__rightContent">

        <span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">

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

        </span>

    </div>

</a>
<{{ eltType }}
{% if eltType === "button" %} type="button"{% elseif eltType === "a" %} href="{{ href }}"{%- endif -%}
class="{{ namespace }}listItem {{ namespace }}hoverContentSecondary{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"
{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}
>
{% if iconLeft %}
	{% if iconLeft.avatar %}
	{% render "@avatar--image",{img: iconLeft.avatar.img},true %}
		{% elseif iconLeft.iconCircle %}
	{% render "@icon-circle-regular--info-100",{icon: iconLeft.iconCircle.icon},true %}
	{% endif %}
{% endif %}
<div class="{{ namespace }}listItem__text">
	<div class="{{ namespace }}listItem__textMain">{{ text }}</div>
	{% if helperText %}
		<div class="{{ namespace }}listItem__textMeta {{ namespace }}textHelper">{{ helperText }}</div>
	{% endif %}
</div>
{% if rightContent %}
<div class="{{ namespace }}listItem__rightContent">
	{% if iconRight %}
		{%- if (eltType === "button") or (eltType === "a") %}
			{% render "@icon-circle-regular--default",{classes: [namespace+"hoverContentSecondary__icon"], icon: iconRight.icon},true %}
		{% else %}
			{% render "@icon-btn-regular--secondary-10",{icon: iconRight.icon},true %}
		{%- endif %}
	{% endif %}
</div>
{% endif %}
</{{ eltType }}>
  • Content:
    export default class ListItem {
    
    	constructor() {
    
    		this.showDetails();
    
    	}
    
    	showDetails () {
    
    		$(".sds-listItem__collapse").each(function( index, element ) {
    			$(element).on("show.bs.collapse", function (e) {
    				$(e.target).closest(".sds-listItemWrapper").addClass("-detailShown");
    			});
    		})
    
    		$(".sds-listItem__collapse").each(function( index, element ) {
    			$(element).on("hide.bs.collapse", function (e) {
    				$(e.target).closest(".sds-listItemWrapper").removeClass("-detailShown");
    			});
    		})
    
    	}
    
    }
    
  • URL: /components/raw/snet-list-item/ListItem.js
  • Filesystem Path: components/snet/molecules/list-item/ListItem.js
  • Size: 514 Bytes
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}listItem {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	display: flex;
    	align-items: center;
    	border-radius: map-deep-get($token-radius-map,"16");
    	@include spacer-component-inset("sm");
    	@include spacer-component-inline("md");
    	width: 100%; // Needed if item is button
    	text-align: left; // Needed if item is button
    	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
    
    	/* 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 {
    
    		@include spacer-component-inline("md");
    		display: flex;
    		align-items: center;
    		position: relative;
    		flex-grow: 1;
    		margin: 0 !important;
    
    
    	}
    
    	// listItem__text
    	&__text {
    
    		// follows same logic as parent
    		min-width: 0; // necessary if text overflow applied
    		//flex-shrink: 0;
    	}
    		
    	// listItem__textMain
    	&__textMain {
    			
    		display: block;
    		@include text-truncate();
    			
    		&.#{$namespace}textBodyLg {
    
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		}	
    			
    		+ #{$self}__description,
    		+ #{$self}__textMeta {
    
    			//margin-top: 2px; //@TODO exception?
    		
    		}
    		
    	}	
    		
    	&__textMeta {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    		
    	}
    
    	&__rightContent {
    
    		display: flex;
    		align-items: center;
    		margin-left: auto;
    		@include spacer-component-inline("md");
    
    		&.-number {
    
    			justify-content: space-between;
    			width: 25%;
    
    		}
    
    	}
    	
    	&__collapseTrigger {
    
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    
    	}
    
    	&__collapse{
    
    		transition: none !important;
    
    	}
    
    	&__status {
    
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		&.-positive {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    		&.-neg {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
    
    		}
    
    	}
    
    	&__iconCircleTextGroup {
    
    		margin-top: map-deep-get($token-spacer-unit-map, "8");
    
    	}
    
    	&__detail {
    
    		box-shadow: map-deep-get($token-shadow-map, "active");
    		position: relative; // necessary for shadow to show above next element
    		margin: 0 (-($timeline-item-horiz-padding-global));
    
    	}
    
    	&__detailHeader {
    
    		margin-bottom: map-deep-get($token-spacer-unit-map, "48");
    		margin-left: -8px;
    		margin-right: -8px;
    		position: relative;
    		width: auto;
    
    
    		#{$self}__rightContent {
    
    			margin-right: 0;
    
    		}
    
    	}
    
    	&__detailHelperText {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
    
    		font-size: map-deep-get($token-font-size-map, "body", "s");
    
    	}
    
    	&__detailText {
    
    		font-size: map-deep-get($token-font-size-map, "body", "xl");
    
    		&.-success100 {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    	}
    
    	&__transactionState,
    	&__transactionState > * {
    
    		@include text-truncate();
    		
    		[class*="icon"] {
    			flex-shrink: 0;
    		}
    
    	}
    
    	&__secondary100 {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
    
    	}
    
    	&__creditCard {
    
    		width: map-deep-get($token-sizes-unit-map, "40");
    
    	}
    
    	/* modifiers */
    
    	// listItem -headingText
    	&.-headingText {
    
    		// follows same logic as base element
    
    		#{$self}__textMain {
    
    			@extend %headingBase;
    			@extend %h5;
    
    		}
    
    	}
    
    	// listItem -rounded
    	&.-rounded {
    
    		border-radius: map-deep-get($token-radius-map, "32");
    
    	}
    
    	&.-action {
    
    		align-items: flex-start;
    
    		#{$self}__avatar {
    
    			margin-top: map-deep-get($token-spacer-unit-map, "4");
    
    		}
    
    		#{$self}__textMeta {
    
    			@include custom-prop-fallback("color", "sys-color-text-primary-contrast");
    
    		}
    
    	}
    
    	&.-disabled {
    
    		pointer-events: none;
    		opacity: .4;
    
    	}
    
    	&.-dom {
    
    		#{$self}__textMeta {
    
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    			margin-top: map-deep-get($token-spacer-unit-map, "4");
    			margin-bottom: map-deep-get($token-spacer-unit-map, "2");
    
    		}
    
    	}
    
    	&.-insetMd {
    		@include spacer-component-inset("md");
    	}
    
    	&.-insetLg,
    	&.-paddingLg {
    		@include spacer-component-inset("lg");
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	&Wrapper {
    
    		position: relative;
    
    		@include hover() {
    
    			> #{$self} {
    
    				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
    
    			}
    
    		}
    
    		&.-detailShown {
    
    			> #{$self} {
    
    				display: none;
    
    			}
    
    		}
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-list-item/_list-item.scss
  • Filesystem Path: components/snet/molecules/list-item/_list-item.scss
  • Size: 4.8 KB