[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: lighten( $button-color, 3% );
  13          border-color: darken( $button-color, 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: darken( $button-color, 5% );
  25          border-color: darken( $button-color, 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: darken( $button-color, 15% );
  35          box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
  36      }
  37  }