Aeroporto di Bologna - Design System

Scheduling 

<dl class="c-scheduling ">

    <div class="c-scheduling__item">
        <dt>Data</dt>
        <dd class="">8 Maggio

        </dd>

    </div>
    <div class="c-scheduling__item">
        <dt>Numero volo</dt>
        <dd class="">BA 541

        </dd>

    </div>
    <div class="c-scheduling__item">
        <dt>Orario programmato</dt>
        <dd class="">12:05

        </dd>

    </div>
    <div class="c-scheduling__item">
        <dt>Orario stimato</dt>
        <dd class="is-positive">11:55

        </dd>

        <dd><small>(18/03/2019)</small></dd>

    </div>
    <div class="c-scheduling__item">
        <dt>Stato</dt>
        <dd class="">In volo

        </dd>

        <dd><small>(18/03/2019)</small></dd>

    </div>

</dl>
 
<dl class="c-scheduling {{ modifier }}">

  {{#each schedulings }}
  <div class="c-scheduling__item">
    <dt>{{ this.title }}</dt>
    <dd class="{{ this.dd-class }}">{{{ this.desc }}} 

      {{#if this.tooltip}}
          {{> @tooltip--default tooltip }}
      {{/if}} 
      
      </dd>
    
    {{#if this.delay}}
      <dd><small>{{ this.delay }}</small></dd>
    {{/if}} 

  </div>
  {{/each}}

</dl>
 
{
  "schedulings": [
    {
      "title": "Data",
      "desc": "8 Maggio"
    },
    {
      "title": "Numero volo",
      "title-aria-label": "Numero volo",
      "desc": "BA 541"
    },
    {
      "title": "Orario programmato",
      "title-aria-label": "Orario programmato",
      "desc": "12:05"
    },
    {
      "title": "Orario stimato",
      "desc": "11:55",
      "dd-class": "is-positive",
      "delay": "(18/03/2019)"
    },
    {
      "title": "Stato",
      "desc": "In volo",
      "delay": "(18/03/2019)"
    }
  ]
}
  • Content: 
    .c-scheduling {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: remify(16px) 0;
}

.c-scheduling__item {
  flex: 1 1 50%;
  border-left: remify(1px) solid primary(sky, 20);
  margin-bottom: remify(24px);
  padding-left: remify(16px);
  color: primary(night, 100);

  &:first-child {
    border-left: none;
  }

  @include max-screen(bp(tablet)) {
    &:nth-child(odd) {
      border-left: none;
    }
  }

  @include min-screen(bp(tablet)) {
    flex: auto;
    margin-bottom: 0;
  }

}

.c-scheduling__item dt {
  text-transform: uppercase;
  font-size: 75%;
}

.c-scheduling__item dd {
  font-weight: fw(semibold);
  @include min-screen(bp(tablet)) {
    font-size: 150%;
  }

  &.is-positive {
    color: status(positive);
    font-weight: fw(bold);
  }

  &.is-negative {
    color: status(negative);
    font-weight: fw(bold);
  }

  &.is-strong {
    font-weight: fw(bold);
  }

  small {
    display: block;
    color: primary(night, 100);
    font-size: 75%;
    
    @include min-screen(bp(tablet)) {
      font-size: 50%;
    }
  }

}
  • URL: /components/raw/scheduling/_scheduling.scss
  • Filesystem Path: src/views/02-molecules/scheduling/_scheduling.scss
  • Size: 1.1 KB

No notes defined.