List item wide

No notes defined.

<ul class="sds-listItemGroup list-unstyled">
    <li class="sds-listItemGroup__item">
        <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
            <div class="sds-listItem__leading">

                <div class="sds-staticStackXs">
                    <p class="sds-textSemiBold">Suis-je indemnisé si j’ai un accident de voiture sur le trajet vers mon lieu de travail?</p>
                    <p class="sds-textHelper sds-metaColor">il y a 3 heures</p>
                </div>

            </div>

            <div class="sds-listItem__trailing">

                <div class="sds-staticGapSm d-flex align-items-center">
                    <span class="sds-badge badge -badgeHighlight -badgeMuted">

                        En cours

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

            </div>

        </a>
    </li>
    <li class="sds-listItemGroup__item">
        <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
            <div class="sds-listItem__leading">

                <div class="sds-staticStackXs">
                    <p class="sds-textSemiBold">Suis-je indemnisé si j’ai un accident de voiture sur le trajet vers mon lieu de travail?</p>
                    <p class="sds-textHelper sds-metaColor">il y a 3 heures</p>
                </div>

            </div>

            <div class="sds-listItem__trailing">

                <div class="sds-staticGapSm d-flex align-items-center">
                    <span class="sds-badge badge -badgeHighlight -badgeMuted">

                        En cours

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

            </div>

        </a>
    </li>
    <li class="sds-listItemGroup__item">
        <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
            <div class="sds-listItem__leading">

                <div class="sds-staticStackXs">
                    <p class="sds-textSemiBold">Suis-je indemnisé si j’ai un accident de voiture sur le trajet vers mon lieu de travail?</p>
                    <p class="sds-textHelper sds-metaColor">il y a 3 heures</p>
                </div>

            </div>

            <div class="sds-listItem__trailing">

                <div class="sds-staticGapSm d-flex align-items-center">
                    <span class="sds-badge badge -badgeHighlight -badgeMuted">

                        En cours

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

            </div>

        </a>
    </li>
</ul>
<ul class="{{ namespace }}listItemGroup list-unstyled{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<li class="{{ namespace }}listItemGroup__item">
		{% render "@list-item--msp",{
			eltType: "a"
		},true %}
	</li>
	<li class="{{ namespace }}listItemGroup__item">
		{% render "@list-item--msp",{
			eltType: "a"
		},true %}
	</li>
	<li class="{{ namespace }}listItemGroup__item">
		{% render "@list-item--msp",{
			eltType: "a"
		},true %}
	</li>
</ul>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}listItemGroup {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    
    	/* properties of current element  + media queries */
    	@include custom-prop-fallback-override("comp-list-item-inset-h","comp-list-item-wide-inset-h");
    	@include custom-prop-fallback-override("comp-list-item-inset-v","comp-list-item-wide-inset-v");
    	@include custom-prop-fallback-override("comp-list-item-border-radius","comp-list-item-wide-border-radius");
    
    	/* 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 */
    
    	// listItemGroup__item
    	&__item {
    
    		// follows same logic as parent
    
    		position: relative;
    		z-index: z("zero");
    		@include custom-prop-fallback("margin-inline","comp-list-item-inset-h","true","false","true");
    
    		@include focus-visible() {
    
    			> * {
    
    				@include custom-prop-fallback("background-color","comp-list-item-pressed-background-color");
    				@include box-outline();
    
    			}
    
    		}
    
    		&:has(> *:focus-visible) {
    
    			z-index: z("low");
    
    			& + &::before,
    			&::before {
    				display: none;
    			}
    
    		}
    
    		& + &  {
    
    			&::before {
    				
    				content: "";
    				position: absolute;
    				inset: calc(var(--comp-list-item-wide-border-width) * -1) var(--comp-list-item-wide-inset-h) auto;
    				border-top: var(--comp-list-item-wide-border-width) solid var(--comp-list-item-wide-border-color);
    				
    			}
    
    			&:focus {
    
    				&::before {
    					display: none;
    				}
    
    			}
    
    		}
    
    		&:focus-visible {
    
    			z-index: z("low");
    
    			& + &::before {
    				display: none;
    			}
    
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// listItemGroup -altStyle
    	&.-altStyle {
    
    		// follows same logic as base element
    
    	}
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
    	
    
  • URL: /components/raw/list-item-group/_list-item-group.scss
  • Filesystem Path: components/token-based/content/list/list-item-group/_list-item-group.scss
  • Size: 2.1 KB