No notes defined.
<div class="sds-digitalSignage d-flex flex-column">
<header class="sds-digitalSignage__header">
<div class="row align-items-center justify-content-between">
<div class="col">
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1072_101)">
<path d="M90 0H0V90H90V0Z" fill="#DE0000" />
<path d="M61.38 35.6399V22.4099L54.72 9.17993L48.06 22.4099V35.6399H51.48V23.2199L54.72 16.5599L58.05 23.2199V35.6399H61.38Z" fill="white" />
<path d="M72.09 39.8699H18.09V43.3799H72.09V39.8699Z" fill="white" />
<path d="M71.91 50.3099C66.06 50.3099 61.38 54.9899 61.38 60.8399V81.8099C60.3 80.1899 59.13 78.4799 57.87 76.9499V60.8399C57.87 53.0999 64.08 46.7999 71.91 46.7999V50.3099Z" fill="white" />
<path d="M52.11 53.8199C52.11 49.9499 48.96 46.7999 45 46.7999C41.04 46.7999 37.98 49.9499 37.98 53.8199V61.1999C39.15 61.6499 40.32 62.1899 41.49 62.8199V53.8199C41.49 51.9299 43.02 50.3099 45 50.3099C46.89 50.3099 48.51 51.8399 48.51 53.8199V67.0499L52.02 69.7499L52.11 53.8199Z" fill="white" />
<path d="M25.02 46.7999C28.98 46.7999 32.13 49.9499 32.13 53.8199H32.04V59.8499C30.87 59.4899 29.7 59.1299 28.53 58.8599V53.8199C28.53 51.8399 26.91 50.3099 25.02 50.3099C23.04 50.3099 21.51 51.9299 21.51 53.8199V57.5999L18 57.3299V53.8199C18 49.9499 21.06 46.7999 25.02 46.7999Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1072_101">
<rect width="90" height="90" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="col-auto">
<div class="sds-headingColor">
08:10
</div>
</div>
</div>
</header>
<main class="sds-digitalSignage__main flex-grow-1">
<ul class="list-unstyled sds-staticStackMd">
<li>
<div class="sds-box -insetLg sds-boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-metaColor">Formation</div>
<div class="h2">Réussir une présentation efficace et impactante</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Horaire
</div>
<div class="sds-textSemiBold sds-bodyXl">
08h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Formateur(s) - organisme
</div>
<div class="sds-textSemiBold sds-bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="sds-staticStackSm">
<div class="sds-box -elevated -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Salle
</div>
<h1 class="h1">
08
</h1>
</div>
<div class="sds-badge badge -success10 d-block text-center -large">
en cours
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="sds-box -insetLg sds-boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-metaColor">Formation</div>
<div class="h2">Dashboard Design</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Horaire
</div>
<div class="sds-textSemiBold sds-bodyXl">
09h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Formateur(s) - organisme
</div>
<div class="sds-textSemiBold sds-bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="sds-staticStackSm">
<div class="sds-box -elevated -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Salle
</div>
<h1 class="h1">
05
</h1>
</div>
<div class="sds-badge badge -primary10 d-block text-center -large">
annulé
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="sds-box -insetLg sds-boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-metaColor">Réunion</div>
<div class="h2">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Horaire
</div>
<div class="sds-textSemiBold sds-bodyXl">
08h00 - 12h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Service - organisme
</div>
<div class="sds-textSemiBold sds-bodyXl">
SGE
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="sds-staticStackSm">
<div class="sds-box -elevated -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Salle
</div>
<h1 class="h1">
05
</h1>
</div>
<div class="sds-badge badge -warning10 d-block text-center -large">
dans 1h et 20min
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="sds-box -insetLg sds-boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-metaColor">Formation</div>
<div class="h2">Organisation Process & Project Governance</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Horaire
</div>
<div class="sds-textSemiBold sds-bodyXl">
08h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="stackXxs">
<div class="sds-label">
Formateur(s) - organisme
</div>
<div class="sds-textSemiBold sds-bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="sds-staticStackSm">
<div class="sds-box -elevated -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Salle
</div>
<h1 class="h1">
05
</h1>
</div>
<div class="sds-badge badge -info10 d-block text-center -large">
dans 1h et 20min
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</main>
<footer class="sds-digitalSignage__footer position-sticky sds-headingColor">
<div class="row align-items-center justify-content-between">
<div class="col">
SPUERKEESS.LU
</div>
<div class="col-auto">
<div>
<span class="sds-textSemiBold">1</span>
<span>/</span>
<span>2</span>
</div>
</div>
</div>
</footer>
</div>
<div class="{{ namespace }}digitalSignage d-flex flex-column">
<header class="{{ namespace }}digitalSignage__header">
<div class="row align-items-center justify-content-between">
<div class="col">
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1072_101)">
<path d="M90 0H0V90H90V0Z" fill="#DE0000"/>
<path d="M61.38 35.6399V22.4099L54.72 9.17993L48.06 22.4099V35.6399H51.48V23.2199L54.72 16.5599L58.05 23.2199V35.6399H61.38Z" fill="white"/>
<path d="M72.09 39.8699H18.09V43.3799H72.09V39.8699Z" fill="white"/>
<path d="M71.91 50.3099C66.06 50.3099 61.38 54.9899 61.38 60.8399V81.8099C60.3 80.1899 59.13 78.4799 57.87 76.9499V60.8399C57.87 53.0999 64.08 46.7999 71.91 46.7999V50.3099Z" fill="white"/>
<path d="M52.11 53.8199C52.11 49.9499 48.96 46.7999 45 46.7999C41.04 46.7999 37.98 49.9499 37.98 53.8199V61.1999C39.15 61.6499 40.32 62.1899 41.49 62.8199V53.8199C41.49 51.9299 43.02 50.3099 45 50.3099C46.89 50.3099 48.51 51.8399 48.51 53.8199V67.0499L52.02 69.7499L52.11 53.8199Z" fill="white"/>
<path d="M25.02 46.7999C28.98 46.7999 32.13 49.9499 32.13 53.8199H32.04V59.8499C30.87 59.4899 29.7 59.1299 28.53 58.8599V53.8199C28.53 51.8399 26.91 50.3099 25.02 50.3099C23.04 50.3099 21.51 51.9299 21.51 53.8199V57.5999L18 57.3299V53.8199C18 49.9499 21.06 46.7999 25.02 46.7999Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1072_101">
<rect width="90" height="90" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="col-auto">
<div class="{{ namespace }}headingColor">
08:10
</div>
</div>
</div>
</header>
<main class="{{ namespace }}digitalSignage__main flex-grow-1">
<ul class="list-unstyled {{ namespace }}staticStackMd">
<li>
<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div class="{{ namespace }}metaColor">Formation</div>
<div class="h2">Réussir une présentation efficace et impactante</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Horaire"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
08h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Formateur(s) - organisme"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="{{ namespace }}staticStackSm">
<div class="{{ namespace }}box -elevated -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Salle
</div>
{% render "@heading--h1",{
text: "08"
},true %}
</div>
{% render "@badge--success-10",{
text: "en cours",
classes: ["d-block", "text-center", "-large"]
},true %}
</div>
</div>
</div>
</div>
</li>
<li>
<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div class="{{ namespace }}metaColor">Formation</div>
<div class="h2">Dashboard Design</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Horaire"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
09h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Formateur(s) - organisme"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="{{ namespace }}staticStackSm">
<div class="{{ namespace }}box -elevated -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Salle
</div>
{% render "@heading--h1",{
text: "05"
},true %}
</div>
{% render "@badge--primary-10",{
text: "annulé",
classes: ["d-block", "text-center", "-large"]
},true %}
</div>
</div>
</div>
</div>
</li>
<li>
<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div class="{{ namespace }}metaColor">Réunion</div>
<div class="h2">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Horaire"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
08h00 - 12h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Service - organisme"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
SGE
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="{{ namespace }}staticStackSm">
<div class="{{ namespace }}box -elevated -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Salle
</div>
{% render "@heading--h1",{
text: "05"
},true %}
</div>
{% render "@badge--warning-10",{
text: "dans 1h et 20min",
classes: ["d-block", "text-center", "-large"]
},true %}
</div>
</div>
</div>
</div>
</li>
<li>
<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowInteraction">
<div class="row">
<div class="col-12 col-md-8">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div class="{{ namespace }}metaColor">Formation</div>
<div class="h2">Organisation Process & Project Governance</div>
</div>
<div class="row row-double-gutter col-separator">
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Horaire"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
08h00 - 12h00 · 12h30 - 18h00
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="{{ naemspace }}stackXxs">
{% render "@label--div",{
text: "Formateur(s) - organisme"
},true %}
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Orsys
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="{{ namespace }}staticStackSm">
<div class="{{ namespace }}box -elevated -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
Salle
</div>
{% render "@heading--h1",{
text: "05"
},true %}
</div>
{% render "@badge--info-10",{
text: "dans 1h et 20min",
classes: ["d-block", "text-center", "-large"]
},true %}
</div>
</div>
</div>
</div>
</li>
</ul>
</main>
<footer class="{{ namespace }}digitalSignage__footer position-sticky {{ namespace }}headingColor">
<div class="row align-items-center justify-content-between">
<div class="col">
SPUERKEESS.LU
</div>
<div class="col-auto">
<div>
<span class="{{ namespace }}textSemiBold">1</span>
<span>/</span>
<span>2</span>
</div>
</div>
</div>
</footer>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}digitalSignage {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
min-height: 100%;
/* 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 {
@include custom-prop-fallback("font-size", "comp-digital-signage-header-font-size");
@include custom-prop-fallback("padding-top", "comp-digital-signage-header-inset-v");
@include custom-prop-fallback("padding-bottom", "comp-digital-signage-header-inset-v");
@include custom-prop-fallback("padding-left", "comp-digital-signage-header-inset-h");
@include custom-prop-fallback("padding-right", "comp-digital-signage-header-inset-h");
}
&__main {
@include custom-prop-fallback("padding-left","comp-digital-signage-body-inset-h");
@include custom-prop-fallback("padding-right","comp-digital-signage-body-inset-h");
margin-bottom: map-get($token-spacer-stack-max-map, "xl");
}
// digitalSignage__childElement
&__footer {
// follows same logic as parent
bottom: 0;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
@include custom-prop-fallback("font-size", "comp-digital-signage-footer-font-size");
@include custom-prop-fallback("padding-top", "comp-digital-signage-footer-inset-v");
@include custom-prop-fallback("padding-bottom", "comp-digital-signage-footer-inset-v");
@include custom-prop-fallback("padding-left", "comp-digital-signage-footer-inset-h");
@include custom-prop-fallback("padding-right", "comp-digital-signage-footer-inset-h");
}
/* modifiers */
// digitalSignage -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}