GDL - Global Design Language

Button: Special 

<a href="#" class="o-link-text c-btn c-btn--special  c-btn--large u-label-04 u-row-reverse u-cursor-pointer u-flex u-items-center u-justify-center">

    <div class="u-flex u-column u-items-center">
        <span class="u-label-02 ">
            Tabellino
        </span>
        <span class="u-label-04 ">
            Cesena - Gubbio
        </span>
    </div>

    <svg class="o-icon u-mr-xxsmall o-icon--md">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calcio"></use>
    </svg>

</a>
 
<a href="#" class="o-link-text c-btn c-btn--special {% if rounded %}c-btn--rounded{% endif %} c-btn--large u-label-04 u-row-reverse u-cursor-pointer u-flex u-items-center u-justify-center" >
  
  <div class="u-flex u-column u-items-center">
    <span class="u-label-02 ">
      {{ label }} 
    </span>
    <span class="u-label-04 ">
      {{ title }} 
    </span>
  </div>
  {% if icon %}
    <svg class="o-icon u-mr-xxsmall o-icon--md">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{ icon }}"></use>
    </svg>
  {% endif %}
  
  </a>
 
{
  "label": "Tabellino",
  "title": "Cesena - Gubbio",
  "icon": "calcio",
  "modifier": "special"
}
  • Content: 
    // Name:            Button
// Description:     Buttons in website
//
// Component:       `c-btn`
//
// Variants:        `.c-btn--default`
//                  `.c-btn--primary`
//                  `.c-btn--secondary`
//                  `.c-btn--special`            
//
// Dependencies:    `settings/color.tokens`
//                  `settings/spacing.tokens`
//                  `v7_colors`
//
// ========================================================================

.c-btn {

  // Custom properties
  // ======================================================================
  
  --btn-radius: #{$global-radius};
  --btn-color: #{$ui-02};
  --btn-label: #{$text-01};

  // ======================================================================
  
  padding: $padding-xsmall $padding-base;
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-color);
  box-shadow: 0 0 0 1px var(--btn-color);
  color: var(--btn-label);
  transition: $global-interactive-transition;

  //
  // States - Disables
  // 

  &:disabled {
    cursor: not-allowed;
  }

  // Size Variants
  // ========================================================================

  &--large {
    padding: $padding-small $padding-base;
  }

  &--small {
    padding: $padding-xxsmall $padding-small;
  }

  // Color Variants
  // ========================================================================

  //
  // Default color
  //

  &--default {
    --btn-color: var(--btn-default-color);
    --btn-label: var(--btn-default-label);
    background-color: transparent;

    &:hover {
      --btn-color: #{$ui-03};
      --btn-label: #{$text-02};
    }

    &:disabled {
      --btn-color: #{$disabled-02};
      --btn-label: #{$disabled-02};
    }
  }

  @if $layout!=amp {
    &--active {
      background-color: var(--theme-color);
      color: $link-01;
      box-shadow: 0 0 0 1px var(--theme-color);
    }
  }

  //
  // Primary color
  //

  &--primary {
    --btn-color: #{$interactive-01};
    --btn-label: #{$inverse-01};

    &:hover {
      --btn-color: #{$hover-01};
    }

    &:disabled {
      --btn-color: #{$disabled-01};
      --btn-label: #{$disabled-02};
    }
  }

  //
  // Secondary color
  //

  &--secondary {
    --btn-color: var(--btn-secondary-color);
    --btn-label: var(--btn-secondary-label);

    &:hover {
      --btn-color: var(--btn-secondary-color-hover);
    }

    &:disabled {
      --btn-color: #{$disabled-02};
      --btn-label: #{$disabled-02};
    }
  }

  //
  // Special color
  //

  &--special {
    background-color: transparent;
    --btn-color: var(--theme-color);
    --btn-label: var(--btn-default-label);

    &:hover {
      background: linear-gradient(#22274e, var(--theme-color));
      color: #{$link-01};
    }
  }

  &--error {
    background-color: transparent;
    --btn-color: #{$color-red}; 
    --btn-label: #{$inverse-01};

    &:hover {
      background: linear-gradient(#22274e, var(--theme-color));
      color: #{$link-01};
    }
  }

  // approfondimento

  &--approfondimento {
    --btn-color: #{$approfondimento-base};
    --btn-label: #{$inverse-01};

    &:hover {
      --btn-color: #{$approfondimento-light};
    }

    &:disabled {
      --btn-color: #{$disabled-01};
      --btn-label: #{$disabled-02};
    }
  }

  // Style Variants
  // ========================================================================

  &--reset,
  &--link {
    box-shadow: none;
    --btn-color: transparent;
  }

  &--reset {
    padding: 0;
    margin: 0;
    border: none;
  }

  &--link {
    --btn-label: #{$interactive-01};

    &:hover {
      --btn-label: #{$hover-01};
    }

    &:disabled {
      --btn-label: #{$disabled-01};
    }
  }

  // Shape Variants
  // ========================================================================

  &--rounded {
    --btn-radius: 40px;
  }

  // Custom Variants
  // ========================================================================
  
  &--facebook {

    &:hover {
      --btn-color: var(--btn-secondary-color-hover);
    }

    --btn-color: #1877f2;
    --btn-label: #{$inverse-01};
    font-weight: 700;
    text-align: center;
  }

  &--google {

    &:hover {
      --btn-color: var(--btn-secondary-color-hover);
    }

    --btn-color: #cf4332;
    --btn-label: #{$inverse-01};
    font-weight: 700;
    text-align: center;
  }

  &--apple {

    &:hover {
      --btn-color: var(--btn-secondary-color-hover);
    }
    
    --btn-color: var(--btn-secondary-color);
    --btn-label: var(--btn-secondary-label);
    font-weight: 700;
    text-align: center;
  }

  &--socials {

    --btn-color: var(--btn-default-color);
    --btn-label: var(--btn-default-label);
    background-color: transparent;

    &:hover {
      --btn-color: #{$ui-03};
      --btn-label: #{$text-02};
    }

    &:disabled {
      --btn-color: #{$disabled-02};
      --btn-label: #{$disabled-02};
    }
    
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/lib/components/button/button.scss
  • Size: 4.9 KB

No notes defined.