btn.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. // button reset
  2. .ant-btn {
  3. // display: inline-flex;
  4. // justify-content: center;
  5. // align-items: center;
  6. // &.ant-btn-success:not(.ant-btn-link),
  7. // &.ant-btn-error:not(.ant-btn-link),
  8. // &.ant-btn-warning:not(.ant-btn-link),
  9. // &.ant-btn-primary:not(.ant-btn-link) {
  10. // box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
  11. // }
  12. // &-group {
  13. // .ant-btn:not(:first-child) {
  14. // bottom: 1px;
  15. // }
  16. // }
  17. &-link:hover,
  18. &-link:focus,
  19. &-link:active {
  20. border-color: transparent !important;
  21. }
  22. &-primary {
  23. color: @white;
  24. background-color: @button-primary-color;
  25. border-width: 0;
  26. &:hover,
  27. &:focus {
  28. color: @white !important;
  29. background-color: @button-primary-hover-color;
  30. }
  31. &[disabled],
  32. &[disabled]:hover {
  33. color: @white;
  34. background-color: fade(@button-primary-color, 40%);
  35. }
  36. }
  37. &-default {
  38. color: @button-cancel-color;
  39. background-color: @button-cancel-bg-color;
  40. border-color: @button-cancel-border-color;
  41. &:hover,
  42. &:focus {
  43. color: @button-cancel-hover-color;
  44. background-color: @button-cancel-hover-bg-color;
  45. border-color: @button-cancel-hover-border-color;
  46. }
  47. &[disabled],
  48. &[disabled]:hover {
  49. color: fade(@button-cancel-color, 40%);
  50. background: fade(@button-cancel-bg-color, 40%);
  51. border-color: fade(@button-cancel-border-color, 40%);
  52. }
  53. }
  54. &.ant-btn-link.is-disabled {
  55. color: rgba(0, 0, 0, 0.25) !important;
  56. text-shadow: none;
  57. cursor: not-allowed;
  58. background-color: transparent;
  59. border-color: transparent;
  60. box-shadow: none;
  61. }
  62. // color: @white;
  63. &-success.ant-btn-link:not([disabled='disabled']) {
  64. color: @button-success-color;
  65. &:hover,
  66. &:focus {
  67. color: @button-success-hover-color;
  68. border-color: transparent;
  69. }
  70. }
  71. &-success.ant-btn-link.ant-btn-loading,
  72. &-warning.ant-btn-link.ant-btn-loading,
  73. &-error.ant-btn-link.ant-btn-loading,
  74. &-background-ghost.ant-btn-link.ant-btn-loading,
  75. &.ant-btn-link.ant-btn-loading {
  76. &::before {
  77. background: transparent;
  78. }
  79. }
  80. &-success:not(.ant-btn-link) {
  81. color: @white;
  82. background-color: @button-success-color;
  83. border-color: @button-success-color;
  84. border-width: 0;
  85. &:hover,
  86. &:focus {
  87. color: @white;
  88. background-color: @button-success-hover-color;
  89. border-color: @button-success-hover-color;
  90. }
  91. &[disabled],
  92. &[disabled]:hover {
  93. color: @white;
  94. background-color: fade(@button-success-color, 40%);
  95. // background-color: @button-success-disabled-color;
  96. border-color: fade(@button-success-color, 40%);
  97. }
  98. }
  99. &-warning.ant-btn-link:not([disabled='disabled']) {
  100. color: @button-warn-color;
  101. &:hover,
  102. &:focus {
  103. color: @button-warn-hover-color;
  104. border-color: transparent;
  105. }
  106. }
  107. &-warning:not(.ant-btn-link) {
  108. color: @white;
  109. background-color: @button-warn-color;
  110. border-color: @button-warn-color;
  111. border-width: 0;
  112. &:hover,
  113. &:focus {
  114. color: @white;
  115. background-color: @button-warn-hover-color;
  116. border-color: @button-warn-hover-color;
  117. }
  118. &[disabled],
  119. &[disabled]:hover {
  120. color: @white;
  121. background-color: fade(@button-warn-color, 40%);
  122. border-color: fade(@button-warn-color, 40%);
  123. // background-color: @button-warn-disabled-color;
  124. // border-color: @button-warn-disabled-color ;
  125. }
  126. }
  127. &-error.ant-btn-link:not([disabled='disabled']) {
  128. color: @button-error-color;
  129. &:hover,
  130. &:focus {
  131. color: @button-error-hover-color;
  132. border-color: transparent;
  133. }
  134. }
  135. &-error:not(.ant-btn-link) {
  136. color: @white;
  137. background-color: @button-error-color;
  138. border-color: @button-error-color;
  139. border-width: 0;
  140. &:hover,
  141. &:focus {
  142. color: @white;
  143. background-color: @button-error-hover-color;
  144. border-color: @button-error-hover-color;
  145. }
  146. &[disabled],
  147. &[disabled]:hover {
  148. color: @white;
  149. background-color: fade(@button-error-color, 40%);
  150. border-color: fade(@button-error-color, 40%);
  151. }
  152. }
  153. &-background-ghost.ant-btn-link,
  154. &.ant-btn-dashed:not([disabled='disabled']) {
  155. color: @text-color-call-out;
  156. &:hover {
  157. color: @button-primary-color;
  158. }
  159. }
  160. &-ghost {
  161. color: @button-ghost-color;
  162. background-color: @white;
  163. border-color: @button-ghost-color;
  164. border-width: 1px;
  165. &:hover,
  166. &:focus {
  167. color: @button-ghost-hover-color;
  168. background-color: @button-ghost-hover-bg-color;
  169. border-color: @button-ghost-hover-color;
  170. }
  171. &[disabled],
  172. &[disabled]:hover {
  173. color: @button-ghost-color;
  174. background: fade(@white, 40%);
  175. border-color: fade(@button-ghost-color, 40%);
  176. }
  177. }
  178. }