_buttons.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. // Button variants
  2. //
  3. // Easily pump out default styles, as well as :hover, :focus, :active,
  4. // and disabled options for all buttons
  5. @mixin button-variant($color, $background, $border) {
  6. color: $color;
  7. background-color: $background;
  8. border-color: $border;
  9. &:focus,
  10. &.focus {
  11. color: $color;
  12. background-color: darken($background, 10%);
  13. border-color: darken($border, 25%);
  14. }
  15. &:hover {
  16. color: $color;
  17. background-color: darken($background, 10%);
  18. border-color: darken($border, 12%);
  19. }
  20. &:active,
  21. &.active,
  22. .open > &.dropdown-toggle {
  23. color: $color;
  24. background-color: darken($background, 10%);
  25. border-color: darken($border, 12%);
  26. &:hover,
  27. &:focus,
  28. &.focus {
  29. color: $color;
  30. background-color: darken($background, 17%);
  31. border-color: darken($border, 25%);
  32. }
  33. }
  34. &:active,
  35. &.active,
  36. .open > &.dropdown-toggle {
  37. background-image: none;
  38. }
  39. &.disabled,
  40. &[disabled],
  41. fieldset[disabled] & {
  42. &,
  43. &:hover,
  44. &:focus,
  45. &.focus,
  46. &:active,
  47. &.active {
  48. background-color: $background;
  49. border-color: $border;
  50. }
  51. }
  52. .badge {
  53. color: $background;
  54. background-color: $color;
  55. }
  56. }
  57. // Button sizes
  58. @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  59. padding: $padding-vertical $padding-horizontal;
  60. font-size: $font-size;
  61. line-height: $line-height;
  62. border-radius: $border-radius;
  63. }