Aeroporto di Bologna - Design System

List search: Static 

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

    <header data-centered>
        <img src="../../images/svgs/stk_prenotazioni.svg" alt="Le tue prenotazioni" aria-hidden="true" width="48">
        <h1>Le tue prenotazioni</h1>

        <ul class="c-switcher" aria-label="Cerca tra le seguenti sezioni">

            <li class="is-active">
                <a href="#">Parcheggi <strong>(10)</strong></a>
            </li>
            <li>
                <a href="#">Lounge <strong>(10)</strong></a>
            </li>
            <li>
                <a href="#">Voli <strong>(10)</strong></a>
            </li>

        </ul>
    </header>

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

  <header data-centered>
    <img src="{{ path img-path }}" alt="Le tue prenotazioni" aria-hidden="true" width="48">
    <h1>{{ title }}</h1>

    {{#if hasSwitcher}}
      {{> @switcher switcher }}
    {{/if}}
    
  </header>

</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)"
      }
    ]
  }
}
  • 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.