Foehn Design System

Search Form: Regular Options 

<h4></h4>

<form action="#" role="search">
    <div class="input-group vd-search-form-regular mb-3">
        <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 btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
        </span>
    </div>

    <fieldset class="form-group">
        <legend>Legend</legend>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="exampleOption1" name="example" checked>
            <label class="form-check-label" for="exampleOption1">
                Cras sed ligula eu est cursus eleifend ut id turpis
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="exampleOption2" name="example">
            <label class="form-check-label" for="exampleOption2">
                Fusce feugiat quam vel tellus malesuada, sit amet maximus justo hendrerit
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="exampleOption3" name="example">
            <label class="form-check-label" for="exampleOption3">
                Aenean id est non dui porttitor euismod
            </label>
        </div>

        <div class="form-check disabled">
            <input class="form-check-input" type="checkbox" value="" id="exampleOption4" name="example" disabled>
            <label class="form-check-label" for="exampleOption4">
                Phasellus dignissim metus quis blandit varius
            </label>
        </div>

    </fieldset>

</form>
 
<h4{% if titleModifier %} class="{{ titleModifier }}"{% endif %}>{{ title }}</h4>

<form action="#" role="search">
  <div class="input-group vd-search-form-regular mb-3">
    <label class="sr-only" for="search-form" id="search-form-label">{{ label }}</label>
    <input id="search-form" type="text" class="form-control" {% if  placeholder %}placeholder="{{ placeholder }}"{% endif %} aria-describedby="search-form-label">
    <span class="input-group-btn">
      <button class="btn btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
    </span>
  </div>
  {% render '@fieldset--checkbox', options %}
</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