Buttons: As Link With Icon

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <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>


        <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>


        
            
            {
  "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"
  }
}

File:

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

Handle: @button--as-link-with-icon
Preview:
- With layout
- Component only
Filesystem Path: src/views/01-atoms/ctas/button/button.hbs
References (1): @icon

No notes defined.