Transaction Chain: Default

The .js-transactionChainOperations collapses are triggered by the two .sds-btn with the data-target=".js-transactionChainOperations" attribute.
The first button with these attributes shows the operations block and hides the collapse trigger (clicked button), the second one is the close button in the revealed operations block. It closes the operations block and reveals the initial trigger again.
<div class="sds-transactionChain">
    <div class="sds-transactionChain__transactions">

        <div class="sds-transactionBlock sds-box  -noValidation">
            <div class="sds-transactionBlock__inner">
                <div class="sds-transactionBlock__row -first">
                    <div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
                        <div class="sds-transactionBlock__rowInner">
                            <div class="sds-transactionBlock__mainInfo">
                                <div class="sds-transactionBlock__mainInfoAccount">

                                    <div class="sds-avatar centeredBgi -avatarSm">

                                        <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                    </div>
                                    <div class="sds-stackXxs">
                                        <div>Compte Epicerie Fournisseurs</div>
                                        <div class="sds-transactionBlock__meta sds-textHelper">
                                            LU63 0000 2200 3300 4400
                                        </div>
                                        <div class="sds-amount -positive -amountLg">
                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="sds-transactionBlock__col sds-stackXxs">
                                        <div class="sds-transactionBlock__meta sds-textHelper">Encodeur</div>
                                        <div class="sds-avatarText -small">

                                            <div class="sds-avatar centeredBgi -xtraSmall">

                                                <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                            </div>
                                            <div class="sds-avatarText__content">
                                                <div class="sds-textSemiBold">Jil Schmit</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sds-transactionBlock__col sds-stackXxs text-right -dateEdit">
                                        <div>
                                            <div class="sds-transactionBlock__meta sds-textHelper">
                                                Date d'exécution
                                            </div>
                                            <div class="sds-textSemiBold">23.03.2022</div>
                                        </div>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

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

                        <div class="sds-transactionBlock__rowContent sds-staticStackMd">

                        </div>

                    </div>
                </div>
                <div class="sds-transactionBlock__row -total">
                    <div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
                        <div class="sds-transactionBlock__rowInner">
                            <div class="sds-transactionBlock__colWrapperFixed">
                                <span class="sds-itemConnector sds-transactionBlock__itemConnector">

                                </span>

                                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-transactionBlock__collapseToggle" data-toggle="collapse" data-target="#transactionBlockCollapse-date-edit" aria-expanded="true">

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

                                </button>
                                <div class="sds-transactionBlock__col -amount">
                                    <div class="sds-amount -amountXl">
                                        <span class="sds-amount__value">335,30</span>

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

                                    </div>
                                </div>
                                <div class="sds-transactionBlock__col -transactions">
                                    <span class="sds-numberCircle">
                                        2
                                    </span>
                                    <div class="h4">Transactions</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-date-edit">
                    <div class="sds-transactionBlock__collapseInner">
                        <div class="sds-transactionBlock__row">
                            <div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
                                <div class="sds-transactionBlock__rowInner">
                                    <div class="sds-transactionBlock__colWrapperFixed">
                                        <span class="sds-itemConnector sds-transactionBlock__itemConnector">

                                        </span>
                                        <div class="sds-transactionBlock__col -amount">
                                            <div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
                                                <div class="sds-arrowAmount__bg">
                                                    <div class="sds-amount">
                                                        <span class="sds-amount__value">{+#.###,##}</span>

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

                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="sds-transactionBlock__col -account">
                                            <div class="sds-accountInfo">

                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                </div>

                                                <div class="sds-accountInfo__content">
                                                    <p class="sds-accountInfo__title">
                                                        <span class="text-truncate">
                                                            Kant Institution
                                                        </span>

                                                    </p>
                                                    <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sds-transactionBlock__col -communication">
                                        <div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
                                        <div>Facture 239284</div>
                                        <div>Facture 239284</div>
                                        <div>Facture 239284</div>
                                    </div>

                                    <div class="sds-transactionBlock__col -alignEnd">
                                        <div class="sds-btnGroup">
                                            <button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__edit">

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

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

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

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

                                </div>

                                <div class="sds-transactionBlock__rowContent">

                                    <div class="sds-transactionBlock__meta sds-textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>

                                </div>

                            </div>
                        </div>

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

            <div class="js-transactionChainOperations collapse show">
                <div class="sds-transactionBlock__footer">
                    <div class="row no-bottom-gutter">
                        <div class="col-12">
                            <div class="d-flex justify-content-end">
                                <button type="button" class="sds-btn -btnSecondary" data-toggle="collapse" data-target=".js-transactionChainOperations">

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

                                    <span class="sds-btn__text">Ajouter transaction</span>

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

        </div>
    </div>
    <div class="js-transactionChainOperations sds-transactionChain__operationsCollapse collapse">
        <div class="sds-transactionChain__operations sds-box -insetLg">
            <div class="row row-sm">
                <div class="col-6">
                    <div class="sds-stepInput">
                        <div class="sds-stepInput__item">
                            <div class="sds-stepInput__stepIcon">
                                <div class="sds-stepInput__circle">
                                    <span class="sds-iconCircle -secondary100Outline -small" aria-hidden="true">

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

                                    </span>

                                </div>
                            </div>
                            <div class="sds-stepInput__input">
                                <div class="form-group">
                                    <label for="" class="sds-label -form">
                                        Montant

                                    </label>
                                    <div class="sds-input -hasShadow">
                                        <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                        <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                            <div class="sds-input__shadowValue">
                                                4000
                                            </div>
                                            <div class="sds-input__shadowCurrency"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sds-stepInput__item">
                            <div class="sds-stepInput__stepIcon">
                                <div class="sds-stepInput__circle">

                                    <div class="sds-avatar centeredBgi -avatarSm -bank">

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

                                    </div>
                                </div>
                            </div>
                            <div class="sds-stepInput__input">
                                <div class="form-group">
                                    <label for="" class="sds-label -form">
                                        Compte bénéficiaire

                                    </label>
                                    <div class="sds-input -autocomplete">
                                        <input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="">

                                        <div class="sds-input__autocomplete">
                                            <form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
                                                <div class="h3">Comptes de la société</div>
                                                <div class="sds-stackSm">
                                                    <div class="h4">Comptes et cartes</div>
                                                    <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-amount -positive -amountLg">
                                                                    <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                </div>

                                                            </label>
                                                        </div>
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-amount -positive -amountLg">
                                                                    <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                </div>

                                                            </label>
                                                        </div>
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-amount -positive -amountLg">
                                                                    <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                </div>

                                                            </label>
                                                        </div>
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                    non visible
                                                                </div>

                                                            </label>
                                                        </div>
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                    non visible
                                                                </div>

                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="sds-stackSm">
                                                    <div class="h4">Epargne</div>
                                                    <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                        <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                            <label class="sds-accountCard__inner">
                                                                <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                <div class="sds-avatar centeredBgi -avatarSm">

                                                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                </div>

                                                                <span class="sds-accountCard__content sds-stackXs">
                                                                    <div>
                                                                        Jil Schmit

                                                                    </div>
                                                                    <span class="sds-textHelper sds-accountCard__meta">
                                                                        compte courant
                                                                    </span>
                                                                </span>

                                                                <div class="sds-amount -positive -amountLg">
                                                                    <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                </div>

                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="form-group">
                        <label for="" class="sds-label -form">
                            Communication

                        </label>
                        <div class="sds-input -multiple">
                            <input class="sds-input__field form-control" type="text" placeholder="Entrez une communication" value="Facture-986954857">
                            <input class="sds-input__field form-control" type="text" placeholder="" value="">
                            <input class="sds-input__field form-control" type="text" placeholder="" value="">
                            <input class="sds-input__field form-control" type="text" placeholder="" value="">

                        </div>
                    </div>
                    <div class="form-group d-flex flex-grow-1">
                        <div class="d-flex align-items-end justify-content-end flex-grow-1">

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

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

                                <span class="sds-btn__text">Enregistrer transaction</span>

                            </button>
                        </div>
                    </div>
                </div>
                <div class="col text-right">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="collapse" data-target=".js-transactionChainOperations">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="{{ namespace }}transactionChain">
	<div class="{{ namespace }}transactionChain__transactions">
		{% render "@snet-transaction-block--transaction-chain-item",
			{
				additionalTransaction: additionalTransaction,
				transactionBlockTransactionChaincollapsesShown: collapsesShown,
				transactionBlockTransactionChainAttrs: {
					"data-toggle": "collapse",
					"data-target": ".js-transactionChainOperations"
				}
			},true %}
	</div>
	<div class="js-transactionChainOperations {{ namespace }}transactionChain__operationsCollapse collapse{% if collapsesShown %} show{% endif %}">
		<div class="{{ namespace }}transactionChain__operations {{ namespace }}box -insetLg">
			<div class="row row-sm">
				<div class="col-6">
					{% render "@snet-step-input--two"+stepInputState %}
				</div>
				<div class="col-5">
					<div class="form-group">
						{% render "@label--form",{text: "Communication"},true %}
						{% render "@input--multiple",{
							value: "Facture-986954857"
						},true %}
					</div>
					<div class="form-group d-flex flex-grow-1">
						<div class="d-flex align-items-end justify-content-end flex-grow-1">
							{% if confirmationBtnState === "disabled" %}
								{% set btnAttrs = {
									disabled: disabled
								} %}
							{% else %}
								{% set btnAttrs = null %}
							{% endif %}
							{% render "@btn-secondary--icon-left",{
								icon: "icon-check",
								text: "Enregistrer transaction",
								attrs: btnAttrs
							},true %}
						</div>
					</div>
				</div>
				<div class="col text-right">
					{% render "@icon-btn-secondary",{
						icon: "icon-cross",
						attrs: {
							"data-toggle": "collapse",
							"data-target": ".js-transactionChainOperations"
						}
					},true %}
				</div>
			</div>
		</div>
	</div>
</div>
  • Content:
    /* variables specific to current element */
    
    $transaction-chain-item-inset-mobile: $transaction-block-padding-mobile-global;
    $transaction-chain-item-inset-desktop: $transaction-block-padding-desktop-global;
    $transaction-chain-stack-level: "md";
    $transaction-chain-stack: map-deep-get($token-spacer-inset-map, $transaction-chain-stack-level);
    
    .#{$namespace}transactionChain {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	@include spacer-component-stack($transaction-chain-stack-level);
    
    	/* 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 */
    
    	// transactionChain__transactions
    
    	&__transactions {
    
    		.#{$namespace}transactionBlock__row {
    
    			z-index: z("medium"); //needed in order for the pseudo element of the operations block to not go over the collapse toggle btn
    
    		}
    
    	}
    
    
    	// transactionChain__operations
    	&__operations {
    
    		// follows same logic as parent
    
    		position: relative;
    		z-index: z("medium");
    
    		.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
    
    			&::after {
    
    				transition: top 0.15s linear
    
    			}
    
    		}
    
    	}
    
    	&__operationsCollapse {
    
    		&.show {
    
    			.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
    
    				&::after {
    
    					top: -((map-deep-get($token-spacer-unit-map, "64")*2) + $transaction-chain-stack*2.5);
    
    				}
    
    			}
    
    		}
    
    	}
    
    
    	/* modifiers */
    	&.-operationsShown {
    
    		.#{$namespace}transactionBlock__row:last-child {
    
    			&::before {
    				bottom: 0;
    			}
    
    		}
    
    		.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
    
    			&::after {
    
    				top: -(($transaction-chain-item-inset-mobile*2) + $transaction-chain-stack);
    
    				@include media-breakpoint-up(lg) {
    					top: -(($transaction-chain-item-inset-desktop*2) + $transaction-chain-stack);
    				}
    
    
    			}
    
    		}
    
    	}
    
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-transaction-chain/_transactionchain.scss
  • Filesystem Path: components/snet/organisms/transaction-chain/_transactionchain.scss
  • Size: 2.3 KB