Opening Hours

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>
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/spk-opening-hours/_opening-hours.scss
  • Filesystem Path: components/spuerkeess-site/organisms/opening-hours/_opening-hours.scss
  • Size: 1.5 KB