Aeroporto di Bologna - Design System

List search: News Archive 

<div class="c-list-search c-list-search--news-archive c-list-search--inline c-form">

    <div class="c-list-search__input">
        <label for="input-search-news" class="" aria-label="">

            Cerca la notizia <span class="required-marker" aria-hidden="true">*</span>

            <input id="input-search-news" type="text" class="" placeholder="" value="" aria-describedby="input-search-note">

            <p class="c-field__note " id="input-search-news-note">
                Inserisci una o più parole chiave
            </p>

        </label>

        <button type="submit" class="c-button c-button--icon-round c-list-search__button-search-mobile " aria-label="Cerca la notizia"><svg class="c-icon c-icon--18">
                <use xlink:href="#ic_search_black_24px"></use>
            </svg></button>
        <button type="button" class="c-button c-button c-list-search__button-search-desktop" data-toggle="data-toggle">

            Cerca la notizia

        </button>
    </div>

    <p class="middle-text">oppure</p>

    <div class="c-list-search__input">
        <label for="select-news-year" class="" aria-label="">
            Cerca per anno <span class="required-marker" aria-hidden="true">*</span>
            <select id="select-news-year" class="" aria-describedby="select-news-year-note">
                <option value="" disabled selected></option>
                <option value="option-1">2022</option>
                <option value="option-2">2021</option>
                <option value="option-3">2020</option>
                <option value="option-4">2019</option>
            </select>
            <em class="c-field__note " id="select-news-year-note">
                Seleziona l'anno
            </em>
        </label>
    </div>

</div>
 
