buttons.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // Button variants
  2. //
  3. // Easily pump out default styles, as well as :hover, :focus, :active,
  4. // and disabled options for all buttons
  5. .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. background-image: none;
  26. border-color: darken(@border, 12%);
  27. &:hover,
  28. &:focus,
  29. &.focus {
  30. color: @color;
  31. background-color: darken(@background, 17%);
  32. border-color: darken(@border, 25%);
  33. }
  34. }
  35. &.disabled,
  36. &[disabled],
  37. fieldset[disabled] & {
  38. &:hover,
  39. &:focus,
  40. &.focus {
  41. background-color: @background;
  42. border-color: @border;
  43. }
  44. }
  45. .badge {
  46. color: @background;
  47. background-color: @color;
  48. }
  49. }
  50. // Button sizes
  51. .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  52. padding: @padding-vertical @padding-horizontal;
  53. font-size: @font-size;
  54. line-height: @line-height;
  55. border-radius: @border-radius;
  56. }