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__center">
</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__center">
</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__center">
</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>
/* 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 {
}
}