<div class="c-list-search c-list-search--news-archive {{ modifier }} c-form">

  <div class="c-list-search__input">
    {{> @input input-search }}
    <button type="submit" class="c-button c-button--icon-round c-list-search__button-search-mobile {{submitButtonModifier}}" aria-label="Cerca la notizia">{{> @icon search-icon }}</button>
    {{!-- <button type="submit" class="c-button c-list-search__button-search-desktop {{submitButtonModifier}}" aria-label="Cerca la notizia">Cerca la notizia</button> --}}
    {{> @button btn-search-desktop }}
  </div>

  {{#if middle-text }}
  <p class="middle-text">{{ middle-text }}</p>
  {{/if}}

  <div class="c-list-search__input">
    {{> @select select-year }}
  </div>

</div>
 
{
  "img-path": "/images/svgs/stk_prenotazioni.svg",
  "title": "Le tue prenotazioni",
  "hasSwitcher": true,
  "switcher": {
    "aria-label": "Cerca tra le seguenti sezioni",
    "items": [
      {
        "section": "Parcheggi",
        "number": "(10)",
        "class": "is-active"
      },
      {
        "section": "Lounge",
        "number": "(10)"
      },
      {
        "section": "Voli",
        "number": "(10)"
      }
    ]
  },
  "modifier": "c-list-search--inline",
  "input-search": {
    "label_id": "input-search-news",
    "label_message": "Cerca la notizia",
    "label_class": "",
    "atom-input": {
      "id": "input-search-news",
      "type": "text",
      "class": "",
      "placeholder": "",
      "required": true,
      "hasNote": true,
      "describedby": "input-search-note"
    },
    "note_id": "input-search-news-note",
    "note_message": "Inserisci una o più parole chiave",
    "note_class": ""
  },
  "search-icon": {
    "class": "c-icon c-icon--18",
    "symbol": "ic_search_black_24px"
  },
  "btn-search-desktop": {
    "type": "button",
    "text": "Cerca la notizia",
    "modifier": "c-button c-list-search__button-search-desktop",
    "data-toggle": "data-toggle"
  },
  "middle-text": "oppure",
  "select-year": {
    "label_id": "select-news-year",
    "label_message": "Cerca per anno",
    "label_class": "",
    "atom-select": {
      "id": "select-news-year",
      "class": "",
      "required": true,
      "hasNote": true,
      "describedby": "select-news-year-note",
      "placeholder": null,
      "options": [
        {
          "value": "option-1",
          "text": "2022"
        },
        {
          "value": "option-2",
          "text": "2021"
        },
        {
          "value": "option-3",
          "text": "2020"
        },
        {
          "value": "option-4",
          "text": "2019"
        }
      ]
    },
    "note_id": "select-news-year-note",
    "note_message": "Seleziona l'anno",
    "note_class": ""
  }
}
  • Content: 
    .c-list-search {
  position: relative;

  main & {
    grid-column: main;
  }

  h1 {
    margin-bottom: remify(24px);
  }

  .c-switcher {
    max-width: remify(440px);
  }

}

.c-list-search__input {
  margin-bottom: remify(24px);

  input,
  select {
    width: 100%;
    max-width: remify(360px);
    border: 0;
    @include shadow(small);
    background-color: #fff;
    background-image: url('../../images/svgs/ic_search_blue_24px.svg');
    background-repeat: no-repeat;
    background-position: 96% center;
    border-radius: remify(4px);
    height: remify(48px);
    padding: remify(16px);

    @include placeholder {
      // Heydon Pickering suggestion for placeholders
      color: secondary(text, 100);
      font-size: remify(16px);
      font-style: italic;
      font-weight: fw(regular);
    }

    @include min-screen ( remify(960px) ) {
      width: remify(330px);
    }

  }

  select {
    background-image: url(../images/svgs/arrow-down-blue.svg);
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    padding: 0 remify(16px);

    option:disabled {
      font-weight: fw(regular);
      font-style: italic;
    }

    &:-ms-expand {
      display: none;
    }

  }

  @include min-screen ( remify(960px) ) {
    position: absolute;
    margin-top: 0;
    right: 0;
    top: 0;
  }

}

.c-list-search--orders {
  margin-bottom: remify(24px);
}

/*------------------------------------*\
  Inline modifier
\*------------------------------------*/

.c-list-search--inline {
  padding: remify(16px);

  label {
    margin-bottom: 0;
  }

  input,
  select {
    width: auto;
    max-width: initial;
    border: 0;
    box-shadow: none;
    background-image: none;
    border-radius: remify(4px);
    height: auto;
    padding: inherit;
    text-align: left;
  }

  select {
    padding: 0;
  }

  @include min-screen ( bp(tablet-p) ) {
    display: flex;
    align-items: center;
    padding: remify(24px);
    border-radius: remify(4px);
    justify-content: space-between;
  }

  .c-list-search__input {
    display: flex;
    margin-bottom: remify(16px);
    text-align: left;
    position: relative;

    @include min-screen ( bp(tablet-p) ) {
      margin-top: 0;
      margin-bottom: remify(8px);
      right: initial;
      top: initial;
      flex: auto;
    }

    .c-button,
    .c-button--submit {
      margin-top: remify(4px);
      margin-left: remify(16px);
    }
  }

  .middle-text {
    margin-bottom: remify(16px);
    @include min-screen ( bp(tablet-p) ) {
      margin: 0 remify(40px);
      text-align: center;
      display: block;
    }
  }

  .c-list-search__extra {

    @include min-screen ( bp(tablet-p) ) {
      display: flex;
      justify-content: flex-start;
      text-align: left;
      margin-left: auto;
      margin-top: 0;
      margin-bottom: remify(16px);

      &:last-child {
        margin-bottom: 0;
      }

      & img {
        display: block;
      }
    }

    .c-media {
      justify-content: center;

      .c-media__body {
        flex-grow: 0;
      }

    }
  }

}

.c-list-search--center {

  .c-list-search__input {
    justify-content: center;
  }

  .c-list-search__input label {
    width: 100%;
    max-width: remify(680px) ;
  }

}

/*------------------------------------*\
  Shifted top modifier
\*------------------------------------*/

// .c-list-search--shiftedTop {
//   @include min-screen( bp(tablet-p) ) {
//     margin-top: remify(-88px);
//   }
// }

/*------------------------------------*
  News Archive
*------------------------------------*/
.c-list-search--news-archive {

  .c-list-search__input {
    flex: 1;
    display: block;

    @include min-screen(bp(phone-p)) {
      display: flex;
    }
  }

  .c-list-search__input .c-button {
    align-self: center;
  }

  .c-list-search__input .c-list-search__button-search-desktop {
    margin-left: 0;
    margin-top: remify(24px);
    width: 100%;
    
    @include min-screen(bp(phone-p)) {
      display: none;
    }
  }

  label {
    width: 100%;
  }

  .c-list-search__button-search-mobile {
    @include max-screen(bp(phone-p)) {
      display: none;
    }
  }

  .middle-text {
    text-align: center;
  }

}


/*------------------------------------*
  Photogallery
*------------------------------------*/
.c-list-search--photogallery {

  width: 100%;

  label {
    width: 100%;
  }

  select {
    @include min-screen(bp(phablet)) {
      min-width: remify(400px);
    }
  }

}
  • URL: /components/raw/list-search/_list-search.scss
  • Filesystem Path: src/views/03-organisms/list-search/_list-search.scss
  • Size: 4.5 KB

No notes defined.