Aeroporto di Bologna - Design System

Datefinder 

<div class="c-datefinder c-form" aria-label="Seleziona il periodo di date in cui vuoi cercare">

    <div class="c-datefinder__field">
        <label for="input-search-code" class="" aria-label="">

            Numero di prenotazione

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

            <p class="c-field__note " id="input-search-code-note">
                Cerca tramite il codice di prenotazione
            </p>

        </label>

    </div>

    <div class="u-px-space-16">
        oppure
    </div>

    <div class="c-datefinder__field">
        <label for="input-date-from" class="is-datepicker" aria-label="Inserisci una data">

            Periodo dal

            <input id="input-date-from" type="date" class="" placeholder="" value="" aria-describedby="input-date-from-note">

            <p class="c-field__note " id="input-date-from-note">
                Inserisci una data
            </p>

        </label>

    </div>

    <div class="c-datefinder__field">
        <label for="input-date-to" class="is-datepicker" aria-label="Inserisci una data">

            al

            <input id="input-date-to" type="date" class="" placeholder="" value="" aria-describedby="input-date-to-note">

            <p class="c-field__note " id="input-date-to-note">
                Inserisci una data
            </p>

        </label>

    </div>

    <div class="c-datefinder__buttonCnt">
        <button type="submit" class="c-button c-button--adding c-button--icon-round" aria-label="Esegui la ricerca">
            <svg class="svg-24">
                <use xlink:href="#ic_search_black_24px"></use>
            </svg></button>
    </div>

</div>
 
<div class="c-datefinder c-form" aria-label="Seleziona il periodo di date in cui vuoi cercare">

  {{#if hasSearchCode }}
  <div class="c-datefinder__field">
    {{> @input input-search-code }}
  </div>

  <div class="u-px-space-16">
    oppure
  </div>
  {{/if}}

  <div class="c-datefinder__field">
    {{> @input input-date-from }}
  </div>

  <div class="c-datefinder__field">
    {{> @input input-date-to }}
  </div>
  
  <div class="c-datefinder__buttonCnt">
    {{> @button--icon bnt-find }}
  </div>

</div>
 
{
  "hasSearchCode": true,
  "input-search-code": {
    "label_id": "input-search-code",
    "label_message": "Numero di prenotazione",
    "label_class": "",
    "atom-input": {
      "id": "input-search-code",
      "type": "text",
      "required": false,
      "hasNote": true,
      "describedby": "input-search-code-note"
    },
    "note_id": "input-search-code-note",
    "note_message": "Cerca tramite il codice di prenotazione"
  },
  "input-date-from": {
    "label_id": "input-date-from",
    "label_message": "Periodo dal",
    "label_class": "is-datepicker",
    "screen-reader-text": "Inserisci una data",
    "atom-input": {
      "id": "input-date-from",
      "type": "date",
      "class": "",
      "placeholder": null,
      "required": false,
      "hasNote": true,
      "describedby": "input-date-from-note"
    },
    "note_id": "input-date-from-note",
    "note_message": "Inserisci una data"
  },
  "input-date-to": {
    "label_id": "input-date-to",
    "label_message": "al",
    "label_class": "is-datepicker",
    "screen-reader-text": "Inserisci una data",
    "atom-input": {
      "id": "input-date-to",
      "type": "date",
      "class": "",
      "placeholder": null,
      "required": false,
      "hasNote": true,
      "describedby": "input-date-to-note"
    },
    "note_id": "input-date-to-note",
    "note_message": "Inserisci una data"
  },
  "bnt-find": {
    "name": "submit",
    "type": "submit",
    "modifier": "c-button--adding c-button--icon-round",
    "aria-label": "Esegui la ricerca",
    "svg": {
      "symbol": "ic_search_black_24px",
      "class": "svg-24"
    }
  }
}
  • Content: 
    // $datefinder-breakpoint: remify(560px);
$datefinder-breakpoint: bp(tablet);

.c-datefinder {
  position: relative;
  padding: remify(12px);

  @include min-screen ( $datefinder-breakpoint ) {
    display: inline-flex;
    align-items: center;
    padding: remify(8px);
  }

  input {
    border: 0;
    -webkit-appearance: none;
    border-bottom: remify(1px) solid primary(sky, 20);
    border-radius: 0;
    width: 75%;

    @include min-screen ( $datefinder-breakpoint ) {
      width: auto;
      align-self: baseline;
    }

    &:before {
      color: primary(night, 60);
      margin-right: 8px;
      width: remify(30px);
      @include min-screen ( $datefinder-breakpoint ) {
        width: auto;
      }
    }
    
  }

  input.firstDate:before {
    content: attr(data-firstDate-placeholder);
  }
  input.secondDate:before {
    content: attr(data-secondDate-placeholder);
  }

}

.c-datefinder__field {
  display: flex;
  align-items: center;
  text-align: left;

  &:first-child {
    margin-bottom: remify(16px);

    @include min-screen ( $datefinder-breakpoint ) {
      margin-bottom: 0;
    }

  }
  @include min-screen ( $datefinder-breakpoint ) {
    margin-right: remify(16px);
  }

}

.c-datefinder__icon {
  margin-right: remify(8px);

  * {
    fill: primary(night, 60);
  }
}

.c-datefinder__field label {
  margin-bottom: 0;
  width: 100%;

  @include min-screen ( $datefinder-breakpoint ) {
    width: auto;
  }

}

.c-datefinder__buttonCnt {
  color: #fff;
  position: relative;
  bottom: remify(4px);
  
  .c-button {

    // Gestito tramite pseudo element per ridurre effort implementativo lato HTML.
    // Il testo viene preso dall'attributo aria-label sul pulsante di ricerca
    // Antonio - 19/01/2023
    &:before {
      content: attr(aria-label);

      @include min-screen ( $datefinder-breakpoint ) {
        display: none;
      }
    }

  }

}
  • URL: /components/raw/datefinder/_datefinder.scss
  • Filesystem Path: src/views/02-molecules/datefinder/_datefinder.scss
  • Size: 1.9 KB

No notes defined.