List Item Detail

No notes defined.

<!-- Default -->
<div class="sds-listItem__detail sds-box -insetXl">
    <div class="sds-listItem__detailHeader sds-listItem sds-hoverContentSecondary">
        <span class="sds-iconCircle -info100" aria-hidden="true">

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

        </span>

        <div class="sds-listItem__textMain">Text text text text</div>
        <div class="sds-listItem__rightContent">
            <div class="sds-btnGroup -aboveClickArea">
                <button type="button" class="sds-btn -btnSecondary">

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

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

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                </button>
            </div>
        </div>
        <button type="button" class="sds-listItem__collapseTrigger">
            <span class="sr-only">Close list item detail</span>
        </button>
    </div>
    <div class="row">
        <div class="col-6 sds-stackLg">
            <div class="sds-stackXs">
                <div class="sds-listItem__detailHelperText">Statut</div>
                <div class="sds-listItem__detailText -success100">Actif</div>
            </div>

            <table class="sds-infoTable table">
                <tbody>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Montant de la transaction

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">-165</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Date de la transaction

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div>
                                    30.09.2021
                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Montant

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">-165</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Pays

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div>
                                    Luxembourg
                                </div>

                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>

        </div>
        <div class="col-6 sds-stackLg">
            <div class="text-right sds-stackXs">
                <div class="sds-listItem__detailHelperText">Dernier encaissement</div>
                <div class="sds-listItem__detailText">01.06.2022</div>
            </div>

            <table class="sds-infoTable table">
                <tbody>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Montant de la transaction

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">-165</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Date de la transaction

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div>
                                    30.09.2021
                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Montant

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">-165</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div class="sds-label">
                                    Pays

                                </div>

                            </div>
                        </td>
                        <td class="">
                            <div class="sds-infoTable__cellContent">

                                <div>
                                    Luxembourg
                                </div>

                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>

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

