buttons.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. // Button variants
  2. //
  3. .button-variant(@color; @background; @hover-background; @active-background; @disabled-background: @gray-light) {
  4. color: @color;
  5. background-color: @background;
  6. &:hover,
  7. &.hover,
  8. &:focus,
  9. &:active,
  10. &.active,
  11. .open > .dropdown-toggle& {
  12. color: @color;
  13. background-color: @hover-background;
  14. border-color: @hover-background;
  15. }
  16. &:active,
  17. &.active,
  18. .open > .dropdown-toggle& {
  19. background: @active-background;
  20. border-color: @active-background;
  21. }
  22. &.disabled,
  23. &[disabled],
  24. fieldset[disabled] & {
  25. &,
  26. &:hover,
  27. &.hover,
  28. &:focus,
  29. &:active,
  30. &.active {
  31. background-color: @disabled-background;
  32. border-color: @background;
  33. }
  34. }
  35. .badge {
  36. color: @background;
  37. background-color: @inverse;
  38. }
  39. }
  40. // Button sizes
  41. .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  42. padding: @padding-vertical @padding-horizontal;
  43. font-size: @font-size;
  44. line-height: @line-height;
  45. border-radius: @border-radius;
  46. }
  47. // Social button variants
  48. .social-button-variant(@color; @background) {
  49. color: @color;
  50. background-color: @background;
  51. &:hover,
  52. &:focus {
  53. background-color: mix(@background, white, 80%);
  54. }
  55. &:active,
  56. &.active {
  57. background-color: mix(@background, black, 85%);
  58. }
  59. }