Time Overview

No notes defined.

<div class="sds-box -insetMd">
    <div class="row align-items-center no-bottom-gutter">
        <div class="col-auto">
            <div class="sds-timeRecap sds-stackSm">
                <div class="sds-timeRecap__title sds-textHelper">Employé modèle</div>
                <div class="sds-timeRecap__time sds-textBodyXl">124:00 </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="sds-timeRecap sds-stackSm -secondary100">
                <div class="sds-timeRecap__title sds-textHelper">Total presté</div>
                <div class="sds-timeRecap__time sds-textBodyXl">128:12 </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="sds-timeRecap sds-stackSm -success100">
                <div class="sds-timeRecap__title sds-textHelper">Avance/Retard</div>
                <div class="sds-timeRecap__time sds-textBodyXl">+4:12 </div>
            </div>
        </div>
        <div class="col d-flex justify-content-end">
            <div class="sds-calendarControls">
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

                    <span class="sds-icon sds-icon-chevronleft"></span>

                </button>
                <div class="sds-calendarControls__label sds-textHelper sds-textSemiBold">Novembre 2021</div>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

                    <span class="sds-icon sds-icon-chevronright"></span>

                </button>
            </div>
        </div>
    </div>
</div>
 
<div class="{{ namespace }}box -insetMd{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="row align-items-center no-bottom-gutter">
		<div class="col-auto">
			{% render '@msp-time-recap' %}
		</div>
		<div class="col-auto">
			{% render '@msp-time-recap--secondary-100',{
				title: "Total presté",
				time: "128:12"
			}, true %}
		</div>
		<div class="col-auto">
			{% render '@msp-time-recap--success-100',{
				title: "Avance/Retard",
				time: "+4:12"
			}, true %}
		</div>
		<div class="col d-flex justify-content-end">
			{% render "@msp-calendar-controls" %}
		</div>
	</div>
</div>