GDL - Global Design Language

Button: Primary 

<button class="c-btn c-btn--primary 
   
  
    u-flex
  
  
    u-label-04
   
   
  u-cursor-pointer  u-items-center">
    Button primary

</button>
 
<button class="c-btn c-btn--{{modifier}} 
  {% if rounded %}
    c-btn--rounded
  {% endif %} 
  {% if link %}
    c-btn--link 
  {% else %}
    u-flex
  {% endif %}
  {% if size=='large' %}
    c-btn--large
  {% elif size=='small' %} 
    c-btn--small 
    u-label-05
  {% else %}
    u-label-04
  {% endif %} 
  {% if iconleft %}
    u-row-reverse
  {% endif %} 
  u-cursor-pointer  u-items-center" 
  {% if disabled %}
    disabled
  {% endif %}
>
  {{ label }} 
  {% if icon %}
    <svg class="o-icon {% if label %}{% if iconleft %}u-mr-xxsmall {% else %} u-ml-xxsmall{% endif %}{% endif %} 
    {% if size=='large' %}o-icon--md{% elif size=='small' %}o-icon--sm{% else %}o-icon--md{% endif %} ">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{ icon }}"></use>
    </svg>
  {% endif %}
</button>
 
{
  "label": "Button primary",
  "modifier": "primary"
}
  • 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.