button.wxss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. .tui-btn-primary {
  2. background: #1582ad !important;
  3. color: #fff;
  4. }
  5. .tui-shadow-primary {
  6. box-shadow: 0 10rpx 14rpx 0 rgba(15, 96, 128, 0.14);
  7. }
  8. .tui-btn-danger {
  9. background: #eb0909 !important;
  10. color: #fff;
  11. }
  12. .tui-shadow-danger {
  13. box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
  14. }
  15. .tui-btn-warning {
  16. background: #fc872d !important;
  17. color: #fff;
  18. }
  19. .tui-shadow-warning {
  20. box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
  21. }
  22. .tui-btn-green {
  23. background: #35b06a !important;
  24. color: #fff;
  25. }
  26. .tui-shadow-green {
  27. box-shadow: 0 10rpx 14rpx 0 rgba(53, 176, 106, 0.2);
  28. }
  29. .tui-btn-blue {
  30. background: #5677fc !important;
  31. color: #fff;
  32. }
  33. .tui-shadow-blue {
  34. box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
  35. }
  36. .tui-btn-white {
  37. background: #fff !important;
  38. color: #333 !important;
  39. }
  40. .tui-btn-gray {
  41. background: #bfbfbf !important;
  42. color: #fff !important;
  43. }
  44. .tui-btn-black {
  45. background: #333 !important;
  46. color: #fff !important;
  47. }
  48. .tui-shadow-gray {
  49. box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
  50. }
  51. .tui-hover-gray {
  52. background: #f7f7f9 !important;
  53. }
  54. /* button start*/
  55. .tui-btn {
  56. width: 100%;
  57. position: relative;
  58. border: 0 !important;
  59. border-radius: 6rpx;
  60. padding-left: 0;
  61. padding-right: 0;
  62. overflow: visible;
  63. }
  64. .tui-btn::after {
  65. content: "";
  66. position: absolute;
  67. width: 200%;
  68. height: 200%;
  69. -webkit-transform-origin: 0 0;
  70. transform-origin: 0 0;
  71. -webkit-transform: scale(0.5, 0.5);
  72. transform: scale(0.5, 0.5);
  73. box-sizing: border-box;
  74. left: 0;
  75. top: 0;
  76. border-radius: 12rpx;
  77. border: 0;
  78. }
  79. .tui-btn-white::after {
  80. border: 1rpx solid #bfbfbf;
  81. }
  82. .tui-white-hover {
  83. background: #e5e5e5 !important;
  84. color: #2e2e2e !important;
  85. }
  86. .tui-dark-disabled {
  87. opacity: 0.6 !important;
  88. color: #fafbfc !important;
  89. }
  90. .tui-dark-disabled.tui-btn-danger {
  91. opacity: 1 !important;
  92. background: #fc8888 !important;
  93. }
  94. .tui-outline-hover {
  95. opacity: 0.5;
  96. }
  97. .tui-primary-hover {
  98. background: #126f93 !important;
  99. color: #e5e5e5 !important;
  100. }
  101. .tui-primary-outline::after {
  102. border: 1rpx solid #1582ad !important;
  103. }
  104. .tui-primary-outline {
  105. color: #1582ad !important;
  106. background: none;
  107. }
  108. .tui-danger-hover {
  109. background: #c80808 !important;
  110. color: #e5e5e5 !important;
  111. }
  112. .tui-danger-outline {
  113. color: #eb0909 !important;
  114. background: none;
  115. }
  116. .tui-danger-outline::after {
  117. border: 1rpx solid #eb0909 !important;
  118. }
  119. .tui-warning-hover {
  120. background: #d67326 !important;
  121. color: #e5e5e5 !important;
  122. }
  123. .tui-warning-outline {
  124. color: #fc872d !important;
  125. background: none;
  126. }
  127. .tui-warning-outline::after {
  128. border: 1px solid #fc872d !important;
  129. }
  130. .tui-green-hover {
  131. background: #2d965a !important;
  132. color: #e5e5e5 !important;
  133. }
  134. .tui-green-outline {
  135. color: #35b06a !important;
  136. background: none;
  137. }
  138. .tui-green-outline::after {
  139. border: 1rpx solid #35b06a !important;
  140. }
  141. .tui-blue-hover {
  142. background: #4a67d6 !important;
  143. color: #e5e5e5 !important;
  144. }
  145. .tui-blue-outline {
  146. color: #5677fc !important;
  147. background: none;
  148. }
  149. .tui-blue-outline::after {
  150. border: 1rpx solid #5677fc !important;
  151. }
  152. .tui-gray-hover {
  153. background: #a3a3a3 !important;
  154. color: #898989;
  155. }
  156. .tui-gray-outline {
  157. color: #999 !important;
  158. background: none !important;
  159. }
  160. .tui-white-outline {
  161. color: #fff !important;
  162. background: none !important;
  163. }
  164. .tui-black-outline {
  165. background: none !important;
  166. color: #333 !important;
  167. }
  168. .tui-gray-outline::after {
  169. border: 1rpx solid #ccc !important;
  170. }
  171. .tui-white-outline::after {
  172. border: 1px solid #fff !important;
  173. }
  174. .tui-black-outline::after {
  175. border: 1px solid #333 !important;
  176. }
  177. /*圆角 */
  178. .tui-fillet {
  179. border-radius: 50rpx;
  180. }
  181. .tui-btn-white.tui-fillet::after {
  182. border-radius: 98rpx;
  183. }
  184. .tui-outline-fillet::after {
  185. border-radius: 98rpx;
  186. }
  187. /*平角*/
  188. .tui-rightAngle {
  189. border-radius: 0;
  190. }
  191. .tui-btn-white.tui-rightAngle::after {
  192. border-radius: 0;
  193. }
  194. .tui-outline-rightAngle::after {
  195. border-radius: 0;
  196. }