Foehn Design System

Search Form: Default 

<form class="input-group vd-search-form" action="#" role="search">
    <label class="sr-only" for="search-form" id="search-form-label">Champ de recherche</label>
    <input id="search-form" type="text" class="form-control" placeholder="Rechercher" aria-describedby="search-form-label">
    <span class="input-group-btn">
        <button class="btn" type="submit" aria-label="Rechercher">
            <i class="fas fa-search" aria-hidden="true"></i>
        </button>
    </span>
</form>
 
<form class="input-group vd-search-form{% if styleModifier %} {{ styleModifier }}{% endif %}" action="#" role="search">
  <label class="sr-only" for="search-form" id="search-form-label">
  {%- if label -%}
    {{ label }}
  {%- else -%}
    Champ de recherche
  {%- endif -%}
  </label>
  <input id="search-form"
         type="text"
         class="form-control"
         {%- if placeholder %} placeholder="{{ placeholder }}" {% endif -%}
         {%- if pattern %} pattern="{{ pattern }}" {% endif -%}
         aria-describedby="search-form-label">
  <span class="input-group-btn">
    <button class="btn" type="submit" aria-label="Rechercher">
      <i class="fas fa-search" aria-hidden="true"></i>
    </button>
  </span>
</form>
 
{
  "heading": {
    "text": "Rechercher dans les actualités",
    "level": "h4"
  },
  "placeholder": "Rechercher",
  "options": {
    "id": "fieldset",
    "legend": "Legend",
    "items": [
      {
        "label": "Cras sed ligula eu est cursus eleifend ut id turpis",
        "name": "example",
        "id": "exampleOption1",
        "checked": true
      },
      {
        "label": "Fusce feugiat quam vel tellus malesuada, sit amet maximus justo hendrerit",
        "name": "example",
        "id": "exampleOption2"
      },
      {
        "label": "Aenean id est non dui porttitor euismod",
        "name": "example",
        "id": "exampleOption3"
      },
      {
        "label": "Phasellus dignissim metus quis blandit varius",
        "name": "example",
        "id": "exampleOption4",
        "disabled": true
      }
    ],
    "type": "checkbox"
  },
  "label": "Champ de recherche"
}
  • Content: 
    @charset 'UTF-8';

/**
 * regular search form
 *
 * 1. fix padding problem with padding group button http://d.pr/i/ObEPO8
 *    see also CCWEB-9943
 */
.vd-search-form-regular {
  ::placeholder {
    font-style: italic;
  }

  > .form-control {
    margin-left: 0 !important;
  }

  .btn {
    background: $vd-primary-dark;
    border-color: $vd-primary-dark;
    color: $white;

    &,
    .svg-inline--fa {
      color: $white;
    }

    &:hover {
      background: shade-color($vd-primary, 10%);
      border-color: shade-color($vd-primary, 10%);
    }
  }

  .input-group-btn > .btn {
    height: 2.375rem;
  }

  @media print {
    display: none;
  }
}

.vd-search-form {
  display: flex;
  border-top: 4px solid $black;
  border-bottom: 4px solid $black;
  margin-bottom: $spacer;

  .form-control {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    border-color: transparent;
    transition:
      padding 0.11s ease-in,
      border 0.11s;

    &:focus {
      padding-left: $input-btn-padding-y;
      border: 2px solid $vd-focus;
      box-shadow: none;
    }
  }

  .input-group-btn {
    width: auto;
  }

  .input-group-btn > .btn {
    padding: 0.365rem 0.8rem;
    background: $vd-primary-dark;

    &,
    .svg-inline--fa {
      color: $white;
    }

    &:hover {
      background: shade-color($vd-primary, 10%);
    }
  }

  ::placeholder {
    font-style: italic;
  }

  @media print {
    display: none;
  }
}
  • URL: /components/raw/search-form/_search-form.scss
  • Filesystem Path: src/components/01-atoms/search-form/_search-form.scss
  • Size: 1.4 KB

The main search form, the one we use in the header. .vd-search-form.

The regular variant is used in other parts of the website. .vd-search-form-regular