Aeroporto di Bologna - Design System

Flight stops 

<div class='c-flight-stops'>
    <p>
        6h 45m totali
    </p>

    <div class='line' aria-hidden='true'>
        <span class='line__stop'></span>
    </div>

    <div class='c-flight-stops__toggle'>
        <label for="stop-detail" class='js-flight-stop-toggle'>
            1 scalo
        </label>
    </div>
</div>
 
<div class='c-flight-stops'>
  <p>
    {{{duration}}}
  </p>

  <div class='line' aria-hidden='true'>
    {{#if stops-number}}
      {{#repeat stops-number}}
        <span class='line__stop'></span>
      {{/repeat}}
    {{else}}
      <span class='line__stop'></span>
    {{/if}}
  </div>

  {{#if stops-number}}
    <div class='c-flight-stops__toggle'>
      <label for="{{toggle.id}}" class='js-flight-stop-toggle'>
        {{toggle.text}}
      </label>
    </div>
  {{/if}}
  {{#if stops-cart-label}}
    <div class='c-flight-stops__label'>
      <span>
        {{stops-cart-label}}
      </span>
    </div>
  {{/if}}
</div>
 
{
  "duration": "6h 45m totali",
  "stops-number": 1,
  "toggle": {
    "id": "stop-detail",
    "name": "stop-detail",
    "text": "1 scalo"
  },
  "aria-controls-id": "stop-detail-1"
}
  • Content: 
    .c-flight-stops {
  // padding: 0 remify(16px);
  flex: 1 1 100%;

  p {
    text-align: center;
    margin-bottom: remify(16px);
    font-size: remify(10px);
    color: secondary(text, 100);

    strong {
      color: primary(night, 100);
    }

    @include min-screen(bp(tablet-p)) {
      font-size: remify(12px);
    }

  }

  .line {
    background: transparent;
    height: remify(2px);
    display: flex;
    position: relative;
    justify-content: space-between;
    border-bottom: 2px dashed primary(night, 40);
  }

  .line__stop {
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;

    &:before {
      content: '';
      display: inline-block;
      position: relative;
      top: remify(-8px);
      background-color: primary(night, 100);
      background: #fff url('../images/svgs/airplane-rotated-yellow.svg') no-repeat center center;
      width: remify(18px);
      height: remify(18px);
      z-index: 1;
      padding-inline: remify(18px);


      @include min-screen(bp(tablet)) {
        top: remify(-10px);
      }

    }
  }

}

.c-flight-stops__toggle {
  text-align: center;

  label {
    cursor: pointer;
    background-color: primary(night, 100);
    @include font-scale(level-1);
    text-align: center;
    color: #fff;
    margin-top: remify(12px);
    border-radius: remify(20px);
    display: inline-block;
    padding: remify(2px) remify(32px) remify(2px) remify(12px);
    position: relative;

    &:after {
      content: '';
      position: absolute;
      background-image: url('../images/svgs/arrow-down-white.svg');
      background-repeat: no-repeat;
      width: remify(12px);
      height: remify(8px);
      display: block;
      right: remify(12px);
      top: 50%;
      transform: translateY(-50%);
      // transition: transform .2s;
    }

    &.is-active {
      background-color: primary(sky, 120);
    }

    &.is-active::after {
      transform: translateY(-50%) rotate(180deg);
    }

  }

}

.c-flight-stops__label {
  text-align: center;
  span {
    color: primary(night, 100);
    @include font-scale(level-1);
    text-align: center;
    margin-top: remify(12px);
    display: inline-block;
    padding: remify(2px) remify(12px) remify(2px) remify(12px);
    position: relative;
  }
}
  • URL: /components/raw/flight-stops/_flight-stops.scss
  • Filesystem Path: src/views/02-molecules/flight-stops/_flight-stops.scss
  • Size: 2.3 KB
  • Content: 
    (function($) {

  var $toggleFlightStop = $('.js-flight-stop-toggle');

  $toggleFlightStop.click(function(){
    $(this).toggleClass('is-active');
  });

})(jQuery);
  • URL: /components/raw/flight-stops/flight-stops.js
  • Filesystem Path: src/views/02-molecules/flight-stops/flight-stops.js
  • Size: 166 Bytes

No notes defined.