There are no notes for this item.

<button type="button" name="button" class="button button--disabled" disabled>Disabled</button>
  • Content:
    /*------------------------------------*\
        #BUTTONS
    \*------------------------------------*/
    
    .button {
      font-size: inherit;
      border: none;
      border-radius: $radius-default;
      color: $button-color;
      padding: 2px 13px;
      cursor: pointer;
      min-width: 75px;
      font-family: $font-regular;
    
      &:hover {
        border-color: $button-color;
      }
    
      &:focus,
      &:active {
        border-color: transparent;
      }
    
      &:disabled {
        opacity: .5;
        cursor: default;
        pointer-events: none;
        border: 1px solid transparent;
      }
    }
    
    .button--default {
      background-color: $button-default;
      box-shadow: 0px 0px 0px 1px $button-default;
      border: 1px solid $button-default;
    
      &:focus,
      &:active {
          box-shadow: 0px 0px 0px 1px $button-default-active;
      }
    }
    
    .button--primary {
      background-color: $button-primary;
      box-shadow: 0px 0px 0px 1px $button-primary;
      border: 1px solid $button-primary;
    
      &:focus,
      &:active {
          box-shadow: 0px 0px 0px 1px $button-primary-active;
      }
    }
    
  • URL: /components/raw/buttons/buttons.scss
  • Filesystem Path: components/02-atoms/01-buttons/buttons.scss
  • Size: 982 Bytes