Search

Behaviour and classes

The -isFocused class is used to give the shadow to the search. It is toggled through javascript. As long as the focus is on the input or one of the buttons contained within the nav, the class should remain present.

The modifier classes are as follow:

  • -isFocused: the search enters an "active" state
  • -clearActive: the clear button is shown
  • -performSearchVisible: The search button is visible
  • -small: Smaller height and smaller buttons (that each have their own component modifier classes)
  • inverted: inverted color scheme
<!-- Default -->
<div class="sds-search">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Focused -->
<div class="sds-search -isFocused">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Search Query -->
<div class="sds-search -clearActive">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

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

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Loading -->
<div class="sds-search -clearActive">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost" disabled>

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

                </button>
            </div>

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

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1" disabled>

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

                </button>

            </div>

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

<!-- Search Result Displayed -->
<div class="sds-search -clearActive -performSearchVisible">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Search Result Displayed Filters Active -->
<div class="sds-search -clearActive -performSearchVisible">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary -isActive -hasNotifications" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Small -->
<div class="sds-search -clearActive -small">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

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

<!-- Small All Actions -->
<div class="sds-search -clearActive -small">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

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

                </button>
            </div>

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

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

                </button>
            </div>

            <div class="sds-search__filters">

                <button type="button" class="sds-btn -iconBtn -btnSecondary -smaller" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">

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

                </button>

            </div>

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

<!-- Inverted -->
<div class="sds-search -clearActive -inverted">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

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

<!-- Inverted Tab Filters -->
<div class="sds-search -clearActive -inverted">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>
            <div class="sds-btnGroup" data-toggle-visibility-at="">
                <div class="sds-toggleTab -light">
                    <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">

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

                    </label>
                    <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">

                        <span class="sds-btn__text">S-Bank</span>

                    </label>
                </div>
                <div class="dropdown">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -hasNotifications" data-offset="0,8" data-toggle="dropdown">

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

                    </button>
                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">

                        <div class="dropdown-item">
                            <div class="sds-checkbox custom-control custom-checkbox">
                                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-0-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                <label class="custom-control-label" for="action-menu-checkbox-0-base">Check this custom checkbox</label>

                                <div class="sds-checkbox__error invalid-feedback">Error message</div>
                            </div>
                        </div>

                        <div class="dropdown-item">
                            <div class="sds-checkbox custom-control custom-checkbox">
                                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-1-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                <label class="custom-control-label" for="action-menu-checkbox-1-base">Check this custom checkbox</label>

                                <div class="sds-checkbox__error invalid-feedback">Error message</div>
                            </div>
                        </div>

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

<!-- Language Selector -->
<div class="sds-search -clearActive">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>

            <div class="sds-languageSwitcher dropdown -searchModal -filtersActive">
                <button type="button" class="sds-btn -btnSecondary" data-search-modal-search-filter-btn="" data-toggle="dropdown" data-display="static" aria-expanded="false">

                    <span class="sds-btn__text">Refine search</span>

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

                        02
                    </div>

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

                </button>
                <div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
                    <div class="sds-stackMd">
                        <div class="row row-xs col-separator">
                            <div class="col-sm-6">
                                <fieldset>
                                    <legend>
                                        <span class="dropdown-header">Langue</span>
                                    </legend>
                                    <ul class="list-unstyled">
                                        <li lang="fr">
                                            <label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
                                                <input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr" checked><span class="sds-radioDot " aria-hidden="true"></span>

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

                                                    <img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">

                                                </div>
                                                <span>Français</span>
                                            </label>
                                        </li>
                                        <li lang="de">
                                            <label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
                                                <input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>

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

                                                    <img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">

                                                </div>
                                                <span>Deutsch</span>
                                            </label>
                                        </li>
                                        <li lang="en">
                                            <label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
                                                <input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>

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

                                                    <img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">

                                                </div>
                                                <span>English</span>
                                            </label>
                                        </li>
                                    </ul>
                                </fieldset>

                            </div>
                            <div class="col-sm-6">
                                <fieldset>
                                    <legend>
                                        <span class="dropdown-header">Par type</span>
                                    </legend>
                                    <ul class="list-unstyled">
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-1"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-1">Tous</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-2"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-2">Page</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Article Blog</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Info</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Guide</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Document</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Agence</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Événement</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown-item">
                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                    <label class="custom-control-label" for="search-modal-filter-checkbox-3">Partenaire</label>

                                                    <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                        <button type="button" class="sds-btn -btnSecondary -block">

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

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

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

<!-- Default -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Focused -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Search Query -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Loading -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Search Result Displayed -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Search Result Displayed Filters Active -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Small -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Small All Actions -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Inverted -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>

