No notes defined.
<div class="sds-calendar">
<table class="sds-calendar__table">
<caption class="sr-only">Caption of table</caption>
<thead class="sds-calendar__head">
<tr class="sds-calendar__headRow">
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Lun</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Mar</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper -active">Mer</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Jeu</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Ven</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Sam</div>
</th>
<th class="sds-calendar__headDay">
<div class="sds-calendar__headTitle sds-textHelper ">Dim</div>
</th>
</tr>
</thead>
<tbody class="sds-calendar__body">
<tr class="sds-calendar__bodyRow">
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimeNegative">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">01</div>
</div>
<div class="sds-calendarDay__body">
<span>7:45</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">-15 min</span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -warning10 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-alert"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd -overTimeNegative">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimePositive">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">02</div>
</div>
<div class="sds-calendarDay__body">
<span>8:45</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">+45 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">03</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -alert -overTimeNegative">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">04</div>
</div>
<div class="sds-calendarDay__body">
<span>7:58</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">-02 min</span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -warning10 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-alert"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd -alert -overTimeNegative">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">05</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">06</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">07</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
</tr>
<tr class="sds-calendar__bodyRow">
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimePositive">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">08</div>
</div>
<div class="sds-calendarDay__body">
<span>9:45</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">+1:45 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimePositive">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">09</div>
</div>
<div class="sds-calendarDay__body">
<span>8:12</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">+12 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -alert">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">10</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -warning10 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-alert"></span>
</span>
<span class="sds-iconCircle -secondary10 -smaller sds-calendarDay__iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-house"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd -alert">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimeNegative">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">11</div>
</div>
<div class="sds-calendarDay__body">
<span>7:58</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">-02 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm ">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">12</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -secondary10 -smaller sds-calendarDay__iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-house"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd ">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">13</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">14</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
</tr>
<tr class="sds-calendar__bodyRow">
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">15</div>
</div>
<div class="sds-calendarDay__body">
<span class="sds-textHelper">Lundi de pâques</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimePositive">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">16</div>
</div>
<div class="sds-calendarDay__body">
<span>8:05</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">+05 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">17</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -alert -overTimeNegative">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">18</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -warning10 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-alert"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd -alert -overTimeNegative">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">19</div>
</div>
<div class="sds-calendarDay__body">
<span>8:00</span>
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">20</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">21</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
</tr>
<tr class="sds-calendar__bodyRow">
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -alert -overTimeNegative">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">22</div>
</div>
<div class="sds-calendarDay__body">
<span>7:45</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">-15 min</span>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -warning10 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-alert"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
<div class="sds-calendarDay__alert sds-stackMd -alert -overTimeNegative">
<div class="sds-stackSm">
<h5 class="h5">Erreur d’entrée (16h12)</h5>
<p class="sds-textHelper">Entrée sans accès info. Bâtiment Rousegaertchen.</p>
</div>
<div class="sds-stackSm">
<h5 class="h5">Pénalité</h5>
<p class="sds-textHelper">Pause obligatoire de 30 minutes à midi.</p>
</div>
</div>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -overTimePositive">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">23</div>
</div>
<div class="sds-calendarDay__body">
<span>8:01</span>
<span class="sds-calendarDay__helper sds-textHelperSmall">+01 min</span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -currentDay">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">24</div>
</div>
<div class="sds-calendarDay__body">
<span>6:12</span>
<div class="sds-progress progress -small sds-calendarDay__progress">
<div class="progress-bar sds-progress__bar -black" style="width: 70%" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -holiday -halfDay">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">25</div>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -secondary10 -smaller sds-calendarDay__iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-vacation"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -holiday">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">26</div>
</div>
<div class="sds-calendarDay__footer">
<div class="d-flex sds-staticGapXs">
<span class="sds-iconCircle -secondary10 -smaller sds-calendarDay__iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-vacation"></span>
</span>
</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">27</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm -dayOff">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">28</div>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
</tr>
<tr class="sds-calendar__bodyRow">
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">29</div>
</div>
<div class="sds-calendarDay__body">
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
<td class="sds-calendar__bodyDay">
<div class="sds-calendarDay sds-stackSm">
<div class="sds-calendarDay__header">
<div class="sds-calendarDay__title h5">30</div>
</div>
<div class="sds-calendarDay__body">
<span class="sds-textHelper"></span>
</div>
<button class="stretched-link" data-toggle="modal" data-target="#calendarModal"></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="{{ namespace }}calendar{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<table class="{{ namespace }}calendar__table">
<caption class="sr-only">{{ caption }}</caption>
<thead class="{{ namespace }}calendar__head">
<tr class="{{ namespace }}calendar__headRow">
{% for key, item in headerItems %}
<th class="{{ namespace }}calendar__headDay">
<div class="{{ namespace }}calendar__headTitle {{ namespace }}textHelper {% if item.active %}-active{% endif %}">{{ item.title }}</div>
</th>
{% endfor %}
</tr>
</thead>
<tbody class="{{ namespace }}calendar__body">
{% for key, item in rows %}
<tr class="{{ namespace }}calendar__bodyRow">
{% for cellKey, cellItem in item %}
<td class="{{ namespace }}calendar__bodyDay">
{% render '@msp-calendar-day' + cellItem.status,{
numberDate: cellItem.numberDate,
time: cellItem.time,
timer: cellItem.timer,
timeHelper: cellItem.timeHelper,
iconWarning: cellItem.iconWarning,
iconSecondary: cellItem.iconSecondary,
icon: cellItem.icon,
text: cellItem.text,
helperModifiers: cellItem.helperModifiers,
alert: cellItem.alert,
modifiers: cellItem.modifiers
}, true %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
.#{$namespace}calendar {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* variables specific to current element */
$element-specific-variables: "";
/* properties of current element + media queries */
margin-left: -(map-deep-get($token-spacer-unit-map, "8"));
margin-right: -(map-deep-get($token-spacer-unit-map, "8"));
/* 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 */
// calendar__table
&__table {
table-layout: fixed;
width: 100%;
border-spacing: map-deep-get($token-spacer-unit-map, "8");
border-collapse: separate;
}
// calendar__headTitle
&__headTitle {
text-align: right;
color: map-deep-get($token-color-brand-map, "secondary", "100");
&.-active {
color: map-deep-get($token-color-brand-map, "primary", "100");
}
}
&__headRow,
&__bodyRow {
@include spacer-component-inline(sm);
}
&__headDay {
padding-right: map-deep-get($token-spacer-unit-map, "8");
}
/* modifiers */
// calendar -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}