Joran design system

Search Input: With Selectors 

<div class="o-container">
    <form class="c-search-input" action="#">
        <div class="c-search-input__row c-content--with-selectors">
            <label for="search" class="u-visually-hidden">Recherche</label>
            <input id="search" class="c-search-input__field" type="search">
        </div>

        <div class="c-search-select__row">
            <label for="filter-1" class="u-visually-hidden">Filtrer par publication</label>
            <select id="filter-1" class="c-search-select">
                <option>Choisir une publication</option>
                <option>Une publication avec un titre</option>
                <option>Une seconde publication</option>
            </select>
        </div>
        <div class="c-search-select__row c-search-select__last">
            <label for="filter-2" class="u-visually-hidden">Filtrer par année</label>
            <select id="filter-2" class="c-search-select">
                <option>Choisir une année</option>
                <option>2021</option>
                <option>2020</option>
                <option>2019</option>
            </select>
        </div>

        <button type="submit" class="c-search-input__button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M19 19l-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </button>
    </form>
</div>
 
<div class="o-container">
  <form class="c-search-input{% if styleModifier %} {{ styleModifier }}{% endif %}" 
        action="#">
        <div class="c-search-input__row{% if selectors %}{{ styleWithSelectors }}{% endif %}">
          <label for="search" class="u-visually-hidden">Recherche</label>
          <input id="search" class="c-search-input__field" type="search">
        </div>
        {% if selectors %}
        <div class="c-search-select__row">
          <label for="filter-1" class="u-visually-hidden">Filtrer par publication</label>
          <select id="filter-1" class="c-search-select">
            <option>Choisir une publication</option>
            <option>Une publication avec un titre</option>
            <option>Une seconde publication</option>
          </select>
        </div>
        <div class="c-search-select__row c-search-select__last">
          <label for="filter-2" class="u-visually-hidden">Filtrer par année</label>
          <select id="filter-2" class="c-search-select">
            <option>Choisir une année</option>
            <option>2021</option>
            <option>2020</option>
            <option>2019</option>
          </select>
        </div>
        {% endif %}
        <button type="submit" class="c-search-input__button">
          {% render '@svg-search' %}
        </button>
    </form>
</div>
 
{
  "selectors": true,
  "styleWithSelectors": " c-content--with-selectors"
}
  • Content: 
    /* ======================================================================
   # _components.search-input.css
   ====================================================================== */

/**
 *  1. Place the magnifier
 */
.c-search-input {
  @apply
    relative
    text-base
    md:w-full
    md:flex
    ;
}

.c-search-input__row {
  @apply
    w-full;
}

.c-search-input__field {
  @apply
    shadow
    appearance-none
    border
    rounded
    w-full
    py-4
    px-6
    leading-tight
    pl-16
    text-primary
    focus:outline-focus
    ;
}

/**
 *  2. Select
 */
.c-search-select__row {
  @apply
    w-full
    ;
}

.c-search-select {
  @apply
    w-full
    mb-3
    text-primary
    ;
}

.c-search-select option {
  @apply
    text-primary
    ;
}

.c-content--with-selectors {
  @apply
    w-full
    block
    mb-3
    ;
}

/**
 *  3. Search button
 */
.c-search-input__button {
  @apply
    absolute
    left-0
    top-0
    mt-5
    ml-6
    text-primary
    ;

  svg {
    height: 1em;
  }
}

.c-search-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  background-color: #fff;
  appearance: none;

  @apply
    bg-no-repeat
    shadow
    border
    leading-tight
    rounded
    p-4
    md:py-4
    md:px-1
    ;
}

@screen md {
  .c-search-select__row {
    @apply
      w-1/3
      px-3
      ;
  }

  .c-search-select__row.c-search-select__last {
    @apply
      w-1/3
      ;
  }

  .c-content--with-selectors {
    @apply
      w-1/2
      mb-6
      mb-0
      pr-3
      ;
  }

  .c-search-select {
    @apply
      px-4
      mb-0
      ;
  }
}
  • URL: /components/raw/search-input/_components.search-input.css
  • Filesystem Path: src/components/04-Components/search/search-input/_components.search-input.css
  • Size: 1.9 KB

No notes defined.