Aeroporto di Bologna - Design System

Hero: Myflight 

<div class="c-hero c-hero--simple c-hero--myflight ">

    <div class="o-back c-back is-dark ">
        <a href="../preview/page-flights-home.html"><span aria-hidden="true">&#x2039;</span> Torna a Destinazioni</a>
    </div>

    <div class="c-hero__inner">

        <h1>
            <div class="c-hero__image">
                <img src="/images/flights-logos/alitalia.png" alt="Alitalia" aria-hidden="true">
            </div>
            <div class="c-hero__flight-number">
                <strong>AZ 1541</strong>
            </div>
            <div class="c-hero__text">
                Volo <strong>Alitalia</strong> per <strong>Madrid (MAD)</strong>
            </div>
        </h1>

    </div>

</div>
 
<div class="c-hero c-hero--simple c-hero--myflight {{ modifier }}">

  {{#if back-message}}
  <div class="o-back c-back is-dark {{ modifier }}">
    <a href="{{ path back-message-url }}"><span aria-hidden="true">&#x2039;</span> {{{ back-message }}}</a>
  </div>
  {{/if}}


  <div class="c-hero__inner">

    <h1>
      <div class="c-hero__image">
        <img src="{{ img-src }}" alt="{{ img-alt }}" aria-hidden="true">
      </div>
      <div class="c-hero__flight-number">
        <strong>{{{ hero-flight-number }}}</strong>
      </div>
      <div class="c-hero__text">
        {{{ hero-text }}}
      </div>
    </h1>

    {{#if FlightRadar24 }}
    <div class="c-hero__flight-radar">
      <div class="c-hero__line">
        <div>BLQ</div>
        <div class="c-hero__progress">
          {{!-- per ENDURANCE: sostituire il valore WIDTH inline con il valore in percentuale di FlightRadar24 --}}
          <div class="c-hero__plane" style="width: 53%">
          </div>
        </div>
        <div>MAD</div>
      </div>
      <div class="c-hero__distance">
        <div class="u-text-left">
          <div>Percorsi <strong>730 km</strong></div>
          <div>In viaggio da <strong>00:59</strong></div>
        </div>
        <div class="u-text-right">
          <div>Restanti <strong>1194,5 km</strong></div>
          <div>Arrivo in <strong>01:46</strong></div>
        </div>
      </div>
    </div>
    {{/if}}

  </div>

</div>
 
{
  "img-src": "/images/flights-logos/alitalia.png",
  "img-alt": "Alitalia",
  "hero-text": "Volo <strong>Alitalia</strong> per <strong>Madrid (MAD)</strong>",
  "back-message": "Torna a Destinazioni",
  "back-message-url": "/components/preview/page-flights-home",
  "hero-flight-number": "AZ 1541"
}
  • Content: 
    .c-hero {
  padding: remify(48px) remify(16px);

  main & {
    grid-column: full;
  }

  .c-hero__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 remify(16px);
  }

}


/*------------------------------------*\
  Hero simple
\*------------------------------------*/

.c-hero--simple {
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

  .c-hero__inner {
    max-width: remify(720px);
  }

  .c-hero__image {
    text-align: center;
    margin-bottom: remify(16px);

    img {
      width: remify(48px);
    }
  }

  .c-hero__text {
    color: primary(night, 100);
    text-align: center;
    @include font-scale(level-5);

    strong {
      font-weight: fw(semibold);
    }
  }

}

/*------------------------------------*\
  Hero host
\*------------------------------------*/

.c-hero--host {
  // padding-bottom: remify(80px);

  // @include min-screen (bp(tablet)) {
  //   padding-bottom: remify(48px);
  // }
}

/*------------------------------------*\
  Hero MyFlight
\*------------------------------------*/

.c-hero--myflight {
  padding-left: remify(16px);
  padding-right: remify(16px);

  .c-hero__inner {
    max-width: remify(1360px);
    text-align: center;
  }

  .c-hero__image {
    @include min-screen (bp(tablet)) {
      margin-bottom: 0;
    }

    img {
      width: 100%;
      max-width: remify(30px);
    }
  }
  h1 { font-size: 100%; }
  
  h1 .c-hero__flight-number {
    color: primary(night, 100);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    @include font-scale(level-5, bold);
  }

  h1 .c-hero__text {
    margin-bottom: remify(8px);
    @include font-scale(level-2);
  }

  .c-hero__flight-radar {
    color: secondary(text, 100);
    margin-left: auto;
    margin-right: auto;
    max-width: remify(360px);

    .c-hero__line,
    .c-hero__distance {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .c-hero__line {
      @include font-scale(level-3, bold);
    }
    .c-hero__distance {
      color: #000;
      @include font-scale(level-1-5);
    }

    .c-hero__progress {
      flex-grow: 1;
      margin: 0 remify(4px);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-1px);
        left: 0;
        right: 0;
        border-bottom: 2px solid primary(sky, 10);
        
      }
    }
    
    .c-hero__plane {
      width: 10%;
      min-width: remify(30px);
      min-height: remify(30px);
      position: relative;
      background: url(../../images/svgs/flightradar24.svg) no-repeat right center;
      
    }
  }

}

/*------------------------------------*\
  Hero wave
\*------------------------------------*/

.c-hero--wave {
  position: relative;
  background-image: url('/images/hero-go-live.jpg');
  background-size: cover;
  padding: 0;

  .c-hero__inner {
    padding: remify(80px) remify(16px) 0;
    text-align: center;
    position: relative;
  }

  h1 {
    text-align: center;
    color: #fff;
    max-width: remify(900px);
    margin: remify(140px) auto;
  }

  .discover-more p {
    color: #fff;
    text-transform: uppercase;
    font-weight: fw(semibold);
    margin-bottom: remify(8px);
  }

  .c-hero__waveform {
    position: relative;
    bottom: remify(-6px);
    width: 100%;

    path {
      fill: secondary(page, 100);
    }

  }

  .ornament-cloud {
    position: absolute;
    bottom: remify(-220px);
    right: remify(-114px);
    max-width: remify(500px);
    z-index: 1;
    display: none;

    @include min-screen (bp(tablet)) {
      bottom: remify(-130px);
      display: block;
    }
  }

}

/*------------------------------------*\
  Hero map
\*------------------------------------*/

.c-hero--map {
  padding-top: remify(40px);
  padding-bottom: remify(40px);
  
  @include min-screen (bp(tablet-p)) {
    padding-bottom: remify(80px);
  }

  &.c-hero--detail {
    display: none;
    
    @include min-screen (bp(tablet-p)) {
      display: block;
    }
  }

  .c-airport-maps--search-results &,
  .c-airport-maps--category-selected &,
  .c-airport-maps--detail &,
  .c-airport-maps--empty-state & {
    
    @include min-screen (bp(tablet-p)) {
      padding-top: remify(80px);
    }
  }

  .c-hero__text {
    font-size: 180%;

    @include min-screen (bp(tablet-p)) {
      font-size: 300%;
    }
  }

  .c-hero__inner {
    margin-bottom: 0;
  }

  .c-hero__image {
    display: none;
  }

  .o-back {
    display: none;

    @include min-screen (bp(tablet-p)) {      
      margin-bottom: remify(24px);
      display: block;
    }
  }
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/views/02-molecules/hero/_hero.scss
  • Size: 4.7 KB

No notes defined.