Transaction Edit Block

No notes defined.

<!-- Default -->
<div class="sds-transactionEditBlock">
    <div class="sds-transactionEditBlock__item sds-box">
        <div class="row row-sm no-bottom-gutter">
            <div class="col-6">
                <div class="sds-stepInput -singleItemConnect">
                    <div class="sds-stepInput__item">
                        <div class="sds-stepInput__stepIcon">
                            <div class="sds-stepInput__circle">

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

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

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

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

                                    <div class="sds-input__autocomplete">
                                        <div class="sds-input__autocompleteSelected">

                                            <div class="sds-dismissibleAccountCard">
                                                <div class="sds-dismissibleAccountCard__content sds-stackXxs">
                                                    <div>Compte Epicerie Fournisseurs</div>
                                                    <div class="sds-dismissibleAccountCard__meta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                </div>

                                                <div class="d-flex flex-column align-items-end">

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

                                                        non visible
                                                    </div>

                                                </div>

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

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

                                                </button>

                                            </div>

                                        </div>
                                        <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-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-6">
                <div class="form-group">
                    <label for="" class="sds-label -form">
                        Date d’exécution souhaitée

                    </label>
                    <div class="sds-input -hasIcon -calendar">
                        <input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                        <div class="sds-input__iconRight">
                            <span class="sds-icon sds-icon-calendar"></span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-transactionEditBlock__item sds-box">
        <div class="sds-transactionEditBlock__fixedWrapper d-flex">
            <div class="sds-transactionEditBlock__amountCol d-flex">
                <span class="sds-itemConnector sds-transactionBlock__itemConnector">

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

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

                </div>
            </div>
            <div class="sds-transactionEditBlock__infoCol d-flex align-items-center">
                <span class="sds-numberCircle">
                    2
                </span>
                <div class="h4">Transactions</div>
            </div>
        </div>
    </div>
</div>

<!--  -->
<div class="sds-transactionEditBlock">
    <div class="sds-transactionEditBlock__item sds-box">
        <div class="row row-sm no-bottom-gutter">
            <div class="col-6">
                <div class="sds-stepInput -singleItemConnect">
                    <div class="sds-stepInput__item">
                        <div class="sds-stepInput__stepIcon">
                            <div class="sds-stepInput__circle">

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

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

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

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

                                    <div class="sds-input__autocomplete">
                                        <div class="sds-input__autocompleteSelected">

                                            <div class="sds-dismissibleAccountCard">
                                                <div class="sds-dismissibleAccountCard__content sds-stackXxs">
                                                    <div>Compte Epicerie Fournisseurs</div>
                                                    <div class="sds-dismissibleAccountCard__meta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                </div>

                                                <div class="d-flex flex-column align-items-end">

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

                                                        non visible
                                                    </div>

                                                </div>

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

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

                                                </button>

                                            </div>

                                        </div>
                                        <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-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-6">
                <div class="form-group">
                    <label for="" class="sds-label -form">
                        Date d’exécution souhaitée

                    </label>
                    <div class="sds-input -hasIcon -calendar">
                        <input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                        <div class="sds-input__iconRight">
                            <span class="sds-icon sds-icon-calendar"></span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-transactionEditBlock__item sds-box">
        <div class="sds-transactionEditBlock__fixedWrapper d-flex">
            <div class="sds-transactionEditBlock__amountCol d-flex">
                <span class="sds-itemConnector sds-transactionBlock__itemConnector">

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

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

                </div>
            </div>
            <div class="sds-transactionEditBlock__infoCol d-flex align-items-center">
                <span class="sds-numberCircle">
                    2
                </span>
                <div class="h4">Transactions</div>
            </div>
        </div>
    </div>
</div>

<div class="{{ namespace }}transactionEditBlock{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}transactionEditBlock__item {{ namespace }}box">
		<div class="row row-sm no-bottom-gutter">
			<div class="col-6">
				{% render "@snet-step-input",{
					classes: ["-singleItemConnect"],
					inputType: "--autocomplete-selected"
				},true %}
			</div>
			<div class="col-6">
				<div class="form-group">
					{% render "@label--form",{text: "Date d’exécution souhaitée"},true %}
					{% render "@input--calendar" %}
				</div>
			</div>
		</div>
	</div>
	<div class="{{ namespace }}transactionEditBlock__item {{ namespace }}box">
		<div class="{{ namespace }}transactionEditBlock__fixedWrapper d-flex">
			<div class="{{ namespace }}transactionEditBlock__amountCol d-flex">
				{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
				{% render "@amount--xtra-large" %}
			</div>
			<div class="{{ namespace }}transactionEditBlock__infoCol d-flex align-items-center">
				{% render "@snet-number-circle",{text: "2"},true %}
				<div class="h4">Transactions</div>
			</div>
		</div>
	</div>
</div>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $transaction-edit-block-inset: map-deep-get($token-spacer-inset-map, "lg");
    $transaction-edit-block-stack-level: "md";
    $transaction-edit-block-stack: map-deep-get($token-spacer-inset-map, $transaction-edit-block-stack-level);
    
    .#{$namespace}transactionEditBlock {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	@include spacer-component-stack($transaction-edit-block-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 */
    
    	// transactionEditBlock__item
    	&__item {
    
    		// follows same logic as parent
    
    		padding: $transaction-edit-block-inset;
    
    	}
    	
    	&__amountCol {
    
    		width: $transaction-block-amount-price-col-global;
    		position: relative;
    
    		&::before {
    
    			content: "";
    			width: $border-width*2;
    			position: absolute;
    			z-index: z("low");
    			top: -($transaction-edit-block-inset*2) - $transaction-edit-block-stack;
    			bottom: 50%;
    			transform: translateX(-50%);
    			background-color: $border-color;
    			left: math.div($item-connector-dimensions-global, 2);
    
    		}
    
    	}
    
    	&__infoCol {
    
    		@include spacer-component-inline("md");
    
    	}
    
    	&__fixedWrapper {
    
    		@include spacer-component-inline("lg");
    
    	}
    
    
    	/* modifiers */
    
    	// transactionEditBlock -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-transaction-edit-block/_transaction-edit-block.scss
  • Filesystem Path: components/snet/organisms/transaction-edit-block/_transaction-edit-block.scss
  • Size: 1.8 KB