index.acss 5.4 KB

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