Aeroporto di Bologna - Design System

Expanded search 

<div class="c-expanded-search ">

    <form class="c-expanded-search__searchWrapper c-form">

        <label for="search-field" class="  has-button" aria-label="">
            Cerca nel sito
            <input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
            <button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
                <svg class="c-icon c-icon--18">
                    <use xlink:href="#ic_search_black_24px"></use>
                </svg> </button>
            <datalist id="search-destinations">
                <option value="Check in A">
                <option value="Check in B">
                <option value="Check in C">
                <option value="Accettazione">
                <option value="Cafè">
                <option value="Bagagli">
                <option value="Bar centrale">
            </datalist>
            <p class="c-field__note " id="search-field-note">
                Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc &hellip;
            </p>
        </label>
        <p class="c-expanded-search__search-flight">
            <a href="../preview/page-arrivals-departures--default.html">Stai cercando un volo?→</a>
        </p>

        <div class="c-search-suggestions">

            <h3>Potrebbero esserti utili</h3>

            <ul class="c-search-suggestions__list">

                <li class="c-search-suggestions__item">
                    <a href="#">Ultimi aggiornamenti covid <span aria-hidden="true">&#8594;</span></a>
                </li>
                <li class="c-search-suggestions__item">
                    <a href="#">Parcheggia in aeroporto <span aria-hidden="true">&#8594;</span></a>
                </li>
                <li class="c-search-suggestions__item">
                    <a href="#">Contatti e supporto <span aria-hidden="true">&#8594;</span></a>
                </li>
                <li class="c-search-suggestions__item">
                    <a href="#">Fast track <span aria-hidden="true">&#8594;</span></a>
                </li>
            </ul>

        </div>

    </form>

    <button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
        Chiudi
        <svg class="c-icon c-icon--18">
            <use xlink:href="#ic_close_black_24px"></use>
        </svg> </button>

</div>
 
<div class="c-expanded-search {{ modifier }}">
  
  {{!-- <button type="button" class="c-expanded-search__close js-closeExpandedSearch" aria-label="Chiudi la ricerca" tabindex="0">Chiudi {{> @icon class="c-icon c-icon--18" symbol="ic_close_black_24px"}}</button> --}}

  <form class="c-expanded-search__searchWrapper c-form">
    
    {{> @autocomplete search-field }}

    <p class="c-expanded-search__search-flight">
      <a href="{{ path '/components/preview/page-arrivals-departures--default' }}">Stai cercando un volo?→</a>
    </p>

    {{ render "@search-suggestions" }}

  </form>
 
  <button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
    Chiudi
    {{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--18" }}
  </button>

</div>
 
{
  "search-field": {
    "label_id": "search-field",
    "label_message": "Cerca nel sito",
    "label_class": null,
    "atom-input": {
      "id": "search-field",
      "type": "text",
      "class": null,
      "placeholder": "",
      "required": false,
      "hasNote": true,
      "describedby": "search-field-note",
      "hasSubmitButton": true
    },
    "search-icon": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_search_black_24px"
    },
    "autocomplete": {
      "datalist-id": "search-destinations",
      "prefix-class": "combobox",
      "case-sensitive": "no",
      "search-option": "containing",
      "help-text": "Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti.",
      "options": [
        {
          "value": "Check in A"
        },
        {
          "value": "Check in B"
        },
        {
          "value": "Check in C"
        },
        {
          "value": "Accettazione"
        },
        {
          "value": "Cafè"
        },
        {
          "value": "Bagagli"
        },
        {
          "value": "Bar centrale"
        }
      ]
    },
    "note_id": "search-field-note",
    "note_message": "Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc &hellip;",
    "note_class": ""
  }
}
  • Content: 
    .c-expanded-search {
  position: fixed;
  background: rgba(primary(night,100), 0.80);
  width: 100vw;
  height: 100vh;
  // z-index: $zIndex-expandedSearch;
  top: remify(68px);
  left: 0;
  top: 0;
  // display: none;
  padding: remify(16px);

  @include min-screen(bp(tablet-p)) {
    // top: 0px;
  }

  &.is-visible {
    // display: block;
  }

}

.c-expanded-search__close {
  color: #fff;
  text-decoration: none;
  // font-size: remify(32px);
  position: absolute;
  top: remify(16px);
  right: remify(24px);
  -webkit-appearance: none;
  background-color: transparent;
  border: none;

  &:focus {
    @include outline;
  }

  svg {
    vertical-align: text-bottom;

    * {
      fill: #fff;
    }
  }

}

.c-expanded-search__searchWrapper {
  color: #fff;
  max-width: remify(800px);
  margin: remify(32px) auto 0;

  &>* {
    display: block;
  }

  label,
  .c-field__note,
  .c-field__note strong {
    color: #fff;
  }

  input#search-field:focus {
     @include outline;
  }
}

.c-expanded-search__searchInput {
  padding-left: remify(40px);
  padding-right: remify(8px);
  background-color: secondary(soft, 100);
  background-image: url('../../images/svgs/ic_search_grey_24px.svg');
  background-repeat: no-repeat;
  background-position: 1% center;
  border: 1px solid primary(night, 20);
  border-radius: remify(4px);
  height: remify(32px);
  color: secondary(text, 100);
  width: 100%;
  // max-width: remify(300px);
  height: remify(40px);

  &:focus {
    background-color: #ffffff;
    border: 1px solid #fff;
  }

}

.c-expanded-search__search-flight {
  color: #fff;

  a { color: #fff; }

  @include min-screen(bp(tablet)) {
    font-size: remify(12px);
    text-align: right;
    position: relative;
    top: remify(-40px);
  }
}

.c-expanded-search__extras {
  padding-top: 48px;
  @include min-screen(bp(tablet)) { 
    padding-top: 16px;
  }
}

.c-expanded-search__suggested-links {
  li { margin-bottom: remify(16px); }
  a { color: #fff; }
}

/*------------------------------------*\
  Mobile modifier
\*------------------------------------*/

.c-expanded-search--mobile {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  background: transparent;
  width: 100%;
  height: auto;
  padding: 0;

  .c-expanded-search__close {
    display: none;
  }

  .c-expanded-search__searchWrapper {
    max-width: 80vw;
    margin: 0;
    margin-bottom: remify(24px);
  }

}
  • URL: /components/raw/expanded-search/_expanded-search.scss
  • Filesystem Path: src/views/03-organisms/expanded-search/_expanded-search.scss
  • Size: 2.4 KB

No notes defined.