Addon

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-addon ">
    <div class="c-addon__what">
        <span class="c-addon__title">Lavaggio autovettura <span class="" data-js-tooltip-label="Espandi le informazioni nascoste" data-js-tooltip-icon=ic_info_black_24px data-js-bubble-class-position=c-tooltip__bubble--down>
                <p data-toggletip>
                    Qui va il contenuto aggiuntivo
                </p>
            </span></span>
        <p>

        </p>
    </div>
    <div class="c-addon__features">
        <div class="c-addon__feature">
            <span class="title">Da</span>
            <span class="description">€ 8,00</span>
        </div>
        <div class="c-addon__feature">
            <span class="title">a</span>
            <span class="description">€ 12,00</span>
        </div>
    </div>
    <div class="c-addon__action">
        <button type="button" class="c-button c-button--adding">

            Aggiungi

        </button>
    </div>
</div>


        <div class="c-addon {{ modifier }}">
  <div class="c-addon__what">
    <span class="c-addon__title">{{ addon-name }} {{> @tooltip tooltip }}</span>
    <p>
      {{ addon-features-text }}
    </p>
  </div>
  <div class="c-addon__features">
    {{#each features}}
      <div class="c-addon__feature">
        <span class="title">{{ this.title }}</span>
        <span class="description">{{ this.description }}</span>
      </div>
    {{/each}}
  </div>
  <div class="c-addon__action">
    {{> @button btn }}
  </div>
</div>


        
            
            {
  "name": "adding",
  "status": "reviewed",
  "addon-name": "Lavaggio autovettura",
  "features": [
    {
      "title": "Da",
      "description": "€ 8,00"
    },
    {
      "title": "a",
      "description": "€ 12,00"
    }
  ],
  "tooltip": {
    "tooltip_aria_label": "Espandi le informazioni nascoste",
    "tooltip_exposed_icon": "ic_info_black_24px",
    "tooltip_exposed_text": null,
    "tooltip_position_class": "c-tooltip__bubble--down",
    "bubble_text": "Qui va il contenuto aggiuntivo"
  },
  "btn": {
    "type": "button",
    "text": "Aggiungi",
    "modifier": "c-button--adding"
  }
}

File:

Content:


                                $park-item-bp: bp(phone-l);

.c-addon {
  background-color: #fff;
  border: 1px solid primary(night, 20);
  padding: remify(24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: remify(16px);

  @include max-screen( bp(phone-p) ) {
    flex-wrap: wrap;
  }

  main & {
    grid-column: full;

    @include min-screen( $base-page-width ) {
      grid-column: main;
    }
    
  }

  [grid~=grid] & {
    grid-column: initial;
  }

  .c-product--recap ~ & {
    margin-bottom: 0;
    border-radius: 0;

    @include min-screen( $base-page-width ) {
      border-radius: remify(4px);
    }
  }

}

.c-addon__voucher {
  margin-top: remify(32px);
  flex: 1 0 100%;
  
  .c-highlight {
    display: inline-block;
  }
}

.c-addon__what {
  color: primary(night, 100);
  @include font-scale(level-1-5);
  flex-shrink: 1;
  flex-grow: 1;
  // margin-bottom: remify(16px);

  @include min-screen( $base-page-width ) {
    margin-bottom: 0;
  }

  .c-addon__title {
    @include font-scale(level-2, bold);

    .c-tooltip { vertical-align: sub;}
  }
}

.c-addon__features {
  display: flex;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: remify(250px);
  justify-content: flex-end;
  // margin-left: remify(48px);

  @include max-screen( bp(phone-p) ) {
    flex-basis: remify(180px);
    justify-content: flex-start;
  }
}

.c-addon__feature {
  margin-right: remify(24px);
  min-width: remify(80px);



  & > * {
    display: block;
    text-align: center;
  }

  .title {
    text-transform: uppercase;
    font-size: 75%;
  }

  .description {
    @include font-scale(level-4, bold);
    line-height: remify(20px);
    white-space: nowrap;
  }

}

.c-addon__action {
  flex-basis: 15%;
  flex-grow: 0;
  flex-shrink: 1;
  text-align: center;
}

/*------------------------------------*\
  Addon Benefit Modifier
\*------------------------------------*/

.c-addon--benefit {
  
  background: primary(night, 100);

  .c-addon__what {
    display: none;

    @include min-screen ( bp(tablet-p) ) {
      display: block;
      flex-basis: auto;
    }

    @include min-screen ( remify(1280px) ) {
      position: relative;
      left: remify(-50px);
    }

  }

  .c-addon__features {
    display: block;
    flex: auto;
    text-align: center;

    @include min-screen ( bp(tablet-p) ) {
      flex: 1 0 remify(500px);
      text-align: left;
    }

    p {
      color: #fff;
      font-weight: fw(light);
      margin-bottom: remify(24px);

      @include min-screen ( bp(tablet-p) ) {
        font-size: 150%;
        line-height: remify(32px);
      }

      small {
        font-size: remify(12px);
      }

    }

  }

  .c-addon__action {
    flex: 1 0 remify(100px);
    
    span {
      font-size: remify(12px);
      text-transform: uppercase;
      color: #fff;

      &.barred {
        font-size: remify(16px);
        text-decoration: line-through;
      }

    }

    strong {
      font-size: remify(24px);
      line-height: 1;
      color: #fff;
      margin-bottom: remify(16px);
    }

    // button {

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

    // }

    .c-button--adding {

      .js-available & {
        display: block;
      }

      .no-js & {
        display: none;
      }

    }

    .c-button--qty {

      .js-available & {
        display: none;
      }

      .no-js & {
        display: block;
      }

    }

    .c-button {
      // margin-left: auto;
      // margin-right: auto;
      width: 100%;
      max-width: remify(250px);
    }

    .price {
      display: none;
      & > * {
        display: block;
        text-align: center;
      }
    }

    // a {
    //   color: #fff;
    //   text-decoration: underline;
    //   font-size: 75%;

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

    // }

  }

  .c-product--payed.qrcode & {
    margin-bottom: 0;

    @include min-screen( $park-item-bp ) {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: remify(16px);
    }
  }

  .c-product--payed.telepass & {
    margin-bottom: 0;

    @include min-screen( $park-item-bp ) {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: remify(16px);
    }
  }

}

/*------------------------------------*\
  Addon Single Price Modifier
\*------------------------------------*/

.c-addon--single-price {

  .c-addon__features {
    
    @include min-screen(remify(811px)) {
      justify-content: flex-end;
    }

  }
  
}

/*------------------------------------*\
  Addon Benefit Parking Modifier
\*------------------------------------*/

.c-addon--benefit.parking {
  display: block;

  @include min-screen(bp(tablet-p)) {
    display: flex;
    flex-wrap: wrap;
  }

  p {
    margin-bottom: 0;
  }

  .c-addon__title {
    @include font-scale(level-4, bold);
    margin-bottom: 0;
  }

  .c-addon__subtitle {
    @include font-scale(level-3, light);
    margin-bottom: remify(8px);
  }

  .c-addon__body {
    @include font-scale(level-2, regular);
  }

  .c-addon__features {
    text-align: left;

    @include max-screen ( bp(tablet-p) ) {
      margin-bottom: remify(24px);
    }
  }

  .c-addon__what {
    display: flex;
    margin-bottom: remify(24px);

    @include min-screen ( bp(tablet-p) ) {
      flex-grow: 0;
      justify-content: space-between;
      left: initial;
    }

    img {
      margin-right: remify(8px);
    }

    .placeholder {
      display: inline-block;
      width: remify(60px);
      height: remify(60px);
      border: 1px dashed #fff;
      border-radius: remify(4px);
      flex: 0 0 auto;
    }

  }

  .c-addon__action {
    text-align: left;
  }

}

/*------------------------------------*\
  Addon Modify Modifier
\*------------------------------------*/

.c-addon--modify {
  background-color: primary(sky, 20);
  display: block;
  padding: remify(16px) remify(48px);
  border-bottom: 1px solid #fff;
  border-radius: 0;

    @include min-screen(bp(tablet)) {
      display: flex;
    }

  & > * {
    margin-bottom: 0;
    margin-right: 0;
  }

  &:last-child {
    border-radius: 0 0 remify(12px) remify(12px);
  }
  .c-folding & {
    margin-bottom: 0;
  }

  .c-addon__what {
    display: block;
    color: secondary(text, 100);
    font-size: remify(16px);
    margin-bottom: remify(16px);
    text-align: center;
    
    @include min-screen(bp(tablet)) {
      flex-basis: remify(440px);
      display: flex;
      margin-bottom: remify(0px);
      text-align: left;
    }
    
    span { 
      color: primary(night, 100); 
      font-weight: fw(bold);
      display: inline-block;
      margin-right: remify(8px);
    }

  }
  
  .c-addon__features {
    flex-basis: remify(100px);
    flex-grow: 1;
    
    @include min-screen(bp(phablet)) {
      justify-content: flex-end;
    }

    a {
      // margin-left: remify(16px);
    }
  }

  .c-addon__action {
    color: primary(night, 100); 
    font-weight: fw(bold);
    flex-grow: 1
  }

}

/*------------------------------------*\
  Addon Discounts Modifier
\*------------------------------------*/

.c-addon--discounts {

  @include bg-gradient-t2b(#fff, primary(sky, 20));
  padding: remify(24px);
  color: primary(night, 100);

  @include min-screen(bp(tablet-p)) {
    flex-wrap: nowrap;
  }

  .value {
   @include font-scale(level-3, bold);
  }

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

  .c-folding & {

    // margin-left: remify(16px);
    // margin-right: remify(16px);

    @include min-screen(bp(tablet-p)) {
      position: relative;
      max-width: remify(950px);
      left: 50%;
      transform: translateX(-50%);
      top: remify(40px);
      z-index: 10;
      margin-top: remify(-40px);
    }
  }

  .intro-text {
    margin-right: 0;

    @include min-screen(bp(tablet-p)) {
      margin-bottom: 0;
      flex: 0 1 remify(200px);
    }

    p {
     @include font-scale(level-2);
    }

    a {
      display: block;
      color: currentColor;
      margin-top: remify(16px);
      @include font-scale(level-1, bold);
    }

  }

  .list {
    margin-bottom: 0;

    @include min-screen(bp(tablet-p)) {
      display: flex;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: remify(16px);

      &:last-child {
        margin-bottom: 0;
        @include min-screen(bp(tablet-p)) {
          margin-right: 0;
        }
      }

      @include min-screen(bp(tablet-p)) {
        margin-bottom: 0;
        margin-right: remify(16px);
      }

    }

    img {
      margin-right: remify(16px);
      width: remify(54px);
      height: remify(54px);
    }

  }

}

/*------------------------------------*\
  MBL Modifier
\*------------------------------------*/
.c-addon--mbl {
  flex-direction: column;
  gap: remify(16px);
  background-color: primary(sky, 20);
  justify-content: initial;
  align-items: flex-start;

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    align-items: center;
  }

  .c-addon__inner {
    display: flex;
    gap: remify(16px);
  }

  .c-addon__features {
    flex-direction: column;
    gap: remify(8px);
    color: primary(night, 100);
    flex: initial;
    align-self: flex-start;
  }

  .c-addon__title {
    @include font-scale(level-4, bold);
  }

  .c-addon__subtitle {
    @include font-scale(level-3, light);
  }

  .c-addon__body {
    @include font-scale(level-2);
  }

  .c-addon__interaction {
    @include min-screen(bp(tablet)) {
      margin-left: auto;
    }
  }

  .c-addon__image {
    display: none;
    
    @include min-screen(bp(tablet)) {
      display: block;
      margin-right: remify(24px);
    }

    @include min-screen(bp(tablet-p)) {
      margin-right: remify(48px);
    }
    
    img {
      min-width: remify(90px);
    }
  }

  .c-addon__list {
    margin-top: remify(8px);
    background-color: secondary(basic-white, 100);
    border-radius: remify(12px);
    padding: remify(16px);
    font-weight: fw(semibold);
  }

}

URL: /components/raw/addon/_addon.scss
Filesystem Path: src/views/03-organisms/addon/_addon.scss
Size: 10 KB

Content:


                                (function($) {

  var $qtyBtnTrigger = $('.js-enable-qty-trigger');
  var $qtyBtn = $('.js-btn-qty');
  var $priceCtrl = $('.js-mbl-price-ctrl');

  $qtyBtnTrigger.click(function(){
    $(this).hide();
    $qtyBtn.css({'display': 'flex', 'justify-content': 'space-around'});
    $qtyBtn.find('.minus').focus();
    $priceCtrl.show();
  });


  /********
   !!! 
   THIS PART IS NOW 
   in file _ src/views/01-atoms/ctas/button/button--qty.js _ 
   leave here commented for future references
   !!!
  ********/
  
  // // MANAGE BUTTON/INPUT ADD/REMOVE VIP LOUNGE
  // var qtyValue = $('#vip_lounge_qty');
  // var addBtn = $('.js-toggle-add');
  // var removeBtn = $('.js-toggle-remove');
  // var icon = $('#icon_toggle_lounge');
  // var parkTooltip = $('#tooltip_toggle_lounge');

  // // increase value
  // addBtn.click(function() {
  //   $(removeBtn).prop('disabled', false);
  //   $(parkTooltip).removeClass('active');
  //   $(icon).addClass('active');
  //   $(qtyValue).val(function(i, oldval) {
  //     return ++oldval;
  //   })
  // });

  // // decrease value
  // removeBtn.click(function() {
  //   $(qtyValue).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/addon/addon.js
Filesystem Path: src/views/03-organisms/addon/addon.js
Size: 1.4 KB

Handle: @addon
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/addon/addon.hbs
References (2): @tooltip, @button
Referenced by (7): @page-car-valet-step-2, @page-mbl-vouchers-list, @page-parking-vouchers-list, @page-mbl-thanks-cross-sell, @page-only-mbl-thank-you, @page-reservation-detail-flight, @page-flights-payed

No notes defined.