Aeroporto di Bologna - Design System

Time detail: Static 

<div class="c-time-detail ">
    <span class="c-time-detail__icon">
        <svg class="c-icon">
            <use xlink:href="#ic_drive_eta_black_24px"></use>
        </svg> </span>
    <span>
        <strong>Entrata</strong>
        <time datetime=2018/04/10>
            10/04/2018
        </time>
    </span>
    <span>
        <strong>Ore</strong>
        <time>20:30</time>
    </span>
</div>
 
<div class="c-time-detail {{ modifier }}">
  <span class="c-time-detail__icon">
    {{> @icon symbol=time-detail-icon.symbol class=time-detail-icon.class }}
  </span>
  {{#if datetime-label}}
    <span>
      <strong>{{ datetime-label }}</strong>
      <time datetime={{ datetime-year }}/{{ datetime-month }}/{{ datetime-day }}>
        {{ datetime-day }}/{{ datetime-month }}/{{ datetime-year }}
      </time>
    </span>
  {{/if}}
  <span>
  {{#if time-label}}
    <strong>{{ time-label }}</strong>
    <time>{{ time-text }}</time>
  </span>
  {{/if}}
</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"
}
  • 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.