[Summary view] [Print] [Text view]

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