[Summary view] [Print] [Text view]

   1  @use 'sass:color';
   2  
   3  /*
   4   * Button mixin- creates a button effect with correct
   5   * highlights/shadows, based on a base color.
   6   */
   7  @mixin button( $button-color, $button-text-color: #fff ) {
   8      background: $button-color;
   9      border-color: $button-color;
  10      color: $button-text-color;
  11  
  12      &:hover,
  13      &:focus {
  14          background: color.adjust($button-color, $lightness: 3%);
  15          border-color: color.adjust($button-color, $lightness: -3%);
  16          color: $button-text-color;
  17      }
  18  
  19      &:focus {
  20          box-shadow:
  21              0 0 0 1px #fff,
  22              0 0 0 3px $button-color;
  23      }
  24  
  25      &:active {
  26          background: color.adjust($button-color, $lightness: -5%);
  27          border-color: color.adjust($button-color, $lightness: -5%);
  28          color: $button-text-color;
  29      }
  30  
  31      &.active,
  32      &.active:focus,
  33      &.active:hover {
  34          background: $button-color;
  35          color: $button-text-color;
  36          border-color: color.adjust($button-color, $lightness: -15%);
  37          box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
  38      }
  39  }