Search Growing: Default

When closing search after clicking on its Recherche button, remove the -searchInitiated class as well.
<div class="sds-searchGrowing">
    <button type="button" class="sds-btn -btnSecondary sds-searchGrowing__btn js-searchGrowing">

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

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

    </button>
    <div class="sds-searchGrowing__search">
        <div class="sds-searchGrowing__searchInner">
            <span class="sds-searchGrowing__icon sds-icon sds-icon-search"></span>
            <div class="sds-input">
                <input id="" class="sds-input form-control sds-searchGrowing__input" type="text" placeholder="Recherche" value="">

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

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

            </button>
        </div>
    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-searchGrowing__btnClose js-searchGrowingClose">

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

    </button>
</div>
<div class="{{ namespace }}searchGrowing{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% render '@btn-secondary--icon-left',{
        classes: [namespace + "searchGrowing__btn", "js-searchGrowing"],
        text: "Recherche",
        icon: "icon-search"
    }, true %}
    <div class="{{ namespace }}searchGrowing__search">
        <div class="{{ namespace }}searchGrowing__searchInner">
            <span class="{{ namespace }}searchGrowing__icon {{ namespace}}icon {{ namespace}}icon-search"></span>
            {% render '@input',{
                placeholder: "Recherche",
                classes: [namespace + "searchGrowing__input"],
				value: value
            }, true %}
            {% render '@btn-secondary',{
                classes: [namespace + "searchGrowing__btnSmall"],
                text: "Recherche"
            }, true %}
        </div>
    </div>
    {% render '@icon-btn-secondary--smaller',{
        classes: [namespace + "searchGrowing__btnClose",  "js-searchGrowingClose"],
        icon: "icon-cross"}, true %}
</div>
  • Content:
    export default class SearchGrowing {
    
        constructor() {
            this.SearchGrowing();
        }
    
        SearchGrowing () {
    
            const btn = document.querySelector(".js-searchGrowing");
            const btnClose = document.querySelector(".js-searchGrowingClose");
            const search = document.querySelector(".sds-searchGrowing");
    
    
            btn.addEventListener("click", () => {
                search.classList.toggle('-open');
            })
            btnClose.addEventListener("click", () => {
                search.classList.toggle('-open');
            })
    
        }
    
    }
    
  • URL: /components/raw/snet-search-growing/SearchGrowing.js
  • Filesystem Path: components/snet/molecules/search-growing/SearchGrowing.js
  • Size: 551 Bytes
  • Content:
    /* variables specific to current element */
    
    $padding-right-input: calc(map-deep-get($token-spacer-unit-map, "64") + map-deep-get($token-spacer-unit-map, "40"));
    
    .#{$namespace}searchGrowing {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    
    	/* properties of current element  + media queries */
    	position: relative;
    	display: inline-flex;
    	align-items: center;
    	justify-content: flex-end;
    	width: auto;
    	height: $input-height;
    
    	/* 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 */
    
    	// searchGrowing__childElement
    	&__btn {
    
    		z-index: z("low");
    
    	}
    
    	&__btnSmall {
    
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
    		font-size: map-deep-get($token-font-size-map, "body", "xs");
    		max-height: map-deep-get($token-spacer-unit-map, "32");
    		min-height: map-deep-get($token-spacer-unit-map, "32");
    		position: absolute;
    		right: map-deep-get($token-spacer-unit-map, "4");
    		top: 50%;
    		transform: translateY(-50%);
    
    	}
    
    	&__search {
    
    		position: absolute;
    		top: 50%;
    		right: 0;
    		transform: translateY(-50%);
    		width: auto;
    		transition: all .3s ease-out;
    
    	}
    
    	&__searchInner {
    
    		position: relative;
    
    	}
    
    	&__icon {
    
    		position: absolute;
    		z-index: z("low");
    		left: map-deep-get($token-spacer-unit-map, "8");
    		top: 50%;
    		transform: translateY(-50%);
    		color: map-deep-get($token-color-brand-map, "secondary", "60");
    
    	}
    
    	&__input {
    
    		height: map-deep-get($token-spacer-unit-map, "40");
    		border-radius: map-deep-get($token-radius-map, "button-small");
    		border-bottom: 0;
    		background-color: map-deep-get($token-color-brand-map, "secondary", "10");
    		padding-left: map-deep-get($token-spacer-unit-map, "48");
    
    		&:focus {
    
    			background-color: map-deep-get($token-color-brand-map, "secondary", "10");
    
    		}
    
    	}
    
    	&__btnClose {
    
    		position: absolute;
    		right: 0;
    		top: 50%;
    		transform: translateY(-50%);
    		transition: all 0.3s ease-out;
    
    		[class*="icon"]::before {
    
    			font-size: map-deep-get($token-font-size-map, "body", "xl");
    
    		}
    
    	}
    
    	&__search,
    	&__btnClose {
    
    		visibility: hidden;
    
    	}
    
    
    	/* modifiers */
    
    	// searchGrowing -open
    	&.-open {
    
    		//width: 320px;
    		transition: all .3s ease-out;
    
    		#{$self}__btn {
    
    			display: none;
    
    		}
    
    		#{$self}__search {
    
    			width: 328px;
    			padding-right: map-deep-get($token-spacer-unit-map, "48");
    
    		}
    
    		#{$self}__input {
    
    			padding-right: $padding-right-input;
    
    		}
    
    		#{$self}__btnClose {
    
    			right: 0;
    			transform: translate(-15%,-50%);
    
    		}
    
    		#{$self}__search,
    		#{$self}__btnClose {
    
    			visibility: visible;
    
    		}
    
    	}
    
    	&.-searchInitiated {
    		#{$self}__btnClose {
    			background-color: map-deep-get($token-color-grayscale-map, "0");
    		}
    	}
    
    	&.-bgWhite {
    
    		#{$self}__input {
    
    			background-color: map-deep-get($token-color-grayscale-map, "0");
    			border: $border-width*2 solid $border-color;
    
    		}
    
    	}
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-search-growing/_search-growing.scss
  • Filesystem Path: components/snet/molecules/search-growing/_search-growing.scss
  • Size: 3.3 KB