<!-- Inverted Tab Filters -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			<div class="{{ namespace }}btnGroup" data-toggle-visibility-at="{{ breakpoint }}">
				{% render "@toggle-tab",{
					toggleTabBtn1Text: "Agences",
					toggleTabBtn2Text: "S-Bank",
					classes: ["-light"]
				},true %}
				<div class="dropdown">
					{% render "@icon-btn-secondary-inverse",{
						icon: "icon-filter",
						classes: ["-hasNotifications"],
						"attrs": {
							"data-offset": "0,8",
							"data-toggle": "dropdown"
						}
					},true %}
					{% render "@snet-action-menu--checkboxes",{
						modifiers: ["dropdown-menu-right"],
						checkboxes: checkboxes
					},true %}
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Language Selector -->
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			{% if advancedActions %}
				{% if searchBtn %}
				<div class="{{ namespace }}search__searchBtn">
					{% render "@btn-secondary",searchbtnOptions,true %}
				</div>
			{% endif %}
			{% if langSwitcher %}
			{% render "@spk-language-switcher--search-modal",{
				classes: ["-filtersActive"]
			},true %}
			{% endif %}
			{% if filtersActive or filters %}
			<div class="{{ namespace }}search__filters">
				{% if filtersActive %}
					{% render "@icon-btn-secondary--notification-active", {
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% elseif filters %}
					{% render "@icon-btn-secondary", {
						classes: filterBtnClasses,
						icon: "icon-tablesetup",
						disabled: filtersBtnDisabled,
						attrs: filterAttrs
					},true %}
				{% endif %}
			</div>
			{% endif %}
			{% endif %}
		</div>
	</div>
</div>
  • Content:
    export default class SDSSearch {
    	constructor() {
    
    		this.focusToggle();
    
    	}
    
    	focusToggle() {
    
    		let searches = document.querySelectorAll(".sds-search");
    
    		searches.forEach((element, index) => {
    
    			element.querySelectorAll("button").forEach((btnElt, index) => {
    
    				btnElt.addEventListener("focus", (e) => {
    
    					if (e.currentTarget === document.activeElement) {
    
    						e.currentTarget.closest(".sds-search").classList.add("-isFocused")
    
    					}
    
    				})
    
    				btnElt.addEventListener("blur", (e) => {
    
    					e.currentTarget.closest(".sds-search").classList.remove("-isFocused")
    
    				})
    
    			})
    
    			element.querySelector(".sds-search__input").addEventListener("blur", (e) => {
    
    				e.currentTarget.closest(".sds-search").classList.remove("-isFocused");
    
    			})
    
    			element.querySelector(".sds-search__input").addEventListener("focus", (e) => {
    				e.currentTarget.closest(".sds-search").classList.add("-isFocused")
    			})
    
    		})
    
    	}
    
    }
    
  • URL: /components/raw/search/SDSSearch.js
  • Filesystem Path: components/base-components/atoms/forms/search/SDSSearch.js
  • Size: 933 Bytes
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $search-input-height-large:  map-deep-get($token-sizes-unit-map, "56");
    
    .#{$namespace}search {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	flex-grow: 1;
    	border-radius: map-deep-get($token-radius-map, "32");
    	position: relative;
    	z-index: z("zero");
    
    	/* 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 */
    
    	// search__inner
    	&__inner {
    
    		display: flex;
    		align-items: center;
    		padding-left: $input-padding-x*2;
    		padding-right: $input-padding-x;
    		border-radius: inherit;
    		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    		@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
    		border: 0;
    		height: $search-input-height-large;
    
    		position: relative;
    
    		&::after {
    
    			content: "";
    			display: block;
    			position: absolute;
    			z-index: z("negative");
    			top: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    			box-shadow: map-deep-get($token-shadow-map, "active");
    			opacity: 1;
    			transition: opacity 0.25s linear;
    			border-radius: inherit;
    
    		}
    
    	}
    
    	// search__input
    	&__input {
    
    		// follows same logic as parent
    
    		background-color: transparent !important;
    		height: auto;
    		border: none;
    		border-radius: inherit;
    
    	}
    
    	&__actions {
    
    		display: flex;
    		align-items: center;
    		flex-shrink: 0;
    		@include spacer-component-inline("sm");
    
    	}
    
    	&__searchIcon {
    
    		@include custom-prop-fallback("color","sys-color-text-primary-muted");
    
    	}
    
    	&__clear,
    	&__searchBtn {
    
    		display: none;
    
    	}
    
    	/* modifiers */
    
    	&.-isFocused.-isFocused  {
    
    		#{$self}__inner {
    
    			@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    			@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
    
    			&::after {
    
    				opacity: 1;
    
    			}
    
    		}
    
    	}
    
    	&.-clearActive {
    
    		#{$self}__clear,
    		#{$self}__searchBtn {
    
    			display: inline-flex;
    
    		}
    
    	}
    
    	&.-performSearchVisible {
    
    		#{$self}__searchBtn {
    
    			display: none;
    
    		}
    
    	}
    
    	&.-inverted {
    
    		#{$self}__inner {
    
    			@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
    
    			&::after {
    
    				opacity: 0;
    
    			}
    
    		}
    
    	}
    
    	&.-small {
    
    		#{$self}__inner {
    
    			height: $input-height;
    			padding-right: $input-padding-x;
    
    		}
    
    		#{$self}__actions {
    			//@include spacer-component-inline("xs");
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/search/_search.scss
  • Filesystem Path: components/base-components/atoms/forms/search/_search.scss
  • Size: 2.9 KB