index.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. @import '../common/index.css';
  2. .van-button {
  3. position: relative;
  4. display: -webkit-inline-flex;
  5. display: inline-flex;
  6. -webkit-align-items: center;
  7. align-items: center;
  8. -webkit-justify-content: center;
  9. justify-content: center;
  10. box-sizing: border-box;
  11. padding: 0;
  12. text-align: center;
  13. vertical-align: middle;
  14. -webkit-appearance: none;
  15. -webkit-text-size-adjust: 100%;
  16. height: 44px;
  17. height: var(--button-default-height, 44px);
  18. line-height: 20px;
  19. line-height: var(--button-line-height, 20px);
  20. font-size: 16px;
  21. font-size: var(--button-default-font-size, 16px);
  22. transition: opacity 0.2s;
  23. transition: opacity var(--animation-duration-fast, 0.2s);
  24. border-radius: 2px;
  25. border-radius: var(--button-border-radius, 2px);
  26. }
  27. .van-button:before {
  28. position: absolute;
  29. top: 50%;
  30. left: 50%;
  31. width: 100%;
  32. height: 100%;
  33. border: inherit;
  34. border-radius: inherit;
  35. -webkit-transform: translate(-50%, -50%);
  36. transform: translate(-50%, -50%);
  37. opacity: 0;
  38. content: ' ';
  39. background-color: #000;
  40. background-color: var(--black, #000);
  41. border-color: #000;
  42. border-color: var(--black, #000);
  43. }
  44. .van-button:after {
  45. border-width: 0;
  46. }
  47. .van-button--active:before {
  48. opacity: 0.15;
  49. }
  50. .van-button--unclickable:after {
  51. display: none;
  52. }
  53. .van-button--default {
  54. color: #323233;
  55. color: var(--button-default-color, #323233);
  56. background: #fff;
  57. background: var(--button-default-background-color, #fff);
  58. border: 1px solid #ebedf0;
  59. border: var(--button-border-width, 1px) solid var(--button-default-border-color, #ebedf0);
  60. }
  61. .van-button--primary {
  62. color: #fff;
  63. color: var(--button-primary-color, #fff);
  64. background: #07c160;
  65. background: var(--button-primary-background-color, #07c160);
  66. border: 1px solid #07c160;
  67. border: var(--button-border-width, 1px) solid var(--button-primary-border-color, #07c160);
  68. }
  69. .van-button--info {
  70. color: #fff;
  71. color: var(--button-info-color, #fff);
  72. background: #1989fa;
  73. background: var(--button-info-background-color, #1989fa);
  74. border: 1px solid #1989fa;
  75. border: var(--button-border-width, 1px) solid var(--button-info-border-color, #1989fa);
  76. }
  77. .van-button--danger {
  78. color: #fff;
  79. color: var(--button-danger-color, #fff);
  80. background: #ee0a24;
  81. background: var(--button-danger-background-color, #ee0a24);
  82. border: 1px solid #ee0a24;
  83. border: var(--button-border-width, 1px) solid var(--button-danger-border-color, #ee0a24);
  84. }
  85. .van-button--warning {
  86. color: #fff;
  87. color: var(--button-warning-color, #fff);
  88. background: #ff976a;
  89. background: var(--button-warning-background-color, #ff976a);
  90. border: 1px solid #ff976a;
  91. border: var(--button-border-width, 1px) solid var(--button-warning-border-color, #ff976a);
  92. }
  93. .van-button--plain {
  94. background: #fff;
  95. background: var(--button-plain-background-color, #fff);
  96. }
  97. .van-button--plain.van-button--primary {
  98. color: #07c160;
  99. color: var(--button-primary-background-color, #07c160);
  100. }
  101. .van-button--plain.van-button--info {
  102. color: #1989fa;
  103. color: var(--button-info-background-color, #1989fa);
  104. }
  105. .van-button--plain.van-button--danger {
  106. color: #ee0a24;
  107. color: var(--button-danger-background-color, #ee0a24);
  108. }
  109. .van-button--plain.van-button--warning {
  110. color: #ff976a;
  111. color: var(--button-warning-background-color, #ff976a);
  112. }
  113. .van-button--large {
  114. width: 100%;
  115. height: 50px;
  116. height: var(--button-large-height, 50px);
  117. }
  118. .van-button--normal {
  119. padding: 0 15px;
  120. font-size: 14px;
  121. font-size: var(--button-normal-font-size, 14px);
  122. }
  123. .van-button--small {
  124. min-width: 60px;
  125. min-width: var(--button-small-min-width, 60px);
  126. height: 30px;
  127. height: var(--button-small-height, 30px);
  128. padding: 0 8px;
  129. padding: 0 var(--padding-xs, 8px);
  130. font-size: 12px;
  131. font-size: var(--button-small-font-size, 12px);
  132. }
  133. .van-button--mini {
  134. display: inline-block;
  135. min-width: 50px;
  136. min-width: var(--button-mini-min-width, 50px);
  137. height: 22px;
  138. height: var(--button-mini-height, 22px);
  139. font-size: 10px;
  140. font-size: var(--button-mini-font-size, 10px);
  141. }
  142. .van-button--mini + .van-button--mini {
  143. margin-left: 5px;
  144. }
  145. .van-button--block {
  146. display: -webkit-flex;
  147. display: flex;
  148. width: 100%;
  149. }
  150. .van-button--round {
  151. border-radius: 999px;
  152. border-radius: var(--button-round-border-radius, 999px);
  153. }
  154. .van-button--square {
  155. border-radius: 0;
  156. }
  157. .van-button--disabled {
  158. opacity: 0.5;
  159. opacity: var(--button-disabled-opacity, 0.5);
  160. }
  161. .van-button__text {
  162. display: inline;
  163. }
  164. .van-button__icon + .van-button__text:not(:empty),
  165. .van-button__loading-text {
  166. margin-left: 4px;
  167. }
  168. .van-button__icon {
  169. min-width: 1em;
  170. line-height: inherit !important;
  171. vertical-align: top;
  172. }
  173. .van-button--hairline {
  174. padding-top: 1px;
  175. border-width: 0;
  176. }
  177. .van-button--hairline:after {
  178. border-color: inherit;
  179. border-width: 1px;
  180. border-radius: 4px;
  181. border-radius: calc(var(--button-border-radius, 2px) * 2);
  182. }
  183. .van-button--hairline.van-button--round:after {
  184. border-radius: 999px;
  185. border-radius: var(--button-round-border-radius, 999px);
  186. }
  187. .van-button--hairline.van-button--square:after {
  188. border-radius: 0;
  189. }