GDL - Global Design Language

Button: States 

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

</button>
<br>

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

</button>
<br>

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

</button>
 
{% render "@button--default", {label:'Button disabled', disabled: true}, true %}
<br>
{% render "@button--primary", {label:'Button disabled', disabled: true}, true %}
<br>
{% render "@button--secondary", {label:'Button disabled', disabled: true}, true %}
 
/* No context defined. */
  • 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.