btn.less 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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. //
  27. // &:hover,
  28. // &:focus {
  29. // color: @white !important;
  30. // background-color: @button-primary-hover-color;
  31. // }
  32. //
  33. // &[disabled],
  34. // &[disabled]:hover {
  35. // color: @white;
  36. // background-color: fade(@button-primary-color, 40%);
  37. // }
  38. //}
  39. &-default {
  40. color: @button-cancel-color;
  41. background-color: @button-cancel-bg-color;
  42. border-color: @button-cancel-border-color;
  43. &:hover,
  44. &:focus {
  45. color: @button-cancel-hover-color;
  46. background-color: @button-cancel-hover-bg-color;
  47. border-color: @button-cancel-hover-border-color;
  48. }
  49. //&[disabled],
  50. //&[disabled]:hover {
  51. // color: fade(@button-cancel-color, 40%);
  52. // background: fade(@button-cancel-bg-color, 40%);
  53. // border-color: fade(@button-cancel-border-color, 40%);
  54. //}
  55. }
  56. [data-theme='light'] &.ant-btn-link.is-disabled {
  57. color: rgba(0, 0, 0, 0.25);
  58. text-shadow: none;
  59. cursor: not-allowed !important;
  60. background-color: transparent !important;
  61. border-color: transparent !important;
  62. box-shadow: none;
  63. }
  64. [data-theme='dark'] &.ant-btn-link.is-disabled {
  65. color: rgba(255, 255, 255, 0.25) !important;
  66. text-shadow: none;
  67. cursor: not-allowed !important;
  68. background-color: transparent !important;
  69. border-color: transparent !important;
  70. box-shadow: none;
  71. }
  72. // color: @white;
  73. &-success.ant-btn-link:not([disabled='disabled']) {
  74. color: @button-success-color;
  75. &:hover,
  76. &:focus {
  77. color: @button-success-hover-color;
  78. border-color: transparent;
  79. }
  80. &:active {
  81. color: @button-success-active-color;
  82. }
  83. }
  84. &-success.ant-btn-link.ant-btn-loading,
  85. &-warning.ant-btn-link.ant-btn-loading,
  86. &-error.ant-btn-link.ant-btn-loading,
  87. &-background-ghost.ant-btn-link.ant-btn-loading,
  88. &.ant-btn-link.ant-btn-loading {
  89. &::before {
  90. background: transparent;
  91. }
  92. }
  93. &-success:not(.ant-btn-link) {
  94. color: @white;
  95. background-color: @button-success-color;
  96. border-color: @button-success-color;
  97. border-width: 0;
  98. &:hover,
  99. &:focus {
  100. color: @white;
  101. background-color: @button-success-hover-color;
  102. border-color: @button-success-hover-color;
  103. }
  104. &:active {
  105. background-color: @button-success-active-color;
  106. border-color: @button-success-active-color;
  107. }
  108. &[disabled],
  109. &[disabled]:hover {
  110. color: @white;
  111. background-color: fade(@button-success-color, 40%);
  112. // background-color: @button-success-disabled-color;
  113. border-color: fade(@button-success-color, 40%);
  114. }
  115. }
  116. &-warning.ant-btn-link:not([disabled='disabled']) {
  117. color: @button-warn-color;
  118. &:hover,
  119. &:focus {
  120. color: @button-warn-hover-color;
  121. border-color: transparent;
  122. }
  123. &:active {
  124. color: @button-warn-active-color;
  125. }
  126. }
  127. &-warning:not(.ant-btn-link) {
  128. color: @white;
  129. background-color: @button-warn-color;
  130. border-color: @button-warn-color;
  131. border-width: 0;
  132. &:hover,
  133. &:focus {
  134. color: @white;
  135. background-color: @button-warn-hover-color;
  136. border-color: @button-warn-hover-color;
  137. }
  138. &:active {
  139. background-color: @button-warn-active-color;
  140. border-color: @button-warn-active-color;
  141. }
  142. &[disabled],
  143. &[disabled]:hover {
  144. color: @white;
  145. background-color: fade(@button-warn-color, 40%);
  146. border-color: fade(@button-warn-color, 40%);
  147. // background-color: @button-warn-disabled-color;
  148. // border-color: @button-warn-disabled-color ;
  149. }
  150. }
  151. &-error.ant-btn-link:not([disabled='disabled']) {
  152. color: @button-error-color;
  153. &:hover,
  154. &:focus {
  155. color: @button-error-hover-color;
  156. border-color: transparent;
  157. }
  158. &:active {
  159. color: @button-error-active-color;
  160. }
  161. }
  162. &-error:not(.ant-btn-link) {
  163. color: @white;
  164. background-color: @button-error-color;
  165. border-color: @button-error-color;
  166. border-width: 0;
  167. &:hover,
  168. &:focus {
  169. color: @white;
  170. background-color: @button-error-hover-color;
  171. border-color: @button-error-hover-color;
  172. }
  173. &:active {
  174. background-color: @button-error-active-color;
  175. border-color: @button-error-active-color;
  176. }
  177. &[disabled],
  178. &[disabled]:hover {
  179. color: @white;
  180. background-color: fade(@button-error-color, 40%);
  181. border-color: fade(@button-error-color, 40%);
  182. }
  183. }
  184. &-background-ghost.ant-btn-link,
  185. &.ant-btn-dashed:not([disabled='disabled']) {
  186. // color: @text-color-call-out;
  187. &:hover {
  188. color: @button-primary-color;
  189. }
  190. }
  191. &-background-ghost {
  192. color: @button-ghost-color;
  193. background-color: transparent;
  194. border-color: @button-ghost-color;
  195. border-width: 1px;
  196. &:hover,
  197. &:focus {
  198. color: @button-ghost-hover-color !important;
  199. background-color: @button-ghost-hover-bg-color;
  200. border-color: @button-ghost-hover-color;
  201. }
  202. &[disabled],
  203. &[disabled]:hover {
  204. color: fade(@white, 40%) !important;
  205. background-color: fade(@white, 40%);
  206. border-color: fade(@white, 40%) !important;
  207. }
  208. }
  209. &-background-ghost&-success:not(.ant-btn-link) {
  210. color: @button-success-color;
  211. background-color: transparent;
  212. border-color: @button-success-color;
  213. border-width: 1px;
  214. &:hover,
  215. &:focus {
  216. color: @button-success-hover-color !important;
  217. border-color: @button-success-hover-color;
  218. }
  219. &:active {
  220. color: @button-success-active-color;
  221. border-color: @button-success-active-color;
  222. }
  223. }
  224. &-background-ghost&-warn:not(.ant-btn-link) {
  225. color: @button-warn-color;
  226. background-color: transparent;
  227. border-color: @button-warn-color;
  228. border-width: 1px;
  229. &:hover,
  230. &: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. color: @button-error-hover-color !important;
  247. border-color: @button-error-hover-color;
  248. }
  249. &:active {
  250. color: @button-error-active-color;
  251. border-color: @button-error-active-color;
  252. }
  253. }
  254. &-ghost.ant-btn-link:not([disabled='disabled']) {
  255. color: @button-ghost-color;
  256. &:hover,
  257. &:focus {
  258. color: @button-ghost-hover-color;
  259. border-color: transparent;
  260. }
  261. }
  262. }