Aeroporto di Bologna - Design System

Buttons 

<!-- Default -->
<button type="button" class="c-button c-button" data-toggle="data-toggle">

    Button

</button>


<!-- Submit -->
<button type="button" class="c-button c-button--submit" data-toggle="data-toggle">

    Submit

</button>


<!-- Confirm -->
<button type="button" class="c-button c-button--confirm" data-toggle="data-toggle">

    Confirm

</button>


<!-- Danger -->
<button type="button" class="c-button c-button--danger" data-toggle="data-toggle">

    Delete

</button>


<!-- Adding -->
<button type="button" class="c-button c-button--adding" data-toggle="data-toggle">

    Add

</button>


<!-- Ghost -->
<button type="button" class="c-button c-button--ghost" data-toggle="data-toggle">

    Modifica

</button>


<!-- Disabled -->
<button type="button" class="c-button c-button--disabled" disabled data-toggle="data-toggle">

    Disabled

</button>


<!-- Large -->
<button type="button" class="c-button c-button--submit c-button--large" data-toggle="data-toggle">

    Submit

</button>


<!-- As Link -->
<button type="button" class="c-button c-button--as-link" data-toggle="data-toggle">

    Remove

</button>


<!-- As Link With Icon -->
<button type="button" class="c-button c-button--as-link" data-toggle="data-toggle">

    Lorem ipsum
    <svg class="c-icon--24">
        <use xlink:href="#ic-info-serif"></use>
    </svg>
</button>


<!-- Qty -->
<div class="c-button c-button--qty c-button" 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="quantity" aria-label="Quantità" min="1">
    <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
</div>


<!-- Icon -->
<button type="button" class="c-button c-button--icon c-button--submit">
    <svg class="svg-24">
        <use xlink:href="#ic_chevron_right_black_24px"></use>
    </svg></button>


<!-- Icon Square -->
<button type="button" class="c-button c-button--icon-square c-button--submit">
    <svg class="svg-24">
        <use xlink:href="#ic_chevron_right_black_24px"></use>
    </svg></button>


<!-- Icon Text -->
<button type="button" class="c-button c-button--icon-text u-bg-color-negative" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-map">
    <svg class="svg-16">
        <use xlink:href="#ic-trash"></use>
    </svg> Elimina
</button>


<!-- Tooltip -->
<div class="c-button__shift-up">

    <div class="c-button__extension">

        <div class="c-button__service-tooltip">
            <svg class="svg-24">
                <use xlink:href="#ic_directions_car_black_24px"></use>
            </svg>
        </div>

        <div class="c-button__service-tooltip js-toggle-receiver active" data-toggle="lounge-service" id="tooltip_toggle_lounge">
            <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>
                    Paga ora il parcheggio e risparmia tempo.
                </p>
            </span>
        </div>

    </div>

    <div class="c-button c-button--extended">
        <button type="button" class="">
            Extended
        </button>
    </div>

</div>


<!-- Support Icon -->
<button type="button" class="c-button c-button">
    Button
    <svg class="">
        <use xlink:href="#"></use>
    </svg></button>


