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