No notes defined.
<ul class="sds-mailboxMessageGroup list-unstyled">
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage -mailboxMessageHighlight -mailboxMessageChat">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<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">
<span class="sds-dot -dotHighlight">
<span class="sr-only">Message non lu</span>
</span>
<div class="sds-textHelperSmall sds-metaColor">
{Type} · {Date}
</div>
<div class="sds-aboveClickArea">
<button type="button" class="sds-infoDot -small" data-toggle="modal" data-target="#">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p>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 class="sds-aboveClickArea sds-staticExceptionStackMd">
<button type="button" class="sds-document sds-box -boxInsetMd">
<span class="d-flex align-items-center sds-staticGapMd">
<span class="sds-iconBlock" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
</span>
<h3 class="h4">Brochure 'Guide du Prêt au Logement'</h3>
</span>
<div class="sds-document__actionZone">
<span class="sds-btn -iconBtn -btnSecondary">
<span aria-hidden="true" class="sds-icon sds-icon-visible"></span>
</span>
</div>
</button>
</div>
</div>
</div>
</li>
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage -mailboxMessageChat">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<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 class="sds-aboveClickArea">
<button type="button" class="sds-infoDot -small" data-toggle="modal" data-target="#">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p>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 class="sds-aboveClickArea sds-staticExceptionStackMd">
<button type="button" class="sds-document sds-box -boxInsetMd -boxSunken -documentSunken">
<span class="d-flex align-items-center sds-staticGapMd">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
</span>
<h3 class="h4">Brochure 'Guide du Prêt au Logement'</h3>
</span>
<div class="sds-document__actionZone">
<span class="sds-btn -iconBtn -btnSecondary">
<span aria-hidden="true" class="sds-icon sds-icon-visible"></span>
</span>
</div>
</button>
</div>
</div>
</div>
</li>
<li class="sds-mailboxMessageGroup__item">
<div class="sds-mailboxMessage -mailboxMessageChat">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<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 class="sds-aboveClickArea">
<button type="button" class="sds-infoDot -small" data-toggle="modal" data-target="#">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
</div>
</div>
<div class="sds-metaColor sds-textHelper">
<p>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 class="sds-aboveClickArea sds-staticExceptionStackMd">
<button type="button" class="sds-document sds-box -boxInsetMd -boxSunken -documentSunken">
<span class="d-flex align-items-center sds-staticGapMd">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
</span>
<h3 class="h4">Brochure 'Guide du Prêt au Logement'</h3>
</span>
<div class="sds-document__actionZone">
<span class="sds-btn -iconBtn -btnSecondary">
<span aria-hidden="true" class="sds-icon sds-icon-visible"></span>
</span>
</div>
</button>
</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--chat-highlight" %}
</li>
<li class="{{ namespace }}mailboxMessageGroup__item">
{% render "@mailbox-message--chat" %}
</li>
<li class="{{ namespace }}mailboxMessageGroup__item">
{% render "@mailbox-message--chat" %}
</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 {
}
}