<!-- Beneficiaires -->
<div class="sds-listItem__detail sds-box -insetXl">
    <div class="sds-listItem__detailHeader sds-listItem sds-hoverContentSecondary">
        <div class="sds-accountInfo -metaSmall">

            <div class="sds-accountInfo__content">
                <p class="sds-accountInfo__title sds-textSemiBold">
                    <span class="text-truncate">
                        {Company name}
                    </span>

                </p>
                <p class="sds-accountInfo__meta">Saisie {manuelle || automatique} par {Name} le {DD.MM.YYYY}</p>

            </div>
        </div>
        <div class="sds-listItem__rightContent">
            <div class="sds-btnGroup -aboveClickArea">
                <button type="button" class="sds-btn -btnPrimary">

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

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

                </button>
                <button type="button" class="sds-btn -btnSecondary">

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

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

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                </button>
            </div>
        </div>
        <button type="button" class="sds-listItem__collapseTrigger">
            <span class="sr-only">Close list item detail</span>
        </button>
    </div>
    <div class="sds-stackLg">
        <div class="row">
            <div class="col">
                <div class="d-inline sds-label">Nom du bénéficiaire</div>
                <div class="sds-domItemDetail__text">{Company name}</div>
            </div>
            <div class="col text-right">
                <div class="d-inline sds-label">Numéro de compte</div>
                <div class="sds-domItemDetail__text">{ LU## #### #### #### #### #### }</div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">

                <table class="sds-infoTable table">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Adresse

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        { Adresse bénéficiaire }
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Code postal

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {#####}
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Localité

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {Localité}
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Pays

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {Pays}
                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
            <div class="col-6">

                <table class="sds-infoTable table">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Nom de la banque

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {Nom de la banque}
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Adresse de la banque

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {Adresse de la banque}
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Pays de la banque

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        {Pays de la banque}
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Communication

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        -
                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

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

<!-- Ordres Permanents -->
<div class="sds-listItem__detail sds-box -insetXl">
    <div class="sds-listItem__detailHeader sds-listItem sds-hoverContentSecondary">
        <span class="sds-iconCircle -info100" aria-hidden="true">

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

        </span>

        <div class="sds-listItem__textMain">Text text text text</div>
        <div class="sds-listItem__rightContent">
            <div class="sds-btnGroup -aboveClickArea">
                <button type="button" class="sds-btn -btnSecondary">

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

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

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                </button>
            </div>
        </div>
        <button type="button" class="sds-listItem__collapseTrigger">
            <span class="sr-only">Close list item detail</span>
        </button>
    </div>
    <div class="sds-stackLg">
        <div class="row">
            <div class="col">
                <div class="d-inline sds-label">Montant</div>
                <div class="sds-domItemDetail__text">1.658,34 €</div>
            </div>
            <div class="col text-center">
                <div class="d-inline sds-label">Dernière date d'exécution</div>
                <div class="sds-domItemDetail__text">01.06.2022</div>
            </div>
            <div class="col text-right">
                <div class="d-inline sds-label">Prochaine exécution</div>
                <div class="sds-domItemDetail__text">01.07.2022</div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">

                <table class="sds-infoTable table">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant de la transaction

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -negative">
                                        <span class="sds-amount__value">-165</span>

                                        <span class="sds-amount__currency"></span>

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Date de la transaction

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        30.09.2021
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -negative">
                                        <span class="sds-amount__value">-165</span>

                                        <span class="sds-amount__currency"></span>

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Pays

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        Luxembourg
                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
            <div class="col-6">

                <table class="sds-infoTable table">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant de la transaction

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -negative">
                                        <span class="sds-amount__value">-165</span>

                                        <span class="sds-amount__currency"></span>

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Date de la transaction

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        30.09.2021
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -negative">
                                        <span class="sds-amount__value">-165</span>

                                        <span class="sds-amount__currency"></span>

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Pays

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        Luxembourg
                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

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

<!-- Default -->
<div class="{{ namespace }}listItem__detail {{ namespace }}box -insetXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <div class="{{ namespace }}listItem__detailHeader {{ namespace }}listItem {{ namespace }}hoverContentSecondary">
        {% render "@icon-circle-regular--info-100",{icon: "icon-checkout"}, true %}
        <div class="{{ namespace }}listItem__textMain">{{ textBtn }}</div>
        <div class="{{ namespace }}listItem__rightContent">
            <div class="{{ namespace }}btnGroup -aboveClickArea">
                {% render "@btn-secondary--icon-left",{
                    text: "Modifier",
                    icon: "icon-edit"
                },true %}
                {% render "@icon-btn-secondary",{icon: "icon-printer"},true %}
                {% render "@icon-btn-secondary",{icon: "icon-locked"},true %}
            </div>
        </div>
		<button type="button" class="{{ namespace }}listItem__collapseTrigger"{% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close list item detail</span>
		</button>
    </div>
    <div class="row">
        <div class="col-6 {{ namespace }}stackLg">
            <div class="{{ namespace }}stackXs">
                <div class="{{ namespace }}listItem__detailHelperText">Statut</div>
                <div class="{{ namespace }}listItem__detailText -success100">Actif</div>
            </div>
            {% render "@snet-info-table" %}
        </div>
        <div class="col-6 {{ namespace }}stackLg">
            <div class="text-right {{ namespace }}stackXs">
                <div class="{{ namespace }}listItem__detailHelperText">Dernier encaissement</div>
                <div class="{{ namespace }}listItem__detailText">01.06.2022</div>
            </div>
            {% render "@snet-info-table" %}
        </div>
    </div>
</div>

<!-- Beneficiaires -->
<div class="{{ namespace }}listItem__detail {{ namespace }}box -insetXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}listItem__detailHeader {{ namespace }}listItem {{ namespace }}hoverContentSecondary">
		{% render "@snet-account-info--meta-small-no-avatar",{
			text: "{Company name}",
			meta: "Saisie {manuelle || automatique} par {Name} le {DD.MM.YYYY}",
			bold: true
		},true %}
		<div class="{{ namespace }}listItem__rightContent">
			<div class="{{ namespace }}btnGroup -aboveClickArea">
				{% render "@btn-primary--icon-left",{
					text: "Valider",
					icon: "icon-check"
				},true %}
				{% render "@btn-secondary--icon-left",{
					text: "Modifier",
					icon: "icon-edit"
				},true %}
				{% render "@icon-btn-secondary",{icon: "icon-trash"},true %}
			</div>
		</div>
		<button type="button" class="{{ namespace }}listItem__collapseTrigger"{% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close list item detail</span>
		</button>
	</div>
	<div class="{{ namespace }}stackLg">
		<div class="row">
			<div class="col">
				<div class="d-inline {{ namespace }}label">Nom du bénéficiaire</div>
				<div class="{{ namespace }}domItemDetail__text">{Company name}</div>
			</div>
			<div class="col text-right">
				<div class="d-inline {{ namespace }}label">Numéro de compte</div>
				<div class="{{ namespace }}domItemDetail__text">{ LU## #### #### #### #### #### }</div>
			</div>
		</div>
		<div class="row">
			<div class="col-6">
				{% render "@snet-info-table", benefInfosTableCol1,true %}
			</div>
			<div class="col-6">
				{% render "@snet-info-table", benefInfosTableCol2,true %}
			</div>
		</div>
	</div>
</div>

<!-- Ordres Permanents -->
<div class="{{ namespace }}listItem__detail {{ namespace }}box -insetXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}listItem__detailHeader {{ namespace }}listItem {{ namespace }}hoverContentSecondary">
		{% render "@icon-circle-regular--info-100",{icon: "icon-reload"}, true %}
		<div class="{{ namespace }}listItem__textMain">{{ textBtn }}</div>
		<div class="{{ namespace }}listItem__rightContent">
			<div class="{{ namespace }}btnGroup -aboveClickArea">
				{% render "@btn-secondary--icon-left",{
					text: "Modifier",
					icon: "icon-edit"
				},true %}
				{% render "@icon-btn-secondary",{icon: "icon-document"},true %}
				{% render "@icon-btn-secondary",{icon: "icon-trash"},true %}
			</div>
		</div>
		<button type="button" class="{{ namespace }}listItem__collapseTrigger"{% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close list item detail</span>
		</button>
	</div>
	<div class="{{ namespace }}stackLg">
		<div class="row">
			<div class="col">
				<div class="d-inline {{ namespace }}label">Montant</div>
				<div class="{{ namespace }}domItemDetail__text">1.658,34 €</div>
			</div>
			<div class="col text-center">
				<div class="d-inline {{ namespace }}label">Dernière date d'exécution</div>
				<div class="{{ namespace }}domItemDetail__text">01.06.2022</div>
			</div>
			<div class="col text-right">
				<div class="d-inline {{ namespace }}label">Prochaine exécution</div>
				<div class="{{ namespace }}domItemDetail__text">01.07.2022</div>
			</div>
		</div>
		<div class="row">
			<div class="col-6">
				{% render "@snet-info-table" %}
			</div>
			<div class="col-6">
				{% render "@snet-info-table" %}
			</div>
		</div>
	</div>
</div>
  • Content:
    /* variables specific to current element */
    /* @TODO LEGACY DO NOT USE*/
    $section-item-horiz-padding: $section-item-horiz-padding-global;
    
    .#{$namespace}domItemDetail {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    
    	/* properties of current element  + media queries */
    	box-shadow: map-deep-get($token-shadow-map, "detail");
    	position: relative; // necessary for shadow to show above next element
    	margin: 0 (-($timeline-item-horiz-padding-global + $section-item-horiz-padding));
    
    	/* 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 */
    
    	// domItemDetail__header
    	&__header {
    
    		margin-bottom: map-deep-get($token-spacer-unit-map, "48");
    		position: relative;
    
    	}
    
    	&__text {
    
    		font-size: map-deep-get($token-font-size-map, "body", "xl");
    
    		&.-success100 {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    	}
    
    	&__leftContent,
    	&__rightContent {
    
    		margin-bottom: map-deep-get($token-spacer-unit-map, "24");
    
    	}
    
    	&__leftContent {
    
    		text-align: left;
    
    	}
    
    	&__rightContent {
    
    		text-align: right;
    
    	}
    
    	&__content {
    
    		display: flex;
    		align-items: flex-start;
    		justify-content: space-between;
    		text-align: center;
    		margin-bottom: map-deep-get($token-spacer-unit-map, "24");
    
    	}
    
    
    	/* modifiers */
    
    	// domItemDetail -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-list-item-detail/_dom-item-detail.scss
  • Filesystem Path: components/snet/organisms/list-item-detail/_dom-item-detail.scss
  • Size: 1.8 KB