Aeroporto di Bologna - Design System

Additional Service 

<div class="c-additional-service ">

    <div class="c-additional-service__main">

        <div class="c-additional-service__content">
            <div class="c-additional-service__title"><strong>Regalati un ingresso alla vip lounge a soli € 24,00</strong> </div>
            <div class="c-additional-service__subtitle">anziché €28,00 se lo acquisti insieme al parcheggio!</div>
            <div class="c-additional-service__text"><small>I bambini sotto i 10 anni entrano gratis!</small></div>
        </div>

        <div class="c-additional-service__image">
            <img src="../../images/oblo-mbl.png" alt="MBL Vip Lounge">
        </div>

    </div>

    <div class="c-additional-service__features">
        <ul class="c-icon-list" aria-label="Servizi inclusi nella vip lounge">
            <li class="c-icon-list__item ">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_flight_takeoff_black_24px"></use>
                </svg> <span class="c-icon-list__text">Fast track dedicato</span>
            </li>
            <li class="c-icon-list__item ">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_weekend_black_24px"></use>
                </svg> <span class="c-icon-list__text">Area relax e TV</span>
            </li>
            <li class="c-icon-list__item ">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_wifi_black_24px"></use>
                </svg> <span class="c-icon-list__text">WI-FI</span>
            </li>
            <li class="c-icon-list__item ">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_free_breakfast_black_24px"></use>
                </svg> <span class="c-icon-list__text">Lounge bar e caffetteria</span>
            </li>
            <li class="c-icon-list__item ">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-schedule-24px"></use>
                </svg> <span class="c-icon-list__text">Orari ridotti | Covid-19</span>
            </li>
            <li class="c-icon-list__item ">
                <span class="c-icon-list__text">Tutti i giorni 5:00 / 20:00</span>
            </li>
        </ul>
        <a href="#" class="c-additional-service__discover">
            Scopri di più
        </a>
        <div class="c-additional-service__voucher">
            <div class="c-highlight c-highlight--small">
                <p>Hai a disposizione <strong>[1] voucher MBL.</strong></p>
            </div>
        </div>

    </div>

    <div class="c-additional-service__action">

        <div class="c-additional-service__image">
            <img src="../../images/oblo-mbl.png" alt="MBL Vip Lounge">
        </div>

        <div class="c-additional-service__price">
            <span class="price__full barred" aria-hidden="true">€ 28,00</span>
            <strong class="price__value">€ 22,40</strong>
            <span class="price__text">Totale ingresso Lounge</span>
        </div>

        <button type="button" class="c-button c-button--adding js-qty-trigger js-toggle" aria-label="Aggiungi un accesso alla Vip Lounge" data-toggle="lounge-service">

            Aggiungi

        </button>
        <div class="c-button c-button--qty js-btn-qty" aria-label="Seleziona il numero">
            <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
            <input type="number" class="js-qty-value" value="1" readonly id="vip_lounge_qty" aria-label="Quantità" min="1">
            <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
        </div>
    </div>

</div>
 
