Schedule Overview

No notes defined.

<!-- Default -->
<div class="sds-scheduleOverview sds-stackMd sds-box -insetLg ">
    <div class="sds-scheduleOverview__header d-flex align-items-center justify-content-between">
        <h3 class="h3">Horaire Mobile</h3>
        <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 class="sds-scheduleOverview__body d-flex justify-content-between">

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="07:38"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mar</div>
                <div>01.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 80%;" data-toggle="tooltip" data-placement="top" title="06:38"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mer</div>
                <div>02.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -anomaly">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 15%;" data-toggle="tooltip" data-placement="top" title="01:32"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Jeu</div>
                <div>03.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 85%;" data-toggle="tooltip" data-placement="top" title="06:47"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Ven</div>
                <div>04.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Sam</div>
                <div>05.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Dim</div>
                <div>06.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -anomaly">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="10:47"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Lun</div>
                <div>07.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="10:47"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mar</div>
                <div>08.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -overtime">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 100%;" data-toggle="tooltip" data-placement="top" title="08:30"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mer</div>
                <div>09.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -overtime">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 100%;" data-toggle="tooltip" data-placement="top" title="08:30"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Jeu</div>
                <div>10.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -shorttime">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 70%;" data-toggle="tooltip" data-placement="top" title="04:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Ven</div>
                <div>11.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Sam</div>
                <div>12.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Dim</div>
                <div>13.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -shorttime">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 65%;" data-toggle="tooltip" data-placement="top" title="04:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Lun</div>
                <div>14.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="07:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mar</div>
                <div>15.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 85%;" data-toggle="tooltip" data-placement="top" title="07:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mer</div>
                <div>16.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -shorttime">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 75%;" data-toggle="tooltip" data-placement="top" title="06:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Jeu</div>
                <div>17.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="07:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Ven</div>
                <div>18.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Sam</div>
                <div>19.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Dim</div>
                <div>20.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="06:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Lun</div>
                <div>21.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;" data-toggle="tooltip" data-placement="top" title="06:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mar</div>
                <div>22.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -anomaly">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 80%;" data-toggle="tooltip" data-placement="top" title="06:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>MEr</div>
                <div>23.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 80%;" data-toggle="tooltip" data-placement="top" title="06:00"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Jeu</div>
                <div>24.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Ven</div>
                <div>25.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Sam</div>
                <div>26.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Dim</div>
                <div>27.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Lun</div>
                <div>28.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mar</div>
                <div>29.04</div>
            </div>
        </div>

        <div class="sds-dayOverview sds-stackLg -dayOff">
            <div class="sds-dayOverview__contentProgress">
                <div class="sds-dayOverview__progress" style="height: 90%;"></div>
            </div>
            <div class="sds-dayOverview__text sds-textBold">
                <div>Mer</div>
                <div>30.04</div>
            </div>
        </div>

    </div>
    <div class="sds-outOfBoundsMd sds-exceptionStackSm">
        <div class="sds-scheduleOverview__nav sds-hoverContentSecondary d-flex align-items-center justify-content-between">
            <div class="sds-scheduleOverview__innerNav d-flex align-items-center">
                <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 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 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>
            <a href="" class="sds-btn -iconBtn -btnSecondary -btnInverse stretched-link">

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

            </a>
        </div>
    </div>
</div>


<!-- Balance -->
<div class="sds-scheduleOverview sds-stackMd sds-box -insetLg">
    <div class="sds-scheduleOverview__header d-flex align-items-center justify-content-between">
        <h3 class="h3">Vos Soldes</h3>
        <div class="sds-toggleTab">
            <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">

                <span class="sds-btn__text">Heures</span>

            </label>
            <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">

                <span class="sds-btn__text">Jours</span>

            </label>
        </div>
    </div>
    <div class="sds-outOfBoundsMd sds-exceptionStackSm">
        <div class="sds-scheduleOverview__nav sds-hoverContentSecondary d-flex align-items-center justify-content-between">
            <div class="sds-scheduleOverview__innerNav d-flex align-items-center">
                <div class="sds-timeRecap sds-stackSm -secondary100">
                    <div class="sds-timeRecap__title sds-textHelper">Congé de récréation</div>
                    <div class="sds-timeRecap__time sds-textBodyXl">86:00 <span class="sds-textBodyLg sds-textSemiBold">+02h50m</span> </div>
                </div>
                <div class="sds-timeRecap sds-stackSm -secondary100">
                    <div class="sds-timeRecap__title sds-textHelper">Compte épargne-temps</div>
                    <div class="sds-timeRecap__time sds-textBodyXl">24:00 <span class="sds-textBodyLg sds-textSemiBold">+00h47m</span> </div>
                </div>
                <div class="sds-timeRecap sds-stackSm -secondary100">
                    <div class="sds-timeRecap__title sds-textHelper">Compte télétravail (YTD)</div>
                    <div class="sds-timeRecap__time sds-textBodyXl">104:50 </div>
                </div>
            </div>
            <a href="" class="sds-btn -iconBtn -btnSecondary -btnInverse stretched-link">

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

            </a>
        </div>
    </div>