<!-- Default -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Submit -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Confirm -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Danger -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Adding -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Ghost -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Disabled -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Large -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- As Link -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- As Link With Icon -->
<button 
  type="{{ type }}" 
  class="c-button {{ modifier }}"
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
  {{#if data-toggle}}data-toggle="{{ data-toggle }}"{{/if}}
  {{#if id}}id="{{ id }}"{{/if}}
>

  {{#if text}}{{{ text }}}{{/if}}
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
</button>

<!-- Qty -->
<div class="c-button c-button--qty {{ modifier }}" 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="{{ input-id }}" aria-label="Quantità" min="1">
  <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
</div>

<!-- Icon -->
<button
  type="{{ type }}" 
  class="c-button {{ modifier }}" 
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
>
  {{> @icon symbol=svg.symbol  class=svg.class  }}
</button>

<!-- Icon Square -->
<button
  type="{{ type }}" 
  class="c-button {{ modifier }}" 
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
>
  {{> @icon symbol=svg.symbol  class=svg.class  }}
</button>

<!-- Icon Text -->
<button
  type="{{ type }}" 
  class="c-button {{ modifier }}" 
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
>
  {{> @icon symbol=svg.symbol  class=svg.class  }}
  {{#if text}}{{{ text }}}{{/if}}
</button>

<!-- Tooltip -->
<div class="c-button__shift-up">

    <div class="c-button__extension">  
        
        <div class="c-button__service-tooltip">
          {{> @icon icon-extended }} 
        </div>

        <div class="c-button__service-tooltip js-toggle-receiver active" data-toggle="lounge-service" id="tooltip_toggle_lounge">
          {{> @tooltip single-tooltip }}
        </div>
      
        {{#if additional-service}}
        <p>+</p>
        <div class="c-button__service-tooltip ">
            {{> @icon icon-additional }}
        </div>
        <div class="c-button__service-tooltip " data-toggle="lounge-service" id="icon_toggle_lounge">
            {{> @tooltip additional-tooltip }}
        </div>
        {{/if}}
        
    </div>

    <div class="c-button {{ modifier }}">
      <button 
        type="{{ type }}" 
        class=""
        {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
        {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
        {{#if disabled}}disabled{{/if}}
      >
        {{{ text }}}
      </button>
    </div>

</div>

<!-- Support Icon -->
<button
  type="{{ type }}" 
  class="c-button {{ modifier }}" 
  {{#if aria-label}}aria-label="{{ aria-label }}"{{/if}}
  {{#if opens-dialog}}aria-controls="{{ opens-dialog }}"{{/if}}
  {{#if disabled}}disabled{{/if}}
>
  {{#if text}}{{{ text }}}{{/if}}
  {{> @icon symbol=svg.symbol  class=svg.class  }}
</button>
 
/* Default */
{
  "name": "default",
  "type": "button",
  "text": "Button",
  "modifier": "c-button",
  "data-toggle": "data-toggle"
}


/* Submit */
{
  "name": "default",
  "type": "button",
  "text": "Submit",
  "modifier": "c-button--submit",
  "data-toggle": "data-toggle"
}


/* Confirm */
{
  "name": "default",
  "type": "button",
  "text": "Confirm",
  "modifier": "c-button--confirm",
  "data-toggle": "data-toggle"
}


/* Danger */
{
  "name": "default",
  "type": "button",
  "text": "Delete",
  "modifier": "c-button--danger",
  "data-toggle": "data-toggle"
}


/* Adding */
{
  "name": "default",
  "type": "button",
  "text": "Add",
  "modifier": "c-button--adding",
  "data-toggle": "data-toggle"
}


/* Ghost */
{
  "name": "default",
  "type": "button",
  "text": "Modifica",
  "modifier": "c-button--ghost",
  "data-toggle": "data-toggle"
}


/* Disabled */
{
  "name": "default",
  "type": "button",
  "text": "Disabled",
  "modifier": "c-button--disabled",
  "data-toggle": "data-toggle",
  "disabled": true
}


/* Large */
{
  "name": "submit",
  "type": "button",
  "text": "Submit",
  "modifier": "c-button--submit c-button--large",
  "data-toggle": "data-toggle"
}


/* As Link */
{
  "name": "default",
  "type": "button",
  "text": "Remove",
  "modifier": "c-button--as-link",
  "data-toggle": "data-toggle"
}


/* As Link With Icon */
{
  "name": "default",
  "type": "button",
  "text": "Lorem ipsum",
  "modifier": "c-button--as-link",
  "data-toggle": "data-toggle",
  "svg": {
    "symbol": "ic-info-serif",
    "class": "c-icon--24"
  }
}


/* Qty */
{
  "name": "default",
  "type": "button",
  "text": "Button",
  "modifier": "c-button",
  "data-toggle": "data-toggle",
  "input-id": "quantity"
}


/* Icon */
{
  "name": "default",
  "type": "button",
  "text": "Button",
  "modifier": "c-button--icon c-button--submit",
  "data-toggle": "data-toggle",
  "svg": {
    "symbol": "ic_chevron_right_black_24px",
    "class": "svg-24"
  }
}


/* Icon Square */
{
  "name": "default",
  "type": "button",
  "text": "Button",
  "modifier": "c-button--icon-square c-button--submit",
  "data-toggle": "data-toggle",
  "svg": {
    "symbol": "ic_chevron_right_black_24px",
    "class": "svg-24"
  }
}


/* Icon Text */
{
  "name": "default",
  "type": "button",
  "text": "Elimina",
  "modifier": "c-button--icon-text u-bg-color-negative",
  "data-toggle": "data-toggle",
  "opens-dialog": "dialog-p1-map",
  "aria-label": "Apri la modale per consultare la mappa del parcheggio",
  "svg": {
    "symbol": "ic-trash",
    "class": "svg-16"
  }
}


/* Tooltip */
{
  "name": "default",
  "type": "button",
  "text": "Extended",
  "modifier": "c-button--extended",
  "data-toggle": "data-toggle",
  "extended": true,
  "single-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": "Paga ora il parcheggio e risparmia tempo."
  },
  "additional-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": "Paga ora il parcheggio e l’ingresso in Vip Lounge per ottenere lo sconto del 20% sulla Vip Lounge."
  },
  "icon-extended": {
    "symbol": "ic_directions_car_black_24px",
    "class": "svg-24"
  },
  "icon-additional": {
    "symbol": "ic_weekend_black_24px",
    "class": "svg-24"
  }
}


/* Support Icon */
{
  "name": "default",
  "type": "button",
  "text": "Button",
  "modifier": "c-button",
  "data-toggle": "data-toggle"
}
  • Content: 
    .c-button {
  border-radius: remify(12px);
  padding: remify(12px) remify(24px);
  border: none;
  transition: .3s;
  font-family: $font-stack;
  background-color: primary(night, 100);
  color: #fff;

  &:hover {
    background-color: primary(night, 120);
    // @include shadow('high', primary(sun, 100) );
  }
  &:active{
    background-color: primary(night, 100);
  }

  &:focus {
    @include outline;
  }

  .c-launch--complex & {
    position: relative;
    bottom: initial;
    left: initial;
    transform: none;
    margin-top: remify(16px);
    align-self: center;

    @include min-screen(bp(tablet)) {
      margin-top: auto;
    }
  }

  .c-flight-product & {

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

  .c-booking-info__button & {
    font-size: 75%;
    padding-top: remify(8px);
    padding-bottom: remify(8px);

    @include min-screen(bp(phablet)) {
      font-size: 100%;
      padding-top: remify(12px);
      padding-bottom: remify(12px);
    }

  }

  &[disabled], &:disabled {
    cursor: not-allowed;
  }

  &.is-carousel-sibling {
    grid-column: main;
    padding: remify(24px);
    max-width: remify(350px);
    margin: 0 auto remify(120px);

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      /* IE10+ CSS styles */
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

  }

  & + p {
    margin-top: remify(16px);
  }

  &.opens-flights-form {
    grid-column: main;
    max-width: remify(360px);
    margin: 0 auto;
    @include shadow(high);

    .c-main--flights-destination & {
      margin-top: remify(-40px);
      z-index: 1;
    }

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

  }

  .c-follower__button &,
  .c-tuned__apps & {
    display: flex;
    align-items: center;
    justify-content: center;

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

}

  .c-button--submit {
    background-color: primary(sun, 100);
    color: aviation(imbarchi);
    &:hover {
      background-color: primary(sun, 120);
    }
    &:active{
      background-color: darken( primary(sun, 100) , 3% );
    }

  }

  .c-button--confirm {
    background-color: status(positive);
    color: #fff;
    &:hover {
      // @include shadow('high', status(positive) );
      background-color: darken( status(positive) , 3% );
    }
    &:active{
      //background-color: darken( status(positive) , 3% );
    }
  }

  .c-button--danger {
    background-color: status(negative);
    color: #fff;
    &:hover {
      //@include shadow('high', status(negative) );
      background-color: darken( status(negative) , 3% );
    }
    &:active{
      //background-color: darken( status(negative) , 3% );
    }
  }

  .c-button--adding {
    background-color: primary(sky, 120);
    color: #fff;

    svg {
      vertical-align: text-bottom;
    }

    svg * {
      fill: currentColor;
    }
    
    &:hover {
      background-color: darken( primary(sky, 120) , 3% );
      .c-form--mbl &,
      .c-form & {
        box-shadow: none;
      }
    }
    &:active{
      
    }

    .c-form--parkings &,
    .c-addon--benefit &,
    .c-addon & {
      background-color: primary(sky, 120);
    }

  }

  .c-button--ghost {
    background-color: transparent;
    color: primary(sky, 120);
    border: remify(1px) solid primary(sky, 120); 
    &:hover {
      @include shadow('high', primary(sky, 100) );
      background-color: primary(sky, 100);
      color: #fff;
    }
    &:active{
      background-color: darken( primary(sky, 100) , 3% );
    }

    .c-form--flights-edit.o-spotlight__element--overlay & {
      @include max-screen(bp(tablet-l)) {
        background-color: primary(sky, 100);
        color: #fff;
      }
    }
    
    // Hack for Safari (web and mobile)
    // See also in: '/src/views/02-molecules/molecule-collapsible/_collapsible.scss'
    .c-collapsible--btn & {
      // @supports (-webkit-appearance:none) {
      //   background-color: primary(sky, 100);
      //   color: #fff;
      // }
    }

  }

  .c-button--disabled {
    background-color: primary(night, 20);
    color: rgba(aviation(imbarchi), .8);
    &:active{
      top: 0;
    }
    &:hover { 
      background-color: primary(night, 20);
    }

  }

  .c-button--as-link {
    background-color: transparent;
    color: primary(sky, 120);
    text-transform: initial;
    text-decoration: underline;
    text-underline-position: under;
    border-radius: 0;
    padding: 0;
    cursor: pointer;

    &:hover { 
      background-color: transparent;
    }

    &:active{
      top: 0;
    }

    &.strong {
      font-weight: fw(bold);
    }

    svg, .c-icon {
      vertical-align: middle;
      margin-left: remify(4px);
    }

    .c-button + & {
      margin-top: remify(16px);
    }

    .c-suggestion & {
      color: #fff;
      font-size: 75%;
      margin: 0 auto;
      @include min-screen( bp(tablet) ) {
        margin: initial;
      }
    }
    
    .c-suggestion--minimal & {
      color: primary(sky, 100);
    }

    .c-dialog--save-and-book & {
      text-transform: uppercase;
      color: primary(night, 100);
    }

    // .c-form & {
    //   color: primary(night, 100);
    // }

    .c-product__type & {
      color: primary(sky, 100);
    }

    .c-launch--complex & {
      margin-left: 0;
    }

    &.add-pax {
      margin-bottom: remify(32px);
    }

  }

  .c-button--large {
    padding: remify(24px) remify(48px);
  }

  .c-button--link {
    @extend .c-link--icon;
  }

  .c-button--qty {
    background-color: secondary(soft, 100);
    color: secondary(text, 100);
    display: inline-block;
    padding: remify(6px) remify(16px);
  
    &:hover,
    &:active{
      background-color: secondary(soft, 100);
    }
    
    .c-addon--benefit & {
      max-width: remify(250px);
    }

    .c-form--mbl &,
    .c-form & {
      display: flex;
      padding-bottom: 0;
    }

    .c-form & {
      // width: remify(44px);
      // @include min-screen( bp(tablet-p) ) {
      //   margin: 0;
      // }
    }

    button, input {
      -webkit-appearance: none;
      -moz-appearance:    none;
      appearance:         none;
      background-color: transparent;
      border: none;
      text-align: center;
    }

    button:active {
      position: relative;
      top: remify(1px);
    }

    button {
      font-size: remify(24px);
      color: primary(sky, 100);
      width: remify(24px);

      .c-form--mbl &,
      .c-form & {
        color: primary(sky, 100);
      }

      .c-addon--benefit & {
        color: #fff;
      }

    }

    input {
      width: remify(50px);
      padding-left: remify(12px);
      padding-right: remify(12px);

      .c-form label & {
        margin-top: 0;
        width: remify(50px);
      }

      .c-form--mbl &,
      .c-form & {
        color: secondary(text, 100);
      }

      .c-form & {
        font-size: 112.5%;
      }

      .c-addon--benefit & {
        color: #fff;
      }

    }

    &:active {
      top: initial;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }

  }

  .c-button--icon {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    width: remify(56px);
    height: remify(56px);
    border-radius: 50%;
    padding: 0;
    transition: .3s;

    svg {
      position: absolute;
      right: remify(8px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  
      * {
        fill: currentColor;
      }

    }
  }
  .c-button--icon-round {
    padding: remify(12px);
    // height: remify(48px);
    // width: remify(48px);
    svg {
      vertical-align: middle;

      * {
        fill: currentColor;
      }
    }
  }

  .c-button--icon-square {
    display: inline-block;
    text-decoration: none;
    position: relative;
    width: remify(28px);
    height: remify(28px);
    border-radius: remify(6px);
    padding: 0;
    transition: .3s;

    svg {
      position: absolute;
      right: remify(8px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  
      * {
        fill: currentColor;
      }

    }
  }

  .c-button--icon-text {
    display: inline-block;
    text-decoration: none;
    position: relative;
    width: remify(68px);
    height: remify(28px);
    border-radius: remify(6px);
    padding: 0 0 0 remify(16px);
    transition: .3s;
    font-size: remify(12px);

    svg {
      position: absolute;
      right: remify(8px);
      top: 50%;
      left: remify(4px);
      transform: translate(0, -50%);
  
      * {
        fill: currentColor;
      }

    }
  }

  .c-button--above {
    background-color: primary(sun, 100);
    color: aviation(imbarchi);
    position: relative;
    top: remify(-32px);
    
    &:hover {
      @include shadow('high', primary(sun, 100) );
    }
    &:active{
      background-color: darken( primary(sun, 100) , 3% );
    }

  }

  .c-button--pulse::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
  }
  .c-button--pulse {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    -webkit-animation: anim-moema-1 0.3s forwards;
    animation: anim-moema-1 0.3s forwards;
  }
  .c-button--pulse::before {
    -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
    animation: anim-moema-2 0.3s 0.3s forwards;
  }
  @-webkit-keyframes anim-moema-1 {
    60% {
      -webkit-transform: scale3d(0.8, 0.8, 1);
      transform: scale3d(0.8, 0.8, 1);
    }
    85% {
      -webkit-transform: scale3d(1.1, 1.1, 1);
      transform: scale3d(1.1, 1.1, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes anim-moema-1 {
    60% {
      -webkit-transform: scale3d(0.8, 0.8, 1);
      transform: scale3d(0.8, 0.8, 1);
    }
    85% {
      -webkit-transform: scale3d(1.1, 1.1, 1);
      transform: scale3d(1.1, 1.1, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @-webkit-keyframes anim-moema-2 {
    to {
      opacity: 0;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes anim-moema-2 {
    to {
      opacity: 0;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .c-button--submit.c-button--searchIcon {
    
    .c-form & {
      margin: 0;
      padding: remify(15px) remify(16px);
      height: remify(48px);
      position: absolute;
      right: 0;
      top: remify(25px);
      right: 0;
    }
        
  }

  .c-button__shift-up {
    display: flex;
    position: relative;
    // top: remify(-30px);
    // justify-content: center;
    
  }

/*------------------------------------*
    Extended modifier
*------------------------------------*/

.c-button--extended {
  padding: 0;
  display: flex;
  background-color: primary(sun, 100);
  color: aviation(imbarchi);
  position: relative;
  border-radius: 0 remify(12px) remify(12px) 0;
  @include shadow('medium');

  &:active{
    background-color: darken( primary(sun, 100) , 3% );
  }

  button {
    background-color: primary(sun, 100);
    color: aviation(imbarchi);
    border: none;
    text-transform: uppercase;
    transition: .3s;
    font-family: $font-stack;
    padding: remify(12px) remify(32px);
    border-radius: 0 remify(12px) remify(12px) 0;
  }

}

.c-button__extension {
  background-color: #fff;
  padding: remify(19px) remify(16px);
  top: 0;
  left: 0;
  border-radius: remify(12px) 0 0 remify(12px);
  display: flex;
  align-items: center;
  @include shadow('medium');

  .c-tooltip svg {
    fill: primary(night, 40);
  }

  .c-tooltip button {
    padding: 0;
  }

  p {
    margin: 0 remify(4px);
  }
  
  //toggle in flex, not block
  .c-button__service-tooltip {
    &.js-toggle-receiver.active {
      display: flex;
    }
  }

}

/*------------------------------------*
    Messenger modifier
*------------------------------------*/

.c-button--messenger {
  background-color: primary(sky, 120);
  color: secondary(page, 100);
  &:hover {
    @include shadow('high', primary(sky, 100) );
  }
  &:active{
    background-color: darken( primary(sky, 100) , 3% );
  }

  .c-product--payed.qrcode & {
    display: block;
    margin: 0 auto;
  }

  svg {
    vertical-align: bottom;
    * {
      fill: currentColor;
    }
  } 

}

/*------------------------------------*
  Elastic modifier
*------------------------------------*/
.c-button--elastic {
  width: 100%;

  @include min-screen(bp(phone-p)) {
    width: auto;
  }

}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/views/01-atoms/ctas/button/_button.scss
  • Size: 12.9 KB
  • Content: 
    (function($) {

  // Seleziona gli elementi "qty trigger" e associa un gestore di eventi "click"
  var qtyBtnTrigger = $('.js-qty-trigger');
  qtyBtnTrigger.each(function() {
    var $this = $(this);
    var btnQty = $this.next('.js-btn-qty');

    // Nasconde il pulsante attuale e mostra il pulsante successivo con il focus sul pulsante "-"
    $this.on('click', function() {
      $this.hide();
      btnQty.css({
        'display': 'flex',
        'justify-content': 'space-around'
      });
      btnQty.find('.minus').focus();
    });
  });

  // Seleziona i pulsanti "aggiungi" e "rimuovi" e associa un gestore di eventi "click"
  var toggleAddBtn = $('.js-toggle-add');
  var toggleRemoveBtn = $('.js-toggle-remove');
  var iconToggleLounge = $('#icon_toggle_lounge');
  var tooltipToggleLounge = $('#tooltip_toggle_lounge');

  toggleAddBtn.on('click', function() {
    // Aumenta il valore dell'input di 1
    var inputQty = $(this).prev('.js-qty-value');
    inputQty.val(parseInt(inputQty.val()) + 1);
    toggleRemoveBtn.prop('disabled', false);
  });

  toggleRemoveBtn.on('click', function() {
    // Diminuisce il valore dell'input di 1, ma non andare sotto lo zero
    var inputQty = $(this).next('.js-qty-value');
    var newVal = parseInt(inputQty.val()) - 1;
    if (newVal >= 0) {
      inputQty.val(newVal);
    }
    // Disabilita il pulsante "rimuovi" se il valore è 0, aggiunge la classe "active" al tooltip e rimuove la classe "active" dall'icona
    if (newVal <= 0) {
      $(this).prop('disabled', true);
      iconToggleLounge.removeClass('active');
      tooltipToggleLounge.addClass('active');
    }
  });

})(jQuery);
  • URL: /components/raw/button/button--qty.js
  • Filesystem Path: src/views/01-atoms/ctas/button/button--qty.js
  • Size: 1.7 KB

No notes defined.