<div class="c-additional-service {{ modifier }}">
  
  <div class="c-additional-service__main">
   
    <div class="c-additional-service__content">
      <div class="c-additional-service__title"><strong>{{{ title }}}</strong> </div>
      <div class="c-additional-service__subtitle">{{{ subtitle }}}</div>
      <div class="c-additional-service__text">{{{ text }}}</div>
    </div>

    {{#if img }}
    <div class="c-additional-service__image">
        <img src="{{ path img.path }}" alt="{{ img.alt }}">
    </div>
    {{/if}}
  
  </div>

  <div class="c-additional-service__features">
    {{#if features}}
    {{> @icon-list features }}
    {{/if}}

    {{> @link discover-more }}

		{{#if voucher-highlight}}
		<div class="c-additional-service__voucher">
			{{> @highlight voucher-highlight }}
		</div>
		{{/if}}

  </div>
  
  <div class="c-additional-service__action">

    {{#if img }}
    <div class="c-additional-service__image">
      <img src="{{ path img.path }}" alt="{{ img.alt }}">
    </div>
    {{/if}}

    {{#if price }}
    <div class="c-additional-service__price">
      <span class="price__full barred" aria-hidden="true">{{price.full}}</span>
      <strong class="price__value">{{price.value}}</strong>
      <span class="price__text">{{price.text}}</span>
    </div>
    {{/if}}

    {{> @button btn }}
    {{> @button--qty quantity }}

  </div>

</div>
 
/* No context defined. */
  • Content: 
    $park-item-bp: bp(phone-l);

.c-additional-service {
  background-color: #fff;
  border: 1px solid primary(night, 20);
  padding: 0;
  margin-bottom: remify(24px);

  display: grid;
  grid-template-areas:  "main"
                        "features"
                        "action";

  @include min-screen ( bp(tablet-p) ) {
    grid-template-areas:  "main main action"
                          "features features action";
  }


  .c-additional-service__main {
    grid-area: main;
    padding: remify(24px);
    color: primary(night, 120);
    @include min-screen ( bp(tablet-p) ) {
      padding: remify(32px);
    }

    display: flex;
    justify-content: space-between;

    .c-additional-service__image {
      min-width: remify(70px);
      max-width: remify(90px);
      @include min-screen ( bp(tablet-p) ) {
        display: none;
        
      }
    }
  }

  .c-additional-service__title {
    @include font-scale(level-4);
  }
  .c-additional-service__subtitle {
    @include font-scale(level-3);
    margin-bottom: remify(16px);
  }
  .c-additional-service__text {
    @include font-scale(level-2);

    small {
      @include font-scale(level-1);
    }
  }

  .c-additional-service__features {
    grid-area: features;
    padding: remify(24px);
    @include min-screen ( bp(tablet-p) ) {
      padding: remify(32px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
    }

    @include max-screen ( bp(tablet-p) ) {
      background-color: secondary(soft, 100);
    }
  }

  .c-icon-list {
    @include min-screen ( bp(tablet-p) ) {
      background-color: secondary(soft, 100);
      border-radius: remify(12px);
      padding: remify(16px);
    }

    li {
      min-height: remify(24px);
      color: primary(night, 80);
      margin-right: remify(16px);
      display: inline-flex;

       svg {
        fill: currentColor;
      }

      &:before {
        display: inline-block;
        width: 1px;
        height: remify(24px);
      }
    }
  }

  .c-additional-service__discover {
    @include font-scale(level-1, bold);
    color: primary(night, 100);
    display: inline-block;
    margin-top: remify(16px);
  }
  

  .c-additional-service__action {
    grid-area: action;
    background-color: primary(sky, 20);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: remify(16px);
    @include min-screen ( bp(tablet-p) ) {
      max-width: remify(200px);
      margin: 0 0 0 auto;
      padding: remify(32px);
      justify-content: space-between;
    }

    .c-additional-service__image {
      display: none;
      @include min-screen ( bp(tablet-p) ) {
        display: block;
        width: 100%;
        max-width: remify(180px);
        margin-bottom: remify(24px);
      }
    }
    
    .c-additional-service__price {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: primary(night, 120);
      margin-bottom: remify(24px);
      text-align: center;

      .price__full {
        @include font-scale(level-1, semibold);
      }
      .price__value {
        @include font-scale(level-6, bold);
      }
      .price__text {
        @include font-scale(level-1);
      }

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

    }


    button {

      &:not(.c-button--qty button) {
        margin: 0 auto remify(8px);
      }

    }

    .c-button {
      margin-left: auto;
      margin-right: auto;
      max-width: remify(150px);
    }

    .c-button--adding {

      .js-available & {
        display: block;
      }

      .no-js & {
        display: none;
      }

    }

    .c-button--qty {

      .js-available & {
        display: none;
      }

      .no-js & {
        display: block;
      }

    }

  }

}

.c-additional-service__voucher {
  margin-top: remify(32px);
}


.c-additional-service--smaller {

  margin-bottom: 0;
  
  .c-additional-service__main {
    flex-direction: row-reverse;
    .c-additional-service__content {}
    .c-additional-service__image {
      min-width: remify(70px);
      max-width: remify(90px);
      margin-right: remify(24px);
      @include min-screen ( bp(tablet-p) ) {
        display: block; 
      }
    }
  }
  .c-additional-service__action {
    .c-additional-service__image {
      display: none;
    }
  }
}
  • URL: /components/raw/additional-service/_additional-service.scss
  • Filesystem Path: src/views/03-organisms/additional-service/_additional-service.scss
  • Size: 4.4 KB
  • Content: 
    (function($) {

  var $qtyBtnTrigger = $('.js-qty-trigger');

  $qtyBtnTrigger.each(function(index) {
    $(this).on("click", function(){
      $(this).hide();
      $(this).next('.js-btn-qty').css({'display': 'flex', 'justify-content': 'space-around'});
      $(this).next('.js-btn-qty').find('.minus').focus();
    });
  });


  // MANAGE BUTTON/INPUT ADD/REMOVE VIP LOUNGE
  var addBtn = $('.js-toggle-add');
  var removeBtn = $('.js-toggle-remove');
  var icon = $('#icon_toggle_lounge');
  var parkTooltip = $('#tooltip_toggle_lounge');

  // increase value
  addBtn.each(function(index) {
    $(this).on("click", function(){
      $(removeBtn).prop('disabled', false);
      $(this).prev('.js-qty-value').val(function(i, oldval) {
        return ++oldval;
      })
    });
  });

  // decrease value
  removeBtn.each(function(index) {
    $(this).on("click", function(){
      $(removeBtn).prop('disabled', false);
      $(this).next('.js-qty-value').val(function(i, oldval) {
        if (oldval >= 1) {
          if (oldval <= 1) {
            $(removeBtn).prop('disabled', true);
            $(parkTooltip).addClass('active');
            $(icon).removeClass('active');
          }
          return --oldval;
        }
      })
    });
  });
  
})(jQuery);
  • URL: /components/raw/additional-service/additional-service.js
  • Filesystem Path: src/views/03-organisms/additional-service/additional-service.js
  • Size: 1.3 KB

No notes defined.