Status List

No notes defined.

<div class="sds-statusList">
    <dl class="sds-stackLg">
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -processing -textHelper">
                    <div class="sds-icon sds-icon-sign" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">A valider</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre à valider est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre en attente d’une [première] validation.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -processing -textHelper">
                    <div class="sds-icon sds-icon-doublesignature" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">A contre-valider</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre à contre-valider est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre ayant reçu une ou plusieurs validations, mais nécessitant une ou plusieurs autres validations.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -paid -textHelper">
                    <div class="sds-icon sds-icon-check" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Validé</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre validé est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre entièrement validé, non encore transmis aux systèmes internes de la banque. L’annulation est toujours possible dans S-Net Business.</li>
                    <li>Ordre entièrement validé, transmis aux systèmes internes de la banque. Annulation toujours possible dans S-Net Business si la date d’exécution est future.</li>
                    <li>Ordre entièrement validé dont l’exécution est imminente. Aucune annulation possible dans S-Net Business.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -paid -textHelper">
                    <div class="sds-icon sds-icon-check" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Actif</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre actif est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre en attente d’une [première] validation.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -paid -textHelper">
                    <div class="sds-icon sds-icon-transaction" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Executé</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre actif est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre en attente d’une [première] validation.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -rejected -textHelper">
                    <div class="sds-icon sds-icon-crosscircleborder" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Annulé</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre annulé est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre en attente d’une [première] validation.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -rejected -textHelper">
                    <div class="sds-icon sds-icon-crosscircleborder" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Non exécuté</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre non exécuté est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre rejeté par la banque.</li>
                </ul>
            </dd>
        </div>
        <div class="sds-statusList__item sds-stackMd">
            <dt>
                <div class="sds-transactionState -rejected -textHelper">
                    <div class="sds-icon sds-icon-crosscircleborder" aria-hidden="true"></div>
                    <div class="sds-transactionState__text">Expiré</div>

                </div>
            </dt>
            <dd class="sds-stackMd">
                <p>Un ordre non expiré est un ordre qui concerne :</p>
                <ul class="sds-list">
                    <li>Ordre expiré car non entièrement validé à la date de la première échéance.</li>
                </ul>
            </dd>
        </div>
    </dl>
</div>
<div class="{{ namespace }}statusList{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<dl class="{{ namespace }}stackLg">
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--processing-small",{
					icon: "icon-sign",
					text: "A valider"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre à valider est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre en attente d’une [première] validation.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--processing-small",{
					icon: "icon-doublesignature",
					text: "A contre-valider"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre à contre-valider est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre ayant reçu une ou plusieurs validations, mais nécessitant une ou plusieurs autres validations.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--paid-small",{
					icon: "icon-check",
					text: "Validé"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre validé est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre entièrement validé, non encore transmis aux systèmes internes de la banque. L’annulation est toujours possible dans S-Net Business.</li>
					<li>Ordre entièrement validé, transmis aux systèmes internes de la banque. Annulation toujours possible dans S-Net Business si la date d’exécution est future.</li>
					<li>Ordre entièrement validé dont l’exécution est imminente. Aucune annulation possible dans S-Net Business.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--paid-small",{
					icon: "icon-check",
					text: "Actif"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre actif est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre en attente d’une [première] validation.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--paid-small",{
					icon: "icon-transaction",
					text: "Executé"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre actif est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre en attente d’une [première] validation.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--rejected-small",{
					text: "Annulé"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre annulé est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre en attente d’une [première] validation.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--rejected-small",{text: "Non exécuté"},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre non exécuté est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre rejeté par la banque.</li>
				</ul>
			</dd>
		</div>
		<div class="{{ namespace }}statusList__item {{ namespace }}stackMd">
			<dt>
				{% render "@snet-transaction-state--rejected-small",{
					text: "Expiré"
				},true %}
			</dt>
			<dd class="{{ namespace }}stackMd">
				<p>Un ordre non expiré est un ordre qui concerne :</p>
				<ul class="{{ namespace }}list">
					<li>Ordre expiré car non entièrement validé à la date de la première échéance.</li>
				</ul>
			</dd>
		</div>
	</dl>
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}statusList {
    
    	/* 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 */
    
    	// statusList__item
    	&__item {
    
    		// follows same logic as parent
    
    		& + & {
    
    			padding-top: map-deep-get($token-spacer-inset-map, "lg");
    			border-top: $border-width solid;
    			@include custom-prop-fallback("border-top-color","sys-color-border-primary-moderate");
    
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// statusList -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/snet-status-list/_status-list.scss
  • Filesystem Path: components/snet/organisms/status-list/_status-list.scss
  • Size: 1.1 KB