index.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. @import '../common/index.css';
  2. .van-popup {
  3. position: fixed;
  4. box-sizing: border-box;
  5. max-height: 100%;
  6. overflow-y: auto;
  7. transition-timing-function: ease;
  8. -webkit-animation: ease both;
  9. animation: ease both;
  10. -webkit-overflow-scrolling: touch;
  11. background-color: #fff;
  12. background-color: var(--popup-background-color, #fff);
  13. }
  14. .van-popup--center {
  15. top: 50%;
  16. left: 50%;
  17. -webkit-transform: translate3d(-50%, -50%, 0);
  18. transform: translate3d(-50%, -50%, 0);
  19. }
  20. .van-popup--center.van-popup--round {
  21. border-radius: 20px;
  22. border-radius: var(--popup-round-border-radius, 20px);
  23. }
  24. .van-popup--top {
  25. top: 0;
  26. left: 0;
  27. width: 100%;
  28. }
  29. .van-popup--top.van-popup--round {
  30. border-radius: 0 0 20px 20px;
  31. border-radius: 0 0 var(--popup-round-border-radius, 20px) var(--popup-round-border-radius, 20px);
  32. }
  33. .van-popup--right {
  34. top: 50%;
  35. right: 0;
  36. -webkit-transform: translate3d(0, -50%, 0);
  37. transform: translate3d(0, -50%, 0);
  38. }
  39. .van-popup--right.van-popup--round {
  40. border-radius: 20px 0 0 20px;
  41. border-radius: var(--popup-round-border-radius, 20px) 0 0 var(--popup-round-border-radius, 20px);
  42. }
  43. .van-popup--bottom {
  44. bottom: 0;
  45. left: 0;
  46. width: 100%;
  47. }
  48. .van-popup--bottom.van-popup--round {
  49. border-radius: 20px 20px 0 0;
  50. border-radius: var(--popup-round-border-radius, 20px) var(--popup-round-border-radius, 20px) 0 0;
  51. }
  52. .van-popup--left {
  53. top: 50%;
  54. left: 0;
  55. -webkit-transform: translate3d(0, -50%, 0);
  56. transform: translate3d(0, -50%, 0);
  57. }
  58. .van-popup--left.van-popup--round {
  59. border-radius: 0 20px 20px 0;
  60. border-radius: 0 var(--popup-round-border-radius, 20px) var(--popup-round-border-radius, 20px) 0;
  61. }
  62. .van-popup--bottom.van-popup--safe {
  63. padding-bottom: env(safe-area-inset-bottom);
  64. }
  65. .van-popup--safeTop {
  66. padding-top: env(safe-area-inset-top);
  67. }
  68. .van-popup__close-icon {
  69. position: absolute;
  70. z-index: 1;
  71. z-index: var(--popup-close-icon-z-index, 1);
  72. color: #969799;
  73. color: var(--popup-close-icon-color, #969799);
  74. font-size: 18px;
  75. font-size: var(--popup-close-icon-size, 18px);
  76. }
  77. .van-popup__close-icon--top-left {
  78. top: 16px;
  79. top: var(--popup-close-icon-margin, 16px);
  80. left: 16px;
  81. left: var(--popup-close-icon-margin, 16px);
  82. }
  83. .van-popup__close-icon--top-right {
  84. top: 16px;
  85. top: var(--popup-close-icon-margin, 16px);
  86. right: 16px;
  87. right: var(--popup-close-icon-margin, 16px);
  88. }
  89. .van-popup__close-icon--bottom-left {
  90. bottom: 16px;
  91. bottom: var(--popup-close-icon-margin, 16px);
  92. left: 16px;
  93. left: var(--popup-close-icon-margin, 16px);
  94. }
  95. .van-popup__close-icon--bottom-right {
  96. right: 16px;
  97. right: var(--popup-close-icon-margin, 16px);
  98. bottom: 16px;
  99. bottom: var(--popup-close-icon-margin, 16px);
  100. }
  101. .van-popup__close-icon:active {
  102. opacity: 0.6;
  103. }
  104. .van-scale-enter-active,
  105. .van-scale-leave-active {
  106. transition-property: opacity, -webkit-transform;
  107. transition-property: opacity, transform;
  108. transition-property: opacity, transform, -webkit-transform;
  109. }
  110. .van-scale-enter,
  111. .van-scale-leave-to {
  112. -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
  113. transform: translate3d(-50%, -50%, 0) scale(0.7);
  114. opacity: 0;
  115. }
  116. .van-fade-enter-active,
  117. .van-fade-leave-active {
  118. transition-property: opacity;
  119. }
  120. .van-fade-enter,
  121. .van-fade-leave-to {
  122. opacity: 0;
  123. }
  124. .van-center-enter-active,
  125. .van-center-leave-active {
  126. transition-property: opacity;
  127. }
  128. .van-center-enter,
  129. .van-center-leave-to {
  130. opacity: 0;
  131. }
  132. .van-bottom-enter-active,
  133. .van-bottom-leave-active,
  134. .van-left-enter-active,
  135. .van-left-leave-active,
  136. .van-right-enter-active,
  137. .van-right-leave-active,
  138. .van-top-enter-active,
  139. .van-top-leave-active {
  140. transition-property: -webkit-transform;
  141. transition-property: transform;
  142. transition-property: transform, -webkit-transform;
  143. }
  144. .van-bottom-enter,
  145. .van-bottom-leave-to {
  146. -webkit-transform: translate3d(0, 100%, 0);
  147. transform: translate3d(0, 100%, 0);
  148. }
  149. .van-top-enter,
  150. .van-top-leave-to {
  151. -webkit-transform: translate3d(0, -100%, 0);
  152. transform: translate3d(0, -100%, 0);
  153. }
  154. .van-left-enter,
  155. .van-left-leave-to {
  156. -webkit-transform: translate3d(-100%, -50%, 0);
  157. transform: translate3d(-100%, -50%, 0);
  158. }
  159. .van-right-enter,
  160. .van-right-leave-to {
  161. -webkit-transform: translate3d(100%, -50%, 0);
  162. transform: translate3d(100%, -50%, 0);
  163. }