btn.less 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. // button reset
  2. .ant-btn.ant-btn {
  3. border-radius: 15px;
  4. [data-theme='light'] &-default {
  5. color: @button-default-color;
  6. background-color: @button-default-bg-color;
  7. border-color: @button-default-border-color;
  8. &:hover,
  9. &:focus,
  10. &:not(:disabled):hover,
  11. &:not(:disabled):focus {
  12. color: @button-default-hover-color;
  13. background-color: @button-default-hover-bg-color;
  14. border-color: @button-default-hover-border-color;
  15. }
  16. //&.active {
  17. // background-color: @button-default-hover-bg-color;
  18. // border-color: @button-default-hover-border-color;
  19. //}
  20. }
  21. &-primary {
  22. color: @white;
  23. background-color: @button-primary-color;
  24. &:hover,
  25. &:focus,
  26. &:not(:disabled):hover,
  27. &:not(:disabled):focus {
  28. color: @white;
  29. background-color: @button-primary-hover-color;
  30. }
  31. &:not(&-background-ghost):not([disabled]) {
  32. color: @white;
  33. }
  34. &:disabled {
  35. color: @white;
  36. background-color: fade(@primary-color, 70%);
  37. }
  38. }
  39. &-link {
  40. &:hover,
  41. &:focus,
  42. &:active,
  43. &:not(:disabled):hover,
  44. &:not(:disabled):focus,
  45. &:not(:disabled):active {
  46. border-color: transparent !important;
  47. }
  48. }
  49. [data-theme='light'] &.ant-btn-link.is-disabled {
  50. color: rgb(0 0 0 / 25%);
  51. text-shadow: none;
  52. cursor: not-allowed !important;
  53. background-color: transparent !important;
  54. border-color: transparent !important;
  55. box-shadow: none;
  56. }
  57. [data-theme='dark'] &.ant-btn-link.is-disabled {
  58. color: rgb(255 255 255 / 25%) !important;
  59. text-shadow: none;
  60. cursor: not-allowed !important;
  61. background-color: transparent !important;
  62. border-color: transparent !important;
  63. box-shadow: none;
  64. }
  65. &-success.ant-btn-link:not([disabled='disabled']) {
  66. color: @button-success-color;
  67. &:hover,
  68. &:focus,
  69. &:not(:disabled):hover,
  70. &:not(:disabled):focus {
  71. color: @button-success-hover-color;
  72. border-color: transparent;
  73. }
  74. &:active {
  75. color: @button-success-active-color;
  76. }
  77. }
  78. &-success.ant-btn-link.ant-btn-loading,
  79. &-warning.ant-btn-link.ant-btn-loading,
  80. &-error.ant-btn-link.ant-btn-loading,
  81. &-background-ghost.ant-btn-link.ant-btn-loading,
  82. &.ant-btn-link.ant-btn-loading {
  83. &::before {
  84. background: transparent;
  85. }
  86. }
  87. &-success:not(.ant-btn-link):not(.is-disabled) {
  88. color: @white;
  89. background-color: @button-success-color;
  90. border-color: @button-success-color;
  91. //border-width: 0;
  92. &:hover,
  93. &:focus,
  94. &:not(:disabled):hover,
  95. &:not(:disabled):focus {
  96. color: @white;
  97. background-color: @button-success-hover-color;
  98. border-color: @button-success-hover-color;
  99. }
  100. &:active,
  101. &:not(:disabled):active {
  102. background-color: @button-success-active-color;
  103. border-color: @button-success-active-color;
  104. }
  105. }
  106. &-warning.ant-btn-link:not([disabled='disabled']) {
  107. color: @button-warn-color;
  108. &:hover,
  109. &:focus,
  110. &:not(:disabled):hover,
  111. &:not(:disabled):focus {
  112. color: @button-warn-hover-color;
  113. border-color: transparent;
  114. }
  115. &:active,
  116. &:not(:disabled):active {
  117. color: @button-warn-active-color;
  118. }
  119. }
  120. &-warning:not(.ant-btn-link):not(.is-disabled) {
  121. color: @white;
  122. background-color: @button-warn-color;
  123. border-color: @button-warn-color;
  124. //border-width: 0;
  125. &:hover,
  126. &:focus,
  127. &:not(:disabled):hover,
  128. &:not(:disabled):focus {
  129. color: @white;
  130. background-color: @button-warn-hover-color;
  131. border-color: @button-warn-hover-color;
  132. }
  133. &:active,
  134. &:not(:disabled):active {
  135. background-color: @button-warn-active-color;
  136. border-color: @button-warn-active-color;
  137. }
  138. }
  139. &-error.ant-btn-link:not([disabled='disabled']) {
  140. color: @button-error-color;
  141. &:hover,
  142. &:focus,
  143. &:not(:disabled):hover,
  144. &:not(:disabled):focus {
  145. color: @button-error-hover-color;
  146. border-color: transparent;
  147. }
  148. &:active,
  149. &:not(:disabled):active {
  150. color: @button-error-active-color;
  151. }
  152. }
  153. &-error:not(.ant-btn-link):not(.is-disabled) {
  154. color: @white;
  155. background-color: @button-error-color;
  156. border-color: @button-error-color;
  157. //border-width: 0;
  158. &:hover,
  159. &:focus,
  160. &:not(:disabled):hover,
  161. &:not(:disabled):focus {
  162. color: @white;
  163. background-color: @button-error-hover-color;
  164. border-color: @button-error-hover-color;
  165. }
  166. &:active,
  167. &:not(:disabled):active {
  168. background-color: @button-error-active-color;
  169. border-color: @button-error-active-color;
  170. }
  171. }
  172. &-background-ghost {
  173. border-width: 1px;
  174. background-color: transparent !important;
  175. &[disabled],
  176. &[disabled]:hover {
  177. color: fade(@white, 40%) !important;
  178. background-color: transparent !important;
  179. border-color: fade(@white, 40%) !important;
  180. }
  181. }
  182. &-dashed&-background-ghost,
  183. &-default&-background-ghost {
  184. color: @button-ghost-color;
  185. border-color: @button-ghost-color;
  186. &:hover,
  187. &:focus,
  188. &:not(:disabled):hover,
  189. &:not(:disabled):focus {
  190. color: @button-ghost-hover-color;
  191. border-color: @button-ghost-hover-color;
  192. }
  193. &:active,
  194. &:not(:disabled):active {
  195. color: @button-ghost-active-color;
  196. border-color: @button-ghost-active-color;
  197. }
  198. &[disabled],
  199. &[disabled]:hover {
  200. color: fade(@white, 40%) !important;
  201. border-color: fade(@white, 40%) !important;
  202. }
  203. }
  204. &-background-ghost&-success:not(.ant-btn-link) {
  205. color: @button-success-color;
  206. background-color: transparent;
  207. border-color: @button-success-color;
  208. border-width: 1px;
  209. &:hover,
  210. &:focus,
  211. &:not(:disabled):hover,
  212. &:not(:disabled):focus {
  213. color: @button-success-hover-color !important;
  214. border-color: @button-success-hover-color;
  215. }
  216. &:active,
  217. &:not(:disabled):active {
  218. color: @button-success-active-color;
  219. border-color: @button-success-active-color;
  220. }
  221. }
  222. &-background-ghost&-warning:not(.ant-btn-link) {
  223. color: @button-warn-color;
  224. background-color: transparent;
  225. border-color: @button-warn-color;
  226. border-width: 1px;
  227. &:hover,
  228. &:focus,
  229. &:not(:disabled):hover,
  230. &:not(:disabled):focus {
  231. color: @button-warn-hover-color !important;
  232. border-color: @button-warn-hover-color;
  233. }
  234. &:active {
  235. color: @button-warn-active-color;
  236. border-color: @button-warn-active-color;
  237. }
  238. }
  239. &-background-ghost&-error:not(.ant-btn-link) {
  240. color: @button-error-color;
  241. background-color: transparent;
  242. border-color: @button-error-color;
  243. border-width: 1px;
  244. &:hover,
  245. &:focus,
  246. &:not(:disabled):hover,
  247. &:not(:disabled):focus {
  248. color: @button-error-hover-color !important;
  249. border-color: @button-error-hover-color;
  250. }
  251. &:active,
  252. &:not(:disabled):active {
  253. color: @button-error-active-color;
  254. border-color: @button-error-active-color;
  255. }
  256. }
  257. &-ghost.ant-btn-link:not([disabled='disabled']) {
  258. color: @button-ghost-color;
  259. &:hover,
  260. &:focus,
  261. &:not(:disabled):hover,
  262. &:not(:disabled):focus {
  263. color: @button-ghost-hover-color;
  264. border-color: transparent;
  265. }
  266. }
  267. &.purple {
  268. color: #fff !important;
  269. border-color: #605ca8 !important;
  270. background-color: #605ca8 !important;
  271. &:hover,
  272. &:focus,
  273. &:not(:disabled):hover,
  274. &:not(:disabled):focus {
  275. color: #fff !important;
  276. border-color: lighten(#605ca8, 10%) !important;
  277. background-color: lighten(#605ca8, 10%) !important;
  278. }
  279. }
  280. }