Step Input: Three Autocomplete Selected

No notes defined.

<div class="sds-stepInput">
    <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 donneur d'ordre

                </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 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="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 class="{{ namespace }}stepInput{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}stepInput__item">
		<div class="{{ namespace }}stepInput__stepIcon">
			<div class="{{ namespace }}stepInput__circle">
				{% render "@avatar--bank-no-img" %}
			</div>
		</div>
		<div class="{{ namespace }}stepInput__input">
			<div class="form-group">
				{% render "@label--form",{text: "Compte donneur d'ordre"},true %}
				{% render "@input--autocomplete-selected" %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}stepInput__item">
		<div class="{{ namespace }}stepInput__stepIcon">
			<div class="{{ namespace }}stepInput__circle">
				{% render "@icon-circle-regular--secondary-100-outline-small" %}
			</div>
		</div>
		<div class="{{ namespace }}stepInput__input">
			<div class="form-group">
				{% render "@label--form",{text: "Montant"},true %}
				{% render "@input--shadow" %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}stepInput__item">
		<div class="{{ namespace }}stepInput__stepIcon">
			<div class="{{ namespace }}stepInput__circle">
				{% render "@avatar--bank-no-img" %}
			</div>
		</div>
		<div class="{{ namespace }}stepInput__input">
			<div class="form-group">
				{% render "@label--form",{text: "Compte bénéficiaire"},true %}
				{% render "@input--autocomplete-selected" %}
			</div>
		</div>
	</div>
</div>
  • Content:
    /* variables specific to current element */
    
    $step-input-icon-top-offset: $step-input-icon-top-offset-global;
    
    .#{$namespace}stepInput {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	@include spacer-component-stack("xxl");
    
    	/* 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 */
    
    	// stepInput__item
    	&__item {
    
    		// follows same logic as parent
    
    		display: flex;
    		@include spacer-component-inline("md");
    		flex-shrink: 0;
    
    		&:first-of-type {
    
    			#{$self}__stepIcon {
    
    				&::after {
    
    					top: $step-input-icon-top-offset;
    					bottom: -(map-deep-get($token-spacer-unit-map, "48"));
    
    				}
    
    			}
    
    		}
    
    		&:last-of-type {
    
    			#{$self}__stepIcon {
    
    				&::after {
    
    					top: 0;
    					bottom: auto;
    					height: $step-input-icon-top-offset;
    
    				}
    
    				&::before {
    
    					content: "";
    					width: map-deep-get($token-sizes-unit-map, "16");
    					height: map-deep-get($token-sizes-unit-map, "16");
    					border: $border-width*2 solid $border-color;
    					border-right-color: transparent;
    					border-top-color: transparent;
    					transform: rotate(-45deg);
    					margin: -22px auto 6px; //@TODO change values
    
    				}
    
    			}
    
    		}
    
    		&:first-of-type,
    		&:last-of-type {
    
    			#{$self}__circle {
    
    				&::before {
    
    					content: "";
    
    				}
    
    			}
    
    		}
    
    		&:only-of-type {
    
    			#{$self}__stepIcon {
    
    				&::before,
    				&::after {
    
    					content: none;
    
    				}
    
    			}
    
    		}
    
    	}
    	
    	&__circle {
    
    		position: relative;
    
    		&::before {
    
    			content: none;
    			position: absolute;
    			border-radius: map-deep-get($token-radius-map, "circle");
    			z-index: z("zero") - 1;
    			top: 50%;
    			left: 50%;
    			transform: translate(-50%,-50%);
    			width: calc(100% + 8px);
    			height: calc(100% + 8px);
    			background-color: #fff;
    
    		}
    		
    	}
    
    	&__stepIcon {
    
    		display: flex;
    		flex-direction: column;
    		position: relative;
    		z-index: z("zero");
    		padding-top: $step-input-icon-top-offset;
    
    		&::after {
    
    			content: "";
    			position: absolute;
    			z-index: z("negative");
    			top: -(map-deep-get($token-spacer-unit-map, "48"));
    			bottom: -(map-deep-get($token-spacer-unit-map, "48"));
    			left: 50%;
    			transform: translateX(-50%);
    			width: $border-width*2;
    			background-color: $border-color;
    
    		}
    
    	}
    	
    	&__input {
    
    		flex-grow: 1;
    
    	}
    
    
    	/* modifiers */
    
    	// stepInput -altStyle
    	&.-singleItemConnect {
    
    		// follows same logic as base element
    
    		&:only-of-type {
    
    			#{$self}__circle {
    
    				&::before {
    					content: none;
    				}
    
    			}
    
    			#{$self}__stepIcon {
    
    				&::after {
    
    					content: "";
    					top: $step-input-icon-top-offset;
    					bottom: 0;
    					height: auto;
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-noBeneficiary {
    
    		#{$self}__item {
    
    			&:last-of-type {
    
    				#{$self}__stepIcon {
    
    					&::after {
    
    						top: 0;
    						bottom: auto;
    						height: $step-input-icon-top-offset;
    
    					}
    
    					&::before {
    
    						content: none;
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-step-input/_step-input.scss
  • Filesystem Path: components/snet/molecules/step-input/_step-input.scss
  • Size: 3.4 KB