</div>


<!-- Default -->
<div class="{{ namespace }}scheduleOverview {{ namespace}}stackMd {{ namespace }}box -insetLg {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <div class="{{ namespace }}scheduleOverview__header d-flex align-items-center justify-content-between">
        <h3 class="h3">Horaire Mobile</h3>
		{% render "@msp-calendar-controls" %}
    </div>
	<div class="{{ namespace }}scheduleOverview__body d-flex justify-content-between">
		{% for key, item in dayOverviews %}
			{% if item.timeLogged %}
				{% set log = {
					"data-toggle": "tooltip",
					"data-placement": "top",
					"title": item.timeLogged
				} %}
			{% else %}
				{% set log = false %}
			{% endif %}
			{% render '@msp-day-overview' + item.status,{
				textWeekDay: item.textWeekDay,
				textMonthDay: item.textMonthDay,
				height: item.height,
				attrs: log
			}, true %}
		{% endfor %}
	</div>
	<div class="{{ namespace }}outOfBoundsMd {{ namespace }}exceptionStackSm">
		<div class="{{ namespace }}scheduleOverview__nav {{ namespace }}hoverContentSecondary d-flex align-items-center justify-content-between">
			<div class="{{ namespace }}scheduleOverview__innerNav d-flex align-items-center">
				{% render '@msp-time-recap' %}
				{% render '@msp-time-recap--secondary-100',{
					title: "Total presté",
					time: "128:12"
				}, true %}
				{% render '@msp-time-recap--success-100',{
					title: "Avance/Retard",
					time: "+4:12"
				}, true %}
			</div>
			{% render '@icon-btn-secondary-inverse',{
				icon : "icon-chevronright",
				eltType: "a",
				classes: ["stretched-link"]
			}, true %}
		</div>
	</div>
</div>

<!-- Balance -->
<div class="{{ namespace }}scheduleOverview {{ namespace}}stackMd {{ namespace }}box -insetLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}scheduleOverview__header d-flex align-items-center justify-content-between">
        <h3 class="h3">Vos Soldes</h3>
        {% render "@toggle-tab" %}
    </div>
   <div class="{{ namespace }}outOfBoundsMd {{ namespace }}exceptionStackSm">
	   <div class="{{ namespace }}scheduleOverview__nav {{ namespace }}hoverContentSecondary d-flex align-items-center justify-content-between">
		   <div class="{{ namespace }}scheduleOverview__innerNav d-flex align-items-center">
			   {% render '@msp-time-recap--secondary-100',{
				   title: "Congé de récréation",
				   time: "86:00",
				   helper: "+02h50m"
			   }, true  %}
			   {% render '@msp-time-recap--secondary-100',{
				   title: "Compte épargne-temps",
				   time: "24:00",
				   helper: "+00h47m"
			   }, true  %}
			   {% render '@msp-time-recap--secondary-100',{
				   title: "Compte télétravail (YTD)",
				   time: "104:50"
			   }, true  %}
		   </div>
		   {% render '@icon-btn-secondary-inverse',{
			   icon : "icon-chevronright",
			   eltType: "a",
			   classes: ["stretched-link"]
		   }, true %}
	   </div>
   </div>
</div>
  • Content: 
    .#{$namespace}scheduleOverview {

	/* 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 */


	/* 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 {

		padding-bottom: map-deep-get($token-spacer-inset-map, "xs");

	}

	&__nav {
		
		@include spacer-component-inline(lg);
		position: relative;
		z-index: z("medium");
		padding: map-deep-get($token-spacer-inset-map, "md");
		border-radius: map-deep-get($token-radius-map, "16");

	}

	&__innerNav {

		flex-grow: 1;
		@include spacer-component-inline(xxl);

	}

	&__body {

		overflow-x: auto;
		overflow-y: hidden;
		@include spacer-component-inline(sm);
		position: relative;
		z-index: z("low");
		margin-left: -(map-deep-get($token-spacer-inline-map, "md"));
		margin-right: -(map-deep-get($token-spacer-inline-map, "md"));
		padding-top: map-deep-get(map-deep-get($token-spacer-unit-map, "48"));
		padding-left: map-deep-get($token-spacer-inline-map, "lg");
		padding-right: map-deep-get($token-spacer-inline-map, "lg");
		margin-top: -(map-deep-get($token-spacer-unit-map, "24")) !important;

		@include media-breakpoint-up(lg){
			margin-left: -(map-deep-get($token-spacer-inline-map, "lg"));
			margin-right: -(map-deep-get($token-spacer-inline-map, "lg"));
		}

	}


	/* modifiers */

	// scheduleOverview -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/msp-schedule-overview/_schedule-overview.scss
  • Filesystem Path: components/my-spuerkeess/organisms/schedule-overview/_schedule-overview.scss
  • Size: 2 KB