index.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. @import '../style/var';
  2. .van {
  3. &-overflow-hidden {
  4. overflow: hidden !important;
  5. }
  6. &-popup {
  7. position: fixed;
  8. max-height: 100%;
  9. overflow-y: auto;
  10. background-color: @popup-background-color;
  11. transition: @popup-transition;
  12. -webkit-overflow-scrolling: touch;
  13. &--center {
  14. top: 50%;
  15. left: 50%;
  16. transform: translate3d(-50%, -50%, 0);
  17. &.van-popup--round {
  18. border-radius: @popup-round-border-radius;
  19. }
  20. }
  21. &--top {
  22. top: 0;
  23. left: 0;
  24. width: 100%;
  25. &.van-popup--round {
  26. border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
  27. }
  28. }
  29. &--right {
  30. top: 50%;
  31. right: 0;
  32. transform: translate3d(0, -50%, 0);
  33. &.van-popup--round {
  34. border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
  35. }
  36. }
  37. &--bottom {
  38. bottom: 0;
  39. left: 0;
  40. width: 100%;
  41. &.van-popup--round {
  42. border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
  43. }
  44. }
  45. &--left {
  46. top: 50%;
  47. left: 0;
  48. transform: translate3d(0, -50%, 0);
  49. &.van-popup--round {
  50. border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
  51. }
  52. }
  53. &--safe-area-inset-bottom {
  54. padding-bottom: constant(safe-area-inset-bottom);
  55. padding-bottom: env(safe-area-inset-bottom);
  56. }
  57. &-slide-top-enter-active,
  58. &-slide-left-enter-active,
  59. &-slide-right-enter-active,
  60. &-slide-bottom-enter-active {
  61. transition-timing-function: @animation-timing-function-enter;
  62. }
  63. &-slide-top-leave-active,
  64. &-slide-left-leave-active,
  65. &-slide-right-leave-active,
  66. &-slide-bottom-leave-active {
  67. transition-timing-function: @animation-timing-function-leave;
  68. }
  69. &-slide-top-enter,
  70. &-slide-top-leave-active {
  71. transform: translate3d(0, -100%, 0);
  72. }
  73. &-slide-right-enter,
  74. &-slide-right-leave-active {
  75. transform: translate3d(100%, -50%, 0);
  76. }
  77. &-slide-bottom-enter,
  78. &-slide-bottom-leave-active {
  79. transform: translate3d(0, 100%, 0);
  80. }
  81. &-slide-left-enter,
  82. &-slide-left-leave-active {
  83. transform: translate3d(-100%, -50%, 0);
  84. }
  85. &__close-icon {
  86. position: absolute;
  87. z-index: @popup-close-icon-z-index;
  88. color: @popup-close-icon-color;
  89. font-size: @popup-close-icon-size;
  90. cursor: pointer;
  91. &:active {
  92. color: @popup-close-icon-active-color;
  93. }
  94. &--top-left {
  95. top: @popup-close-icon-margin;
  96. left: @popup-close-icon-margin;
  97. }
  98. &--top-right {
  99. top: @popup-close-icon-margin;
  100. right: @popup-close-icon-margin;
  101. }
  102. &--bottom-left {
  103. bottom: @popup-close-icon-margin;
  104. left: @popup-close-icon-margin;
  105. }
  106. &--bottom-right {
  107. right: @popup-close-icon-margin;
  108. bottom: @popup-close-icon-margin;
  109. }
  110. }
  111. }
  112. }