btn.less 4.7 KB

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