No notes defined.
<ul class="sds-mailboxMessageGroup list-unstyled">
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage -mailboxMessageHighlight">
<span class="sds-mailboxMessage__status">
<span class="sds-dot -dotHighlight">
<span class="sr-only">Message non lu</span>
</span>
</span>
<div class="sds-mailboxMessage__inner sds-staticStackSm">
<div class="sds-staticStackXs">
<p class="sds-headingColor d-flex">
<a href="" class="sds-mailboxMessage__heading sds-textBold stretched-link">{Subject}</a>
</p>
<div class="d-flex align-items-center sds-staticGapXs">
<div class="sds-aboveClickArea">
<span class="sds-icon sds-icon-clip sds-metaColor sds-iconSizeInherit" title="Ce message comporte une ou plusieurs pièces jointes">
<span class="sr-only">Ce message comporte une ou plusieurs pièces jointes</span>
</span>
</div>
<div class="sds-textHelperSmall sds-metaColor">
{Type} · {Date}
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p class="text-truncate">Curabitur mauris diam, cursus non velit sed, semper blandit elit. Phasellus imperdiet tellus elit, quis consectetur dui gravida vel. Aenean ac enim quis odio blandit laoreet nec et metus.</p>
</div>
</div>
<div class="sds-aboveClickArea flex-shrink-0">
<div class="sds-mailboxMessage__actions">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-message"></span>
<span class="sr-only">Marquer comme non lu</span>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-trash"></span>
<span class="sr-only">Supprimer</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage">
<div class="sds-mailboxMessage__inner sds-staticStackSm">
<div class="sds-staticStackXs">
<p class="sds-headingColor d-flex">
<a href="" class="sds-mailboxMessage__heading sds-textBold stretched-link">{Subject}</a>
</p>
<div class="d-flex align-items-center sds-staticGapXs">
<div class="sds-textHelperSmall sds-metaColor">
{Type} · {Date}
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p class="text-truncate">Curabitur mauris diam, cursus non velit sed, semper blandit elit. Phasellus imperdiet tellus elit, quis consectetur dui gravida vel. Aenean ac enim quis odio blandit laoreet nec et metus.</p>
</div>
</div>
<div class="sds-aboveClickArea flex-shrink-0">
<div class="sds-mailboxMessage__actions">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-message"></span>
<span class="sr-only">Marquer comme non lu</span>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-trash"></span>
<span class="sr-only">Supprimer</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage">
<div class="sds-mailboxMessage__inner sds-staticStackSm">
<div class="sds-staticStackXs">
<p class="sds-headingColor d-flex">
<a href="" class="sds-mailboxMessage__heading sds-textBold stretched-link">{Subject}</a>
</p>
<div class="d-flex align-items-center sds-staticGapXs">
<div class="sds-textHelperSmall sds-metaColor">
{Type} · {Date}
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p class="text-truncate">Curabitur mauris diam, cursus non velit sed, semper blandit elit. Phasellus imperdiet tellus elit, quis consectetur dui gravida vel. Aenean ac enim quis odio blandit laoreet nec et metus.</p>
</div>
</div>
<div class="sds-aboveClickArea flex-shrink-0">
<div class="sds-mailboxMessage__actions">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-message"></span>
<span class="sr-only">Marquer comme non lu</span>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-trash"></span>
<span class="sr-only">Supprimer</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<ul class="{{ namespace }}mailboxMessageGroup list-unstyled{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<li class="{{ namespace }}mailboxMessageGroup__item">
{% render "@mailbox-message--highlight" %}
</li>
<li class="{{ namespace }}mailboxMessageGroup__item">
{% render "@mailbox-message" %}
</li>
<li class="{{ namespace }}mailboxMessageGroup__item">
{% render "@mailbox-message" %}
</li>
</ul>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}mailboxMessageGroup {
/* 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 */
// listItemGroup__item
&__item {
// follows same logic as parent
position: relative;
//@include custom-prop-fallback("margin-inline","comp-mailbox-message-inset-h","true","false","true");
&:has(*:focus-visible) {
z-index: z("low");
}
& + & {
&::before {
content: "";
position: absolute;
inset: calc(var(--comp-mailbox-message-border-width) * -1) var(--comp-mailbox-message-inset-h) auto;
border-top: var(--comp-mailbox-message-border-width) solid var(--comp-mailbox-message-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 {
}
}