No notes defined.
<div class="sds-searchModal sds-modal -noBg modal fade" tabindex="-1" id="searchModal" aria-hidden="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only">Recherche</div>
<div class="sds-searchModal__close sds-pointerEventsNone">
<div class="d-flex justify-content-end w-100">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-pointerEventsAuto" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></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-search -clearActive">
<div class="sds-search__inner form-control">
<span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
<input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
<div class="sds-search__actions">
<div class="sds-search__clear">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-languageSwitcher dropdown -searchModal -filtersActive">
<button type="button" class="sds-btn -btnSecondary" data-search-modal-search-filter-btn="" data-toggle="dropdown" data-display="static" aria-expanded="false">
<span class="sds-btn__text">Refine search</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
02
</div>
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
<div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="sds-stackMd">
<div class="row row-xs col-separator">
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Langue</span>
</legend>
<ul class="list-unstyled">
<li lang="fr">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr" checked><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
<span>Français</span>
</label>
</li>
<li lang="de">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
<span>Deutsch</span>
</label>
</li>
<li lang="en">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
<span>English</span>
</label>
</li>
</ul>
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Par type</span>
</legend>
<ul class="list-unstyled">
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-1"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-1">Tous</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-2"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-2">Page</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Article Blog</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Info</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Guide</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Document</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Agence</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Événement</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Partenaire</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
</ul>
</fieldset>
</div>
</div>
<button type="button" class="sds-btn -btnSecondary -block">
<span class="sds-btn__text">Appliquer</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="sds-searchModal__resultArea">
<div class="row">
<div class="col-12">
<div class="sds-emptyState sds-box -big">
<span class="sds-emptyState__icon sds-icon sds-icon-smileydisappointed-l"></span>
<div class="sds-stackXxs">
<p class="sds-emptyState__text sds-textSemiBold">Aucun résultat</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<div class="{{ namespace }}searchModal {{ namespace }}modal -noBg modal fade" tabindex="-1" id="{{ modalID }}" aria-hidden="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only">Recherche</div>
<div class="{{ namespace }}searchModal__close {{ namespace }}pointerEventsNone">
<div class="d-flex justify-content-end w-100">
{% 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 "@search--language-selector" %}
</div>
</div>
</div>
<div>
{% if noResults %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row">
<div class="col-12">
{% render "@snet-empty-state--no-result",{
modifiers: [namespace+"box","-big"],
icon: "icon-smileydisappointed-l",
text: "Aucun résultat"
},true %}
</div>
</div>
</div>
{% else %}
{% if noResults %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row">
<div class="col-12">
{% render "@snet-empty-state--no-result",{
modifiers: [namespace+"box","-big"],
icon: "icon-smileydisappointed-l",
text: "Aucun résultat"
},true %}
</div>
</div>
</div>
{% else %}
{% endif %}
{% if noResults %}
{% else %}
<div class="{% if loading %}d-none {% endif %}row row-xs no-bottom-gutter">
<div class="col-12">
<div class="{{ namespace }}searchModal__tags {{ namespace }}overflowScrollBarSafeArea {{ namespace }}btnGroup -hasVerticalSpacing">
{% render "@btn-secondary-inverse--small",{
text: "Pret au Logement"
},true %}
{% render "@btn-secondary-inverse--small",{
text: "Simulation Logement"
},true %}
{% render "@btn-secondary-inverse--small",{
text: "Suggestion"
},true %}
</div>
</div>
</div>
{% endif %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row row-xs align-items-stretch-immediate">
{% if loading %}{% else %}<div class="col-12"><h3 class="h3 {{ namespace }}searchModal__textColor">A la une</h3></div> {% endif %}
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item-product",{
meta: true,
iconBtn: true,
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item",{
nopic: true,
meta: true,
iconBtn: true,
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item",{
meta: true,
iconBtn: true,
document: true,
icon: "icon-download",
action: "download document"
},true %}
{% endif %}
</div>
</div>
<div class="{% if loading %}d-none {% endif %}row">
<div class="col-12 {{ namespace }}stackMd">
<h3 class="h3 {{ namespace }}searchModal__textColor">Les plus consultés</h3>
<div class="{{ namespace }}box -insetMd">
<ul class="list-unstyled {{ namespace }}staticStackSm {{ namespace }}outOfBounds">
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Préparer votre demande de prêt au logement</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Les aides au logement et la garantie de l’état</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Capacité de remboursement</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href="" download=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">
<span class="{{ namespace }}staticInlineXxs">
<span>Prêt au logement</span>
<span class="align-text-top {{ namespace }}iconSizeInherit {{ namespace }}textBody {{ namespace }}icon {{ namespace }}icon-document"></span>
</span>
</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-download"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Le prêt logement en trois étapes</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Prêt au logement : quel taux choisir?</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Demander son prêt au logement en ligne ? C’est désormais possible via S-Net</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Acheter avant d’avoir vendu</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
</ul>
</div>
</div>
</div>
{% endif %}
</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 {
}
}