Aeroporto di Bologna - Design System

Time detail: Convenzioni 

<div class="c-time-detail">

    <span class="c-time-detail__icon-placeholder">
    </span>

    <div class="c-time-detail__el">
        <label for="select-conventions" class="" aria-label="">
            Convenzione:
            <select id="select-conventions" class="" aria-describedby="select-conventions-note">
                <option value="" disabled selected>Seleziona l&#x27;accreditamento di cui far parte</option>
                <option value="option-1">Alba Tour</option>
                <option value="option-2" selected>Alpitour</option>
                <option value="option-3">Brixia Viaggi</option>
                <option value="option-4">Club Med</option>
                <option value="option-5">Domina Travel</option>
                <option value="option-6">In Viaggi</option>
                <option value="option-7">Marsupio Group</option>
                <option value="option-8">Smeg S.p.A.</option>
                <option value="option-9">Viaggi Idea</option>
            </select>
            <em class="c-field__note u-visuallyhidden" id="select-conventions-note">
                Seleziona un'opzione dal menù a tendina
            </em>
        </label>
    </div>

    <div class="c-time-detail__el ">

    </div>

</div>
 
<div class="c-time-detail">

  <span class="c-time-detail__icon-placeholder">
  </span>

  <div class="c-time-detail__el">
    {{> @select select-conventions  }}
  </div>

  <div class="c-time-detail__el ">
  
  </div>
  
</div>
 
{
  "name": "static",
  "time-detail-icon": {
    "symbol": "ic_drive_eta_black_24px",
    "class": "c-icon"
  },
  "datetime-label": "Entrata",
  "datetime-day": "10",
  "datetime-month": "04",
  "datetime-year": "2018",
  "time-label": "Ore",
  "time-text": "20:30",
  "select-conventions": {
    "label_id": "select-conventions",
    "label_message": "Convenzione:",
    "label_class": "",
    "atom-select": {
      "id": "select-conventions",
      "class": "",
      "required": false,
      "hasNote": true,
      "describedby": "select-conventions-note",
      "placeholder": "Seleziona l'accreditamento di cui far parte",
      "options": [
        {
          "value": "option-1",
          "text": "Alba Tour"
        },
        {
          "value": "option-2",
          "text": "Alpitour",
          "selected": true
        },
        {
          "value": "option-3",
          "text": "Brixia Viaggi"
        },
        {
          "value": "option-4",
          "text": "Club Med"
        },
        {
          "value": "option-5",
          "text": "Domina Travel"
        },
        {
          "value": "option-6",
          "text": "In Viaggi"
        },
        {
          "value": "option-7",
          "text": "Marsupio Group"
        },
        {
          "value": "option-8",
          "text": "Smeg S.p.A."
        },
        {
          "value": "option-9",
          "text": "Viaggi Idea"
        }
      ]
    },
    "note_id": "select-conventions-note",
    "note_message": "Seleziona un'opzione dal menù a tendina",
    "note_class": "u-visuallyhidden"
  }
}
  • Content: 
    .c-time-detail {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  padding: remify(8px) 0;
  justify-content: center;
  width: 100%;
  color: secondary(text, 100);

  & + & {

    @include min-screen(bp(phablet)) {
      border-left: 1px solid primary(night, 40);
      border-top: none;
    }
  }

  & + & + & {

    @include max-screen(bp(phablet)) {
      border-top: 1px solid primary(night, 40);
    }
  }


  @include min-screen(bp(phone-p)) {
    width: 50%;
  }

  @include min-screen(bp(phablet)) {
    width: 30%;
  }

  @include min-screen( $booking-info-breakpoint ) {
    padding: 0 remify(16px);
    width: auto;
  }
 
  .c-product__time & {
    border: none;
    padding-left: 0;
    justify-content: initial;
  }

  .c-product--recap & {
    flex: 1 1 50%;
  }

  .c-parkings & {

    @include min-screen( $booking-info-breakpoint ) {
      padding: 0 0 0 remify(16px);
    }

    &:first-of-type {
      padding-left: 0;
    }

  }

  svg {
    position: relative;
    top: remify(4px);
    width: remify(32px);
    height: remify(18px);
    
    * {
      fill: primary(night, 40);
    }

    @include min-screen( $booking-info-breakpoint ) {
      width: remify(48px);
      height: remify(32px);

      .c-product__time--desktop & {
        width: remify(36px);
        height: remify(24px);
      } 

    }

  }

  .c-time-detail__icon-placeholder {
    width: remify(48px);
    min-height: 2px;
    @include min-screen( $booking-info-breakpoint ) { width: auto; }
  }

  > * {
    margin-right: remify(16px);
    &:last-child {
      margin-right: 0;
    }

    .c-product__time & {
      margin-right: remify(8px);
      font-size: remify(12px);
      
      @include min-screen( bp(phone-p) ) {
        font-size: remify(14px);
      }

    }

  }

  .c-time-detail__el {
    min-width: remify(48px);
    @include min-screen( bp(phablet) ) {
        min-width: auto;
      }
  }

  strong, label {
   @include font-scale(level-2, bold);
    display: block;
  }

  label {
    font-weight: fw(bold);
    flex-grow: 2;

    &.is-readonly {
      width: remify(100px);
      @include min-screen(bp(phablet)) {
        width: auto;
      }
    }

  }

  input {
    display: block;
    margin-top: remify(4px);
    font-size: remify(16px);
    border-radius: remify(4px);
    border: remify(1px) solid #fff; // For IE to avoid default browser border
    color: secondary(text, 100);
    background: transparent;

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

    .o-spotlight__element--overlay & {
      border: remify(1px) solid #ccc;
      background-color: #fff;
      padding: remify(4px);
    }

  }

  input:-moz-read-only {
    border: none;
    padding: 0;
    -webkit-appearance: none;
    background-color: transparent;
  }
  
  input:read-only {
    border: none;
    padding: 0;
    -webkit-appearance: none;
    background-color: transparent;
  }

  select {
    display: block;
    font-size: remify(16px);
    height: remify(24px);
    margin-top: remify(0px);
    border: none;
    color: secondary(text, 100);
    background-color: transparent;
    appearance: none;
    opacity: 1;

    @include min-screen(bp(phablet)) {
      font-size: remify(16px);
    }
  }

}

.c-time-detail--desktop {
  display: none;

  @include min-screen( bp(tablet-p)) {
    display: block;
  }  
}

.c-time-detail--mobile {
  display: block;

  @include min-screen( bp(tablet-p)) {
    display: none;
  }
}

/*------------------------------------*\
  PRODUCT modifier
\*------------------------------------*/

.c-time-detail.c-time-detail--product {
  display: block;

  strong {
    display: inline-block;
  }

  .c-time-detail__span {
    flex-grow: 1;
  }

  .c-time-detail__span {
    margin-right: remify(16px);
    background-image: url('../images/svgs/caret.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
  }

  &:last-of-type,
  &:nth-of-type(2) {
    .c-time-detail__span { 
      margin-right: 0;
      background-image: none;
    }
  }
}

/*------------------------------------*
  Modifier: Raw
*------------------------------------*/
.c-time-detail--raw {
  justify-content: initial;
  padding: 0;
}
  • URL: /components/raw/time-detail/_time-detail.scss
  • Filesystem Path: src/views/02-molecules/time-detail/_time-detail.scss
  • Size: 4.2 KB

No notes defined.