_mixins.scss 825 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. &:hover,
  10. &:focus {
  11. background: lighten( $button-color, 3% );
  12. border-color: darken( $button-color, 3% );
  13. color: $button-text-color;
  14. }
  15. &:focus {
  16. box-shadow:
  17. 0 0 0 1px #fff,
  18. 0 0 0 3px $button-color;
  19. }
  20. &:active {
  21. background: darken( $button-color, 5% );
  22. border-color: darken( $button-color, 5% );
  23. color: $button-text-color;
  24. }
  25. &.active,
  26. &.active:focus,
  27. &.active:hover {
  28. background: $button-color;
  29. color: $button-text-color;
  30. border-color: darken( $button-color, 15% );
  31. box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
  32. }
  33. }