Aeroporto di Bologna - Design System

Flight Info Card: In arrrivo in ritardo 

<div class="c-flight-info-card c-flight-info-card--delayed">

    <div class="c-flight-info-card__inner">
        <div class="c-flight-info-card__header">
            <div class="place">Santiago di Compostela SCQ</div>
            <div class="schedule">
                <p class="schedule__time">18:04</p>
                <span class="c-rounded-label c-rounded-label--negative" aria-label="">

                    22:03
                </span>
            </div>
        </div>

        <div class="c-flight-info-card__body">
            <p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
        </div>
    </div>

    <div class="c-flight-info-card__footer">
        <a href="#" class="cta">
            Segui volo
            <svg class="c-icon c-icon--18">
                <use xlink:href="#ic_fb_messenger"></use>
            </svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
            Dettagli
            <svg class="c-icon c-icon--18">
                <use xlink:href="#ic_chevron_right_black_24px"></use>
            </svg></a>
    </div>
</div>
 
<div class="c-flight-info-card {{modifier}}">
  
  <div class="c-flight-info-card__inner">
    <div class="c-flight-info-card__header">
      <div class="place">{{ data.place }}</div>
      <div class="schedule">
        <p class="schedule__time">{{ data.scheduled-time }}</p>
        {{#if time-variation-label}}
          {{> @rounded-label time-variation-label text=data.variation-time }}
        {{/if}}
      </div>
    </div>
    
    <div class="c-flight-info-card__body">
      <p>{{ data.flight-company }} | {{#each data.flight-codes}}<span class="flight-code">{{ this }}</span>{{/each}}</p>
      {{#if data.flight-status}}
      <div class="flight-status">
        <p>{{{ data.flight-status }}}</p>
        {{#if data.gate-number}}
        <p>Gate <strong>{{ data.gate-number }}</strong></p>
        {{/if}}
      </div>
      {{/if}}
    </div>
  </div>

  <div class="c-flight-info-card__footer">
    {{> @link follow-flight-link }}
    {{> @link detail-link }}
  </div>
</div>
 
{
  "data": {
    "place": "Santiago di Compostela SCQ",
    "flight-status": null,
    "scheduled-time": "18:04",
    "variation-time": "22:03",
    "flight-company": "Swiss International Air Lines",
    "flight-codes": [
      "BA541",
      "AA6607",
      "JL7154",
      "AA6607"
    ],
    "departure-time": "22:30",
    "gate-number": null
  },
  "follow-flight-link": {
    "modifier": "cta",
    "url": "#",
    "text": "Segui volo",
    "svg": {
      "symbol": "ic_fb_messenger",
      "class": "c-icon c-icon--18"
    }
  },
  "detail-link": {
    "modifier": "cta",
    "url": "/components/preview/page-myflight-departure.html",
    "text": "Dettagli",
    "svg": {
      "symbol": "ic_chevron_right_black_24px",
      "class": "c-icon c-icon--18"
    }
  },
  "modifier": "c-flight-info-card--delayed",
  "time-variation-label": {
    "modifier": "c-rounded-label--negative"
  }
}
  • Content: 
    .c-flight-info-card {
  border-radius: remify(8px);
  overflow: hidden;
  border: 1px solid primary(sky, 20);
}

.c-flight-info-card__inner {
  background-color: #FFF;
  padding: remify(16px);
}

.c-flight-info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: remify(16px);
  gap: remify(16px);
}

.c-flight-info-card .schedule,
.c-flight-info-card .flight-status {
  display: flex;
  align-items: center;
  gap: remify(8px);
}

.c-flight-info-card .flight-status {
  margin-top: remify(8px);
  justify-content: space-between;
  @include font-scale(level-2);

  @include min-screen(bp(phablet)) {
    justify-content: flex-end;
  }
}

.c-flight-info-card .flight-code:after {
  content: " | ";
}

.c-flight-info-card .flight-code:last-child:after {
  display: none;
}


.c-flight-info-card .c-rounded-label {
  @include font-scale(level-1-5);
  padding-inline: remify(8px);
}

.c-flight-info-card__body {
  @include font-scale(level-1);
  color: primary(night, 100);
  text-align: left;

  @include min-screen(bp(phablet)) {
    @include font-scale(level-1-5);
  }

}

.c-flight-info-card .place,
.c-flight-info-card .schedule__time {
  @include font-scale(level-1-5);
  font-weight: fw(bold);
  color: primary(night, 120);
  text-transform: uppercase;

  @include min-screen(bp(phablet)) {
    @include font-scale(level-2);
  }
}

.c-flight-info-card .place {
  text-align: left;
}

.c-flight-info-card__footer {
  background-color: primary(sky, 10);
  padding: remify(8px) remify(16px);
  display: flex;
  justify-content: space-between;
}

.c-flight-info-card__footer a {
  color: primary(night, 120);
  font-weight: fw(bold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: remify(4px);

  &:hover {
    text-decoration: underline;
  }

}

/*------------------------------------*
  Modifier: Delayed
*------------------------------------*/
.c-flight-info-card--delayed {

  .schedule__time {
    text-decoration: line-through;
  }

}

/*------------------------------------*\
  Modifier: Past
\*------------------------------------*/
.c-flight-info-card--past {
  position: relative;
  opacity: .5;
}
  • URL: /components/raw/flight-info-card/_flight-info-card.scss
  • Filesystem Path: src/views/02-molecules/flight-info-card/_flight-info-card.scss
  • Size: 2.2 KB

No notes defined.