No notes defined.
<!-- Default -->
<div class="sds-chatMessage sds-box -boxInsetLg -boxSunken">
<div class="sds-staticStackMd">
<div class="sds-headingColor sds-chatMessage__wysiwyg sds-wysiwyg">
<p>Combien de jours de télétravail puis-je faire si je travaille 3 jours par semaine ?</p>
</div>
</div>
</div>
<!-- Chatbot -->
<div class="sds-chatMessage sds-box -boxInsetLg -boxBordered -chatMessageChatBot">
<div class="sds-staticStackMd">
<div class="sds-headingColor sds-chatMessage__wysiwyg sds-wysiwyg">
<p>Nulla facilisi. Cras <a href='#'>consequat</a>, turpis non lobortis semper, tortor leo blandit odio, in cursus sem ligula non purus. Fusce scelerisque malesuada auctor. Vestibulum suscipit faucibus egestas. </p>
<p>Nulla facilisi. Cras <a href='#'>consequat</a>, turpis non lobortis semper, tortor leo blandit odio, in cursus sem ligula non purus. Fusce scelerisque malesuada auctor. Vestibulum suscipit faucibus egestas. </p>
</div>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">
Contacter RH
</span>
</button>
<div class="sds-staticStackSm">
<div>
<a href="#" class="sds-link">
{link}
<span class="sds-link__icon sds-icon sds-icon-documenttext"></span>
</a>
</div>
<div>
<a href="#" class="sds-link">
{link}
<span class="sds-link__icon sds-icon sds-icon-documenttext"></span>
</a>
</div>
</div>
<div class="sds-staticGapXs d-flex align-items-center">
<span style="color: var(--comp-hint-highlight-text-color)" class="sds-icon -iconSm sds-icon-badgevalid"></span>
<p class="sds-hint sds-textHelperSmall">
Réponse vérifiée
</p>
</div>
</div>
<div class="sds-chatMessage__ratingGroup">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -isActive sds-chatMessage__ratingBtn">
<span aria-hidden="true" class="sds-icon sds-icon-like"></span>
<div class="sr-only">Ce contenu m'est utile</div>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-chatMessage__ratingBtn">
<span aria-hidden="true" class="sds-icon sds-icon-dislike"></span>
<div class="sr-only">Ce contenu ne m'est pas utile</div>
</button>
</li>
</ul>
</div>
</div>
<!-- Chatbot Loading -->
<div class="sds-chatMessage sds-box -boxInsetLg -boxBordered -chatMessageChatBot -chatMessageLoading" aria-busy="true">
<div class="sds-chatMessage__loader">
<span class="sds-dot -dotPrimary">
</span>
<span class="sds-dot -dotPrimary">
</span>
<span class="sds-dot -dotPrimary">
</span>
</div>
</div>
<!-- Chatbot Suggestion -->
<div class="sds-chatMessage sds-box -boxInsetLg -boxSunken -chatMessageChatBot -chatMessageSuggestion" aria-busy="true">
<div class="sds-chatMessage__loader">
<span class="sds-dot -dotPrimary">
</span>
<span class="sds-dot -dotPrimary">
</span>
<span class="sds-dot -dotPrimary">
</span>
</div>
</div>
<div class="{{ namespace }}chatMessage {{ namespace }}box -boxInsetLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if loading %} aria-busy="true"{% endif %}>
{% if loading %}
<div class="{{ namespace }}chatMessage__loader">
{% render "@dot--primary" %}
{% render "@dot--primary" %}
{% render "@dot--primary" %}
</div>
{% else %}
<div class="{{ namespace }}staticStackMd">
<div class="{{ namespace }}headingColor {{ namespace }}chatMessage__wysiwyg {{ namespace }}wysiwyg">
<p>{{ text | safe }}</p>
{% if secondP %}
<p>{{ text | safe }}</p>
{% endif %}
</div>
{% if primaryAction %}
{% render "@btn-primary",{
text: "Contacter RH"
},true %}
{% endif %}
{% if links %}
<div class="{{ namespace }}staticStackSm">
<div>
{% render "@link--icon",{
iconInlineStart: false,
iconInlineEnd: "icon-documenttext"
},true %}
</div>
<div>
{% render "@link--icon", {
iconInlineStart: false,
iconInlineEnd: "icon-documenttext"
},true %}
</div>
</div>
{% endif %}
{% if hint %}
<div class="{{ namespace }}staticGapXs d-flex align-items-center">
<span style="color: var(--comp-hint-highlight-text-color)" class="{{ namespace }}icon -iconSm {{ namespace }}icon-badgevalid"></span>
{% render "@hint",{
text: "Réponse vérifiée"
},true %}
</div>
{% endif %}
</div>
{% if rate %}
<div class="{{ namespace }}chatMessage__ratingGroup">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary-inverse",{
icon: "icon-like",
action: "Ce contenu m'est utile",
classes: ["-isActive", namespace+"chatMessage__ratingBtn"]
},true %}
</li>
<li>
{% render "@icon-btn-secondary-inverse",{
icon: "icon-dislike",
action: "Ce contenu ne m'est pas utile",
classes: [namespace+"chatMessage__ratingBtn"]
},true %}
</li>
</ul>
</div>
{% endif %}
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}chatMessage {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
--chat-tick-rotation: 1;
--chat-tick-translate: calc(-50% + 1px);
position: relative;
max-width: 100%;
min-width: var(--comp-chat-message-min-width);
min-height: 60px;
display: inline-block !important;
transition: width 0.15s linear;
&:has(#{$self}__ratingGroup) {
padding-bottom: calc(var(--comp-box-large-inset-v)*2) !important;
@include custom-prop-fallback("margin-bottom","comp-chat-message-stack","true","false","true");
}
/* Pseudo Elements */
&::before {
content: "";
background-color: inherit;
position: absolute;
top: var(--comp-box-large-inset-v);
left: 100%;
border-width: inherit;
border-color: inherit;
border-style: inherit;
width: var(--comp-chat-message-container-tick-inset-v-t);
height: var(--comp-chat-message-container-tick-inset-v-t);
transform: translate(var(--chat-tick-translate), calc(var(--comp-chat-message-tick-border-width)*2)) rotate(calc(45deg * var(--chat-tick-rotation)));
border-bottom: none;
border-right: none;
border-top-left-radius: var(--comp-chat-message-tick-border-radius);
}
&::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 {
@keyframes jumpingDots {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
}
/* children - write selector in full in comments in order to facilitate search */
// chatMessage__childElement
&__loader {
// follows same logic as parent
> * {
animation: jumpingDots 1.3s linear infinite;
&:nth-child(2) {
animation-delay: -1.1s;
}
&:nth-child(3) {
animation-delay: -0.9s;
}
}
}
&__ratingGroup {
position: absolute;
right: var(--comp-box-large-inset-v);
@include custom-prop-fallback("bottom","comp-chat-message-stack");
}
&__ratingBtn {
border: var(--comp-button-pressed-border-width) solid var(--comp-box-flat-bordered-border-color);
}
&__wysiwyg {
P + P {
@include custom-prop-fallback("margin-top","ui-space-stack-static-1500");
}
}
/* modifiers */
// chatMessage -chatMessageLoading
&.-chatMessageLoading {
// follows same logic as base element
}
&.-chatMessageChatBot {
--chat-tick-rotation: -1;
--chat-tick-translate: calc(50% - 1px);
&::before {
right: 100%;
left: auto;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}