Step Input: Three

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">
                    Label

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

                </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">
                    Label

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

                </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">
                    Label

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

                </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" %}
				{% render "@input" %}
			</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" %}
				{% render "@input" %}
			</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" %}
				{% render "@input" %}
			</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