buttons.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. //
  2. // Buttons Flavor
  3. // --------------------------------------------------
  4. // mixins
  5. .misago-btn(@color, @bg, @color-hover, @bg-hover, @color-active, @bg-active) {
  6. &, &:disabled, &:disabled:hover {
  7. background: @bg;
  8. border: 1px solid @bg;
  9. color: @color;
  10. .box-shadow(none);
  11. }
  12. &:hover, &:focus {
  13. background: @bg-hover;
  14. border: 1px solid @bg-hover;
  15. color: @color-hover;
  16. .box-shadow(none);
  17. }
  18. &:active:focus, &:active,
  19. .dropdown.open & {
  20. background: @bg-active;
  21. border: 1px solid @bg-active;
  22. color: @color-active;
  23. .box-shadow(none);
  24. }
  25. &.btn-loading {
  26. &, &:disabled, &:disabled:hover,
  27. &:hover, &:focus,
  28. &:active:focus, &:active {
  29. color: transparent;
  30. }
  31. }
  32. }
  33. .misago-btn-outline(@color, @bg, @border,
  34. @color-hover, @bg-hover, @border-hover,
  35. @color-active, @bg-active, @border-active) {
  36. &, &:disabled, &:disabled:hover {
  37. background: @bg;
  38. border: 1px solid @border;
  39. color: @color;
  40. .box-shadow(none);
  41. }
  42. &:hover, &:focus {
  43. background: @bg-hover;
  44. border: 1px solid @border-hover;
  45. color: @color-hover;
  46. .box-shadow(none);
  47. }
  48. &:active:focus, &:active,
  49. .dropdown.open & {
  50. background: @bg-active;
  51. border: 1px solid @border-active;
  52. color: @color-active;
  53. .box-shadow(none);
  54. }
  55. &.btn-loading {
  56. &, &:disabled, &:disabled:hover,
  57. &:hover, &:focus,
  58. &:active:focus, &:active {
  59. background: @bg;
  60. border: 1px solid @border;
  61. color: transparent;
  62. .box-shadow(none);
  63. }
  64. }
  65. }
  66. // button styles
  67. .btn-default {
  68. .misago-btn(
  69. @btn-default-color,
  70. @btn-default-bg,
  71. @btn-default-hover-color,
  72. @btn-default-hover-bg,
  73. @btn-default-active-color,
  74. @btn-default-active-bg
  75. );
  76. }
  77. .btn-primary {
  78. .misago-btn(
  79. @btn-primary-color,
  80. @btn-primary-bg,
  81. @btn-primary-hover-color,
  82. @btn-primary-hover-bg,
  83. @btn-primary-active-color,
  84. @btn-primary-active-bg
  85. );
  86. }
  87. .btn-danger {
  88. .misago-btn(
  89. @btn-danger-color,
  90. @btn-danger-bg,
  91. @btn-danger-hover-color,
  92. @btn-danger-hover-bg,
  93. @btn-danger-active-color,
  94. @btn-danger-active-bg
  95. );
  96. }
  97. // outlined button styles
  98. .btn-default.btn-outline {
  99. .misago-btn-outline(
  100. @btn-default-outline-color,
  101. @btn-default-outline-bg,
  102. @btn-default-outline-border,
  103. @btn-default-outline-hover-color,
  104. @btn-default-outline-hover-bg,
  105. @btn-default-outline-hover-border,
  106. @btn-default-outline-active-color,
  107. @btn-default-outline-active-bg,
  108. @btn-default-outline-active-border
  109. );
  110. }
  111. .btn-primary.btn-outline {
  112. .misago-btn-outline(
  113. @btn-primary-outline-color,
  114. @btn-primary-outline-bg,
  115. @btn-primary-outline-border,
  116. @btn-primary-outline-hover-color,
  117. @btn-primary-outline-hover-bg,
  118. @btn-primary-outline-hover-border,
  119. @btn-primary-outline-active-color,
  120. @btn-primary-outline-active-bg,
  121. @btn-primary-outline-active-border
  122. );
  123. }