DIA Frontend

Search 

<div class="search">
    <form name="search" class="search__form form-inline" action="#">
        <label class="search__label" for="input235">

            <svg class="search__icon" height="20px" width="20px">
                <use href="../../common/img/svg/symbolSprite.svg#streamline-icon-search"></use>
            </svg>
        </label>
        <input class="search__control form-control" id="input235" placeholder="Search" />
        <button class="search__submit" type="submit" name="search" value="">

            <svg class="search__submit__icon" height="20px" width="20px">
                <use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
            </svg>
        </button>
    </form>
</div>
 
{% set CType = 'search' %}

{% set uid = random(999) %}
{% set type = type|default('text') %}

{% set attributes = [] %}

{% if placeholder %}
    {% set attributes =
        attributes|merge([' placeholder="' ~ placeholder ~ '"'])
    %}
{% endif %}

{% if additionalAttributes %}
    {% for attribute in additionalAttributes %}
        {% for key, value in attribute %}
            {% set attributes =
                attributes|merge([' ' ~ key ~ '="' ~ value ~ '"'])
            %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% if class %}
    {% set classes = ' ' ~ class %}
{% endif %}

{% block main %}
    <div class="search{{ classes }}">
        <form name="search" class="search__form form-inline" action="#">
            <label class="search__label" for="input{{ uid }}">
                {% include '@atom-icon' with {
                    class: 'search__icon',
                    icon: 'streamline-icon-search',
                    width: '20px',
                    height: '20px'
                } %}
            </label>
            <input class="search__control form-control"
                id="input{{ uid }}"
                {{ attributes|join }} />
            <button class="search__submit" type="submit" name="search" value="">
                {% include '@atom-icon' with {
                    class: 'search__submit__icon',
                    icon: 'streamline-icon-keyboard-arrow-right',
                    width: '20px',
                    height: '20px'
                } %}
            </button>
        </form>
    </div>
{% endblock %}
 
{
  "name": "name",
  "pattern": null,
  "placeholder": "Search",
  "textarea": null,
  "type": null,
  "class": null,
  "additionalAttributes": null
}
  • Content: 
    .search {
  display: flex;
  padding: 5px 10px;
  color: $black;
  background-color: $gray-200;

  &__form {
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  &__label {
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  &__icon {
    display: block;
  }

  &__control {
    flex: 1 1 auto;
    padding: 0 10px;
    background: none;
    border: none;
    border-radius: 0;

    &:focus {
      box-shadow: none;
    }
  }

  &__submit {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: none;

    &__icon {
      display: block;
    }
  }
}
  • URL: /components/raw/atom-search/_style.scss
  • Filesystem Path: ../template/components/01-atoms/search/_style.scss
  • Size: 617 Bytes

No notes defined.