index.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. .zan-btn {
  2. position: relative;
  3. color: #333;
  4. background-color: #fff;
  5. margin-bottom: 10px;
  6. padding-left: 15px;
  7. padding-right: 15px;
  8. border-radius: 2px;
  9. border: 1rpx solid #e5e5e5;
  10. font-size: 16px;
  11. line-height: 45px;
  12. height: 45px;
  13. box-sizing: border-box;
  14. text-decoration: none;
  15. text-align: center;
  16. vertical-align: middle;
  17. }
  18. .zan-btn::after {
  19. display: none;
  20. }
  21. .zan-btns {
  22. margin: 15px;
  23. }
  24. /* type */
  25. .zan-btn--primary {
  26. color: #fff;
  27. background-color: #4b0;
  28. border-color: #0a0;
  29. }
  30. .zan-btn--warn {
  31. color: #fff;
  32. background-color: #f85;
  33. border-color: #f85;
  34. }
  35. .zan-btn--danger {
  36. color: #fff;
  37. background-color: #f44;
  38. border-color: #e33;
  39. }
  40. /* size */
  41. .zan-btn--small {
  42. display: inline-block;
  43. height: 30px;
  44. line-height: 30px;
  45. font-size: 12px;
  46. margin-right: 5px;
  47. margin-bottom: 0;
  48. }
  49. .zan-btn--mini {
  50. display: inline-block;
  51. line-height: 21px;
  52. height: 22px;
  53. font-size: 10px;
  54. margin-right: 5px;
  55. margin-bottom: 0;
  56. padding-left: 5px;
  57. padding-right: 5px;
  58. }
  59. .zan-btn--large {
  60. border-radius: 0;
  61. margin-bottom: 0;
  62. border: none;
  63. line-height: 50px;
  64. height: 50px;
  65. }
  66. /* plain */
  67. .zan-btn--plain.zan-btn {
  68. background-color: transparent;
  69. }
  70. .zan-btn--plain.zan-btn--primary {
  71. color: #06BF04;
  72. }
  73. .zan-btn--plain.zan-btn--warn {
  74. color: #FF6600;
  75. }
  76. .zan-btn--plain.zan-btn--danger {
  77. color: #FF4444;
  78. }
  79. /* 重写button组件的button-hover样式 */
  80. .button-hover {
  81. opacity: 0.9;
  82. }
  83. /* loading */
  84. .zan-btn--loading {
  85. color: transparent;
  86. opacity: 1;
  87. }
  88. .zan-btn--loading::before {
  89. position: absolute;
  90. left: 50%;
  91. top: 50%;
  92. content: ' ';
  93. width: 16px;
  94. height: 16px;
  95. margin-left: -8px;
  96. margin-top: -8px;
  97. border: 3px solid #e5e5e5;
  98. border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
  99. border-radius: 8px;
  100. box-sizing: border-box;
  101. animation: btn-spin 0.6s linear;
  102. animation-iteration-count: infinite;
  103. }
  104. .zan-btn--primary.zan-btn--loading::before,
  105. .zan-btn--warn.zan-btn--loading::before,
  106. .zan-btn--danger.zan-btn--loading::before {
  107. border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
  108. }
  109. @keyframes btn-spin {
  110. 0% {
  111. transform: rotate(0);
  112. }
  113. 100% {
  114. transform: rotate(360deg);
  115. }
  116. }
  117. /* disabled */
  118. .zan-btn.zan-btn--disabled {
  119. /* 防止样式被 button[disabled] 的规则覆盖,所以使用了important */
  120. color: #999 ! important;
  121. background: #f8f8f8 ! important;
  122. border-color: #e5e5e5 ! important;
  123. cursor: not-allowed ! important;
  124. opacity: 1 ! important;
  125. }
  126. /* :last-child */
  127. .zan-btn--last-child,
  128. .zan-btn:last-child {
  129. margin-bottom: 0;
  130. margin-right: 0;
  131. }