No notes defined.
<div class="sds-mailboxMessage -mailboxMessageHighlight">
<div class="sds-mailboxMessage__inner">
<div class="sds-avatar centeredBgi -avatarBase">
<div class="sds-avatar__text">AG</div>
</div>
<div class="sds-mailboxMessage__content 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-aboveClickArea d-inline-flex align-items-center">
<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>
</div>
<div class="{{ namespace }}mailboxMessage{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}mailboxMessage__inner">
{% if chat %}
{% render "@avatar--image" %}
{% else %}
{% render "@avatar" %}
{% endif %}
<div class="{{ namespace }}mailboxMessage__content {{ namespace }}staticStackSm">
<div class="{{ namespace }}staticStackXs">
<p class="{{ namespace }}headingColor d-flex">
<a href="" class="{{ namespace }}mailboxMessage__heading {{ namespace }}textBold stretched-link">{{ heading or "{Subject}" }}</a>
</p>
{% if meta %}
<div class="d-flex align-items-center {{ namespace }}staticGapXs">
{% if highlight %}
{% render "@dot--highlight",{
srOnly: "Message non lu"
},true %}
{% if not chat %}
<div class="{{ namespace }}aboveClickArea d-inline-flex align-items-center">
<span class="{{ namespace }}icon {{ namespace }}icon-clip {{ namespace }}metaColor {{ namespace }}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>
{% endif %}
{% endif %}
<div class="{{ namespace }}textHelperSmall {{ namespace }}metaColor">
{Type} · {Date}
</div>
{% if chat %}
<div class="{{ namespace }}aboveClickArea d-inline-flex align-items-center">
{% render "@info-dot--modal-small" %}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="{{ namespace }}metaColor {{ namespace }}textHelper">
<p {% if not chat %}class="text-truncate"{% endif %}>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>
{% if chat %}
<div class="{{ namespace }}aboveClickArea {{ namespace }}staticExceptionStackMd">
{% if highlight %}
{% render "@document-list-item--preview" %}
{% else %}
{% render "@document-list-item--preview-sunken" %}
{% endif %}
</div>
{% endif %}
</div>
{% if not chat %}
<div class="{{ namespace }}aboveClickArea flex-shrink-0">
<div class="{{ namespace }}mailboxMessage__actions">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary-inverse--small",{
icon: "icon-message",
action: "Marquer comme non lu"
},true %}
</li>
<li>
{% render "@icon-btn-secondary-inverse--small",{
icon: "icon-trash",
action: "Supprimer"
},true %}
</li>
</ul>
</div>
</div>
{% endif %}
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}mailboxMessage {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
z-index: z("zero");
@include custom-prop-fallback("padding-inline","comp-mailbox-message-inset-h");
@include custom-prop-fallback("background-color","comp-mailbox-message-default-enabled-background-color");
display: flex;
&__inner {
display: flex;
min-width: 0;
@include custom-prop-fallback("padding-block","comp-mailbox-message-inset-v");
border-bottom: var(--comp-mailbox-message-border-width) solid var(--comp-mailbox-message-border-color);
}
&__content {
min-width: 0; // needed for truncate inside flex
padding-left: calc(var(--comp-mailbox-message-container-inline) + var(--comp-mailbox-message-item-container-tailing-inline));
}
/* 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 */
// mailboxMessage__childElement
&__heading {
// follows same logic as parent
&:focus-visible {
outline: none;
@media (hover: hover) {
&::after {
z-index: z("negative");
@include custom-prop-fallback("background-color","comp-mailbox-message-pressed-background-color");
@include box-outline();
}
}
}
}
&__actions {
position: absolute;
opacity: 0;
overflow: hidden;
right: 0;
}
&:last-child {
#{$self}__inner {
border-bottom: 0 none;
}
}
/* modifiers */
// mailboxMessage -mailboxMessageHighlight
&.-mailboxMessageHighlight {
// follows same logic as base element
@include custom-prop-fallback-override("comp-mailbox-message-default-enabled-background-color","comp-mailbox-message-highlight-enabled-background-color");
}
&.-mailboxMessageChat {
#{$self}__content {
padding-left: var(--comp-mailbox-message-container-inline);
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
@include custom-prop-fallback-override("comp-mailbox-message-default-enabled-background-color","comp-mailbox-message-hovered-background-color");
#{$self}__actions {
position: static;
opacity: 1;
overflow: visible;
}
}
}
&:focus-within {
@media (hover: hover) {
#{$self}__actions {
position: static;
opacity: 1;
overflow: visible;
}
}
}
&:active {
}
&:focus,
&:active {
}
}