No notes defined.
<div class="sds-searchModal sds-modal -noBg modal fade" tabindex="-1" id="searchModal" role="dialog" aria-labelledby="modalSearchTitle" aria-modal="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only" id="modalSearchTitle">Recherche</div>
<div class="sds-searchModal__close sds-pointerEventsNone">
<div class="d-flex justify-content-end w-100" data-scope-wrapper="section" data-scope="inverted" data-scope-no-surface>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-pointerEventsAuto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="sds-icon sds-icon-close"></span>
<span class="sr-only">Action text</span>
</button>
</div>
</div>
<div class="sds-modal__dialog modal-dialog modal-w-auto">
<div class="sds-modal__content modal-content bg-transparent">
<!-- content start -->
<div class="row row-xs justify-content-center">
<div class="col-xl-10 col-xxl-8">
<div class="row row-xs align-items-baseline justify-content-between">
<div class="col">
<div class="sds-searchModal__header">
<div class="sds-chatbot -chatbotHasValue" data-js-chatbot>
<label class="sr-only" for="chatbot-question">Posez votre question</label>
<div class="sds-chatbot__bar">
<input id="chatbot-question" class="sds-chatbot__input form-control" data-chatbot-input type="text" name="question" value="Est-ce que ma fille de 12 ans peut ouvrir un compte à la Spuerkeess ?" placeholder="Posez-moi votre question" autocomplete="off" />
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-chatbot__clear" data-chatbot-clear="true">
<span aria-hidden="true" class="sds-icon sds-icon-cross"></span>
<span class="sr-only">Effacer la question</span>
</button>
<button type="button" class="sds-btn -btnPrimary sds-chatbot__submit" data-chatbot-submit="true">
<span class="sds-btn__text">
Envoyer
</span>
</button>
<div class="sds-circularProgress -circularProgressTokenUsage sds-chatbot__tokenUsage" role="meter" aria-label="Utilisation des crédits IA" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-valuetext="80 % des crédits IA utilisés">
<svg class="sds-circularProgress__svg" viewBox="0 0 20 20" aria-hidden="true" focusable="false">
<circle class="sds-circularProgress__bgShape" cx="10" cy="10" r="9" fill="none" />
<circle class="sds-circularProgress__shape" cx="10" cy="10" r="9" fill="none" stroke-dasharray="45.2389336 56.548667" transform="rotate(-90 10 10)" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="sds-searchModal__resultArea" lang="en">
<div class="sds-box -boxInsetLg">
<p>Les réponses fournies par cet outil sont générées sur base des informations disponibles sur le site web. Les réponses verbales sont produites à l’aide de modèles de langage tiers. Spuerkeess ne peut être tenue responsable de la formulation exacte des réponses générées.
<a href="#" class="sds-link">
Plus d'infos
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<div class="{{ namespace }}searchModal {{ namespace }}modal -noBg modal fade" tabindex="-1" id="{{ modalID }}" role="dialog" aria-labelledby="modalSearchTitle" aria-modal="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only" id="modalSearchTitle">Recherche</div>
<div class="{{ namespace }}searchModal__close {{ namespace }}pointerEventsNone">
<div class="d-flex justify-content-end w-100" data-scope-wrapper="section" data-scope="inverted" data-scope-no-surface>
{% render "@icon-btn-secondary-inverse", {
icon: "icon-close",
classes: [namespace + "pointerEventsAuto"],
attrs: {
"data-dismiss": "modal",
"aria-label": "Close"
}
},true %}
</div>
</div>
<div class="{{ namespace }}modal__dialog modal-dialog modal-w-auto{% for mod in dialogModifiers %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}modal__content modal-content bg-transparent">
<!-- content start -->
<div class="row row-xs justify-content-center">
<div class="col-xl-10 col-xxl-8">
<div class="row row-xs align-items-baseline justify-content-between">
<div class="col">
<div class="{{ namespace }}searchModal__header">
{% render "@chatbot--typing" %}
</div>
</div>
</div>
<div>
<div class="{{ namespace }}searchModal__resultArea" lang="en">
<div class="{{ namespace }}box -boxInsetLg">
<p>Les réponses fournies par cet outil sont générées sur base des informations disponibles sur le site web. Les réponses verbales sont produites à l’aide de modèles de langage tiers. Spuerkeess ne peut être tenue responsable de la formulation exacte des réponses générées.
{% render "@link",{
text: "Plus d'infos"
},true %}</p>
</div>
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}searchModal {
/* Save root element context for easy access if nesting is needed */
$self: &;
--search-modal-card-loading-height: 104px;
/* properties of current element + media queries */
//@include modal-background();
@include media-breakpoint-up("lg") {
--search-modal-card-loading-height: 333px;
}
/* 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 */
// searchModal__close
&__close {
// follows same logic as parent
position: sticky;
z-index: z("sticky");
top: 0;
padding-right: $modal-inner-padding-mobile;
margin-bottom: -($search-input-height-large + $modal-inner-padding-mobile);
height: $search-input-height-large;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
@include media-breakpoint-up("md") {
padding-right: $modal-inner-padding-mobile * 2;
}
@include media-breakpoint-up("xl") {
padding-right: 0;
}
}
&__header {
padding-top: $modal-inner-padding-mobile;
padding-right: $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "sm");
position: relative;
z-index: z("medium");
@include media-breakpoint-up("xl") {
padding-right: 0;
}
}
&__tags {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
padding-bottom: map-deep-get($token-spacer-inset-map, "md");
margin-bottom: -(map-deep-get($token-spacer-inset-map, "lg")) !important;
padding-left: $content-section-inset-inline-sm;
margin-left: -($content-section-inset-inline-sm);
margin-right: -($content-section-inset-inline-sm);
white-space: nowrap;
overflow-x: auto;
@include media-breakpoint-up("sm") {
padding-left: $modal-inner-padding + $content-section-inset-inline-sm;
margin-left: -($modal-inner-padding + $content-section-inset-inline-sm);
margin-right: -($modal-inner-padding + $content-section-inset-inline-sm);
}
@include media-breakpoint-up("md") {
overflow-x: visible;
flex-wrap: wrap;
padding-bottom: 0;
margin-bottom: 0 !important;
padding-left:0;
margin-left: 0;
margin-right: 0;
}
}
&__textColor {
@include custom-prop-fallback("color","sys-color-text-neutral-inverse");
}
&__resultArea {
margin-top: map-deep-get($token-spacer-stack-min-map, "xl");
@include media-breakpoint-up("lg") {
margin-top: map-deep-get($token-spacer-stack-max-map, "xl");
}
}
/* modifiers */
// searchModal -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}