No notes defined.
<!-- Default -->
<div class="sds-openingHours sds-box -insetLg">
<div class="sds-stackXl">
<div class="sds-openingHours__header">
<div class="sds-stackXs d-flex align-items-md-center flex-column flex-md-row justify-content-between">
<div class="h3">Spuerkeess Direct</div>
<div class="position-relative d-flex align-items-center sds-staticInlineMd">
<span class="sds-dot -dotSuccess"></span>
<span class="sds-headingColor sds-textBodyLg sds-textSemiBold">07:00 - 19:00</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-openingHours__collapseTrigger stretched-link" data-toggle="collapse" data-target="#openingHoursCollapse">
<span class="sds-icon sds-icon-chevrondown"></span>
<div class="sr-only">Montrer horaires</div>
</button>
</div>
</div>
<p class="sds-textBodyLg">Effectuez vos principales opérations bancaires via Spuerkeess Direct de
8h00 à 18h00 du lundi au vendredi.</p>
</div>
<div class="sds-openingHours__list sds-textBodyLg">
<div class="sds-collapse collapse fade" id="openingHoursCollapse">
<div class="sds-collapse__insetTopXl">
<dl class="list-unstyled">
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Lundi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mardi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mercredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Jeudi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="sds-textSemiBold d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Vendredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Samedi</dt>
<dd>fermé</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Dimanche</dt>
<dd>fermé</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row row-xs">
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">Téléphone</h4>
<p class="sds-iconLinkBox__description">(+352) 4015-1</p>
</div>
</a>
</div>
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">E-Mail</h4>
<p class="sds-iconLinkBox__description">sdi@spuerkeess.lu</p>
</div>
</a>
</div>
</div>
<div class="sds-staticStackSm">
<div class="sds-label">
Langues
</div>
<ul class="sds-btnGroup list-unstyled">
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Lëtzebuergesch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/lu.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Français">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Deutsch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="English">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Elevated -->
<div class="sds-openingHours sds-box -insetLg -elevated">
<div class="sds-stackXl">
<div class="sds-openingHours__header">
<div class="sds-stackXs d-flex align-items-md-center flex-column flex-md-row justify-content-between">
<div class="h3">Spuerkeess Direct</div>
<div class="position-relative d-flex align-items-center sds-staticInlineMd">
<span class="sds-dot -dotSuccess"></span>
<span class="sds-headingColor sds-textBodyLg sds-textSemiBold">07:00 - 19:00</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-openingHours__collapseTrigger stretched-link" data-toggle="collapse" data-target="#openingHoursCollapse">
<span class="sds-icon sds-icon-chevrondown"></span>
<div class="sr-only">Montrer horaires</div>
</button>
</div>
</div>
<p class="sds-textBodyLg">Effectuez vos principales opérations bancaires via Spuerkeess Direct de
8h00 à 18h00 du lundi au vendredi.</p>
</div>
<div class="sds-openingHours__list sds-textBodyLg">
<div class="sds-collapse collapse fade" id="openingHoursCollapse">
<div class="sds-collapse__insetTopXl">
<dl class="list-unstyled">
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Lundi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mardi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mercredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Jeudi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="sds-textSemiBold d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Vendredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Samedi</dt>
<dd>fermé</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Dimanche</dt>
<dd>fermé</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row row-xs">
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">Téléphone</h4>
<p class="sds-iconLinkBox__description">(+352) 4015-1</p>
</div>
</a>
</div>
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">E-Mail</h4>
<p class="sds-iconLinkBox__description">sdi@spuerkeess.lu</p>
</div>
</a>
</div>
</div>
<div class="sds-staticStackSm">
<div class="sds-label">
Langues
</div>
<ul class="sds-btnGroup list-unstyled">
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Lëtzebuergesch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/lu.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Français">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Deutsch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="English">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="{{ namespace }}openingHours {{ namespace }}box -insetLg{% if elevated %} -elevated{% endif %}{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}openingHours__header">
<div class="{{ namespace }}stackXs d-flex align-items-md-center flex-column flex-md-row justify-content-between">
<div class="h3">Spuerkeess Direct</div>
<div class="position-relative d-flex align-items-center {{ namespace }}staticInlineMd">
{% render "@snet-dot--success" %}
<span class="{{ namespace }}headingColor {{ namespace }}textBodyLg {{ namespace }}textSemiBold">07:00 - 19:00</span>
{% if elevated %}
{% render "@icon-btn-secondary-inverse",{
icon: "icon-chevrondown",
classes: [namespace + "openingHours__collapseTrigger","stretched-link"],
attrs: {
"data-toggle": "collapse",
"data-target": "#openingHoursCollapse"
},
action: "Montrer horaires"
},true %}
{% else %}
{% render "@icon-btn-secondary",{
icon: "icon-chevrondown",
classes: [namespace + "openingHours__collapseTrigger","stretched-link"],
attrs: {
"data-toggle": "collapse",
"data-target": "#openingHoursCollapse"
},
action: "Montrer horaires"
},true %}
{% endif %}
</div>
</div>
<p class="{{ namespace }}textBodyLg">Effectuez vos principales opérations bancaires via Spuerkeess Direct de
8h00 à 18h00 du lundi au vendredi.</p>
</div>
<div class="{{ namespace }}openingHours__list {{ namespace }}textBodyLg">
<div class="{{ namespace }}collapse collapse fade" id="openingHoursCollapse">
<div class="{{ namespace }}collapse__insetTopXl">
<dl class="list-unstyled">
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Lundi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Mardi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Mercredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Jeudi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="{{ namespace }}textSemiBold d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Vendredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Samedi</dt>
<dd>fermé</dd>
</div>
<div class="d-flex align-items-center justify-content-between {{ namespace }}staticInlineMd">
<dt class="font-weight-normal">Dimanche</dt>
<dd>fermé</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row row-xs">
<div class="col-12 col-md-6">
{% render "@spk-icon-link-box",{
icon: "location",
title: "Téléphone",
description: "(+352) 4015-1",
badge: false
},true %}
</div>
<div class="col-12 col-md-6">
{% render "@spk-icon-link-box",{
icon: "calendar",
title: "E-Mail",
description: "sdi@spuerkeess.lu",
badge: false
},true %}
</div>
</div>
<div class="{{ namespace }}staticStackSm">
{% render "@label--div",{
text: "Langues"
},true %}
<ul class="{{ namespace }}btnGroup list-unstyled">
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/lu.png",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"title": "Lëtzebuergesch"
}
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/fr.png",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"title": "Français"
}
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/de.png",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"title": "Deutsch"
}
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/uk.png",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"title": "English"
}
},true %}
</li>
</ul>
</div>
</div>
</div>
/* variables specific to current element */
$opening-hours-list-right-offset: $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "md");
.#{$namespace}openingHours {
/* 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 */
&__header {
display: flex;
flex-direction: column;
gap: map-deep-get($token-spacer-stack-min-map, "md");
@include media-breakpoint-up("md") {
gap: map-deep-get($token-spacer-stack-max-map, "xs");
}
}
// openingHours__childElement
&__collapseTrigger {
// follows same logic as parent
margin-left: auto;
&[aria-expanded="true"] {
[class*="icon"] {
transform: rotate(180deg);
}
}
}
&__list {
margin-top: 0 !important;
@include media-breakpoint-up("md"){
padding-right: $opening-hours-list-right-offset;
}
}
/* modifiers */
// openingHours -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}