index.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. @import '../style/var';
  2. .van-button {
  3. position: relative;
  4. display: inline-block;
  5. box-sizing: border-box;
  6. height: @button-default-height;
  7. margin: 0;
  8. padding: 0;
  9. font-size: @button-default-font-size;
  10. line-height: @button-default-line-height;
  11. text-align: center;
  12. border-radius: @button-border-radius;
  13. cursor: pointer;
  14. transition: opacity @animation-duration-fast;
  15. -webkit-appearance: none;
  16. &::before {
  17. position: absolute;
  18. top: 50%;
  19. left: 50%;
  20. width: 100%;
  21. height: 100%;
  22. background-color: @black;
  23. border: inherit;
  24. border-color: @black;
  25. border-radius: inherit; /* inherit parent's border radius */
  26. transform: translate(-50%, -50%);
  27. opacity: 0;
  28. content: ' ';
  29. }
  30. &:active::before {
  31. opacity: 0.1;
  32. }
  33. &--loading,
  34. &--disabled {
  35. &::before {
  36. display: none;
  37. }
  38. }
  39. &--default {
  40. color: @button-default-color;
  41. background-color: @button-default-background-color;
  42. border: @button-border-width solid @button-default-border-color;
  43. }
  44. &--primary {
  45. color: @button-primary-color;
  46. background-color: @button-primary-background-color;
  47. border: @button-border-width solid @button-primary-border-color;
  48. }
  49. &--info {
  50. color: @button-info-color;
  51. background-color: @button-info-background-color;
  52. border: @button-border-width solid @button-info-border-color;
  53. }
  54. &--danger {
  55. color: @button-danger-color;
  56. background-color: @button-danger-background-color;
  57. border: @button-border-width solid @button-danger-border-color;
  58. }
  59. &--warning {
  60. color: @button-warning-color;
  61. background-color: @button-warning-background-color;
  62. border: @button-border-width solid @button-warning-border-color;
  63. }
  64. &--plain {
  65. background-color: @button-plain-background-color;
  66. &.van-button--primary {
  67. color: @button-primary-background-color;
  68. }
  69. &.van-button--info {
  70. color: @button-info-background-color;
  71. }
  72. &.van-button--danger {
  73. color: @button-danger-background-color;
  74. }
  75. &.van-button--warning {
  76. color: @button-warning-background-color;
  77. }
  78. }
  79. &--large {
  80. width: 100%;
  81. height: @button-large-height;
  82. }
  83. &--normal {
  84. padding: 0 15px;
  85. font-size: @button-normal-font-size;
  86. }
  87. &--small {
  88. height: @button-small-height;
  89. padding: 0 @padding-xs;
  90. font-size: @button-small-font-size;
  91. }
  92. &__loading {
  93. color: inherit;
  94. font-size: inherit;
  95. }
  96. &--mini {
  97. height: @button-mini-height;
  98. padding: 0 @padding-base;
  99. font-size: @button-mini-font-size;
  100. & + .van-button--mini {
  101. margin-left: @padding-base;
  102. }
  103. }
  104. &--block {
  105. display: block;
  106. width: 100%;
  107. }
  108. &--disabled {
  109. cursor: not-allowed;
  110. opacity: @button-disabled-opacity;
  111. }
  112. &--loading {
  113. cursor: default;
  114. }
  115. &--round {
  116. border-radius: @button-round-border-radius;
  117. }
  118. &--square {
  119. border-radius: 0;
  120. }
  121. // align-items are ignored when flex container is a button in legacy safari
  122. // see: https://bugs.webkit.org/show_bug.cgi?id=169700
  123. &__content {
  124. display: flex;
  125. align-items: center;
  126. justify-content: center;
  127. height: 100%;
  128. // fix icon vertical align
  129. // see: https://github.com/vant-ui/vant/issues/7617
  130. &::before {
  131. content: ' ';
  132. }
  133. }
  134. &__icon {
  135. font-size: 1.2em;
  136. line-height: inherit;
  137. }
  138. &__icon + &__text,
  139. &__loading + &__text,
  140. &__text + &__icon,
  141. &__text + &__loading {
  142. margin-left: @padding-base;
  143. }
  144. &--hairline {
  145. border-width: 0;
  146. &::after {
  147. border-color: inherit;
  148. border-radius: @button-border-radius * 2;
  149. }
  150. &.van-button--round::after {
  151. border-radius: @button-round-border-radius;
  152. }
  153. &.van-button--square::after {
  154. border-radius: 0;
  155. }
  156. }
  157. }