Section Item

No notes defined.

<!-- Default -->
<div class="sds-sectionItem -isTimelineItem -isStatic">
    <div class="sds-sectionItem__inner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper"></div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle sds-sectionItem__statusIcon" aria-hidden="true">

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

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -grow">
            <div class="sds-stackXs">
                <div>{Motif}</div>
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    {DD.MM.YYYY} • {XXh}}
                </div>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <div class="sds-sectionItem__statusText sds-textSemiBold">
                {En attente • Person in charge}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

            </button>
        </div>
    </div>
</div>


<!-- Positive -->
<div class="sds-sectionItem -isTimelineItem -statusPositive -isStatic">
    <div class="sds-sectionItem__inner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper"></div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle sds-sectionItem__statusIcon" aria-hidden="true">

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

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -grow">
            <div class="sds-stackXs">
                <div>{Motif}</div>
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    {DD.MM.YYYY} • {XXh}}
                </div>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <div class="sds-sectionItem__statusText sds-textSemiBold">
                {Validé • Person in charge}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

            </button>
        </div>
    </div>
</div>


<!-- Negative -->
<div class="sds-sectionItem -isTimelineItem -statusNegative -isStatic">
    <div class="sds-sectionItem__inner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper"></div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle sds-sectionItem__statusIcon" aria-hidden="true">

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

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -grow">
            <div class="sds-stackXs">
                <div>{Motif}</div>
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    {DD.MM.YYYY} • {XXh}}
                </div>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <div class="sds-sectionItem__statusText sds-textSemiBold">
                {Refusé • Person in charge}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

            </button>
        </div>
    </div>
</div>


<!-- Reservation -->
<div class="sds-sectionItem -isTimelineItem -isStatic">
    <div class="sds-sectionItem__inner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper"></div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-circle"></span>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -grow">
            <div class="sds-stackXs">
                <div>{Parking}</div>
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    {Amount of time [h:mm - h:mm] <br> Parking lot • Person in charge}
                </div>
            </div>
        </div>
        <div class="sds-sectionItem__innerCol">
            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

            </button>
        </div>
    </div>
</div>


<!-- Default -->
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionItem__inner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper"></div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-regular--ghost",{
					icon: statusIcon or "icon-hourglass",
					modifiers: [namespace + "sectionItem__statusIcon"]
				},true %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -grow">
			<div class="{{ namespace }}stackXs">
				<div>{{ motif }}</div>
				<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
					{{ date }}
				</div>
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			<div class="{{ namespace }}sectionItem__statusText {{ namespace }}textSemiBold">
				{{ statusText }}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			{% render "@icon-btn-secondary",{
				icon: "icon-trash"
			},true %}
		</div>
	</div>
</div>

<!-- Positive -->
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionItem__inner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper"></div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-regular--ghost",{
					icon: statusIcon or "icon-hourglass",
					modifiers: [namespace + "sectionItem__statusIcon"]
				},true %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -grow">
			<div class="{{ namespace }}stackXs">
				<div>{{ motif }}</div>
				<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
					{{ date }}
				</div>
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			<div class="{{ namespace }}sectionItem__statusText {{ namespace }}textSemiBold">
				{{ statusText }}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			{% render "@icon-btn-secondary",{
				icon: "icon-trash"
			},true %}
		</div>
	</div>
</div>

<!-- Negative -->
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionItem__inner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper"></div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-regular--ghost",{
					icon: statusIcon or "icon-hourglass",
					modifiers: [namespace + "sectionItem__statusIcon"]
				},true %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -grow">
			<div class="{{ namespace }}stackXs">
				<div>{{ motif }}</div>
				<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
					{{ date }}
				</div>
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			<div class="{{ namespace }}sectionItem__statusText {{ namespace }}textSemiBold">
				{{ statusText }}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			{% render "@icon-btn-secondary",{
				icon: "icon-trash"
			},true %}
		</div>
	</div>
</div>

<!-- Reservation -->
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionItem__inner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper"></div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@circle--default" %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -grow">
			<div class="{{ namespace }}stackXs">
				<div>{{ reservationLocation }}</div>
				<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
					{{ reservation | safe }}
				</div>
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol">
			{% render "@icon-btn-secondary",{
				icon: "icon-trash"
			},true %}
		</div>
	</div>
</div>
  • Content: 
    /* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}sectionItem {

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

	// sectionItem__childElement
	&__statusIcon,
	&__statusText {

		// follows same logic as parent

		color: map-deep-get($token-color-brand-map, "secondary", "100");

	}


	/* modifiers */

	// sectionItem -statusPositive
	&.-statusPositive {

		// follows same logic as base element$

		#{$self}__statusIcon,
		#{$self}__statusText {

			color: map-deep-get($token-color-brand-map, "success", "100");

		}

	}

	// sectionItem -statusNegative
	&.-statusNegative {

		// follows same logic as base element

		#{$self}__statusIcon,
		#{$self}__statusText {

			color: map-deep-get($token-color-brand-map, "primary", "100");

		}

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}
  • URL: /components/raw/msp-section-item/_section-item.scss
  • Filesystem Path: components/my-spuerkeess/organisms/section-item/_section-item.scss
  • Size: 1.4 KB