uni-popup.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. @charset "UTF-8";
  2. .uni-popup {
  3. position: fixed;
  4. top: 0;
  5. top: 0;
  6. bottom: 0;
  7. left: 0;
  8. right: 0;
  9. z-index: 99999;
  10. overflow: hidden
  11. }
  12. .uni-popup__mask {
  13. position: absolute;
  14. top: 0;
  15. bottom: 0;
  16. left: 0;
  17. right: 0;
  18. z-index: 998;
  19. background: rgba(0, 0, 0, .4);
  20. opacity: 0
  21. }
  22. .uni-popup__mask.ani {
  23. -webkit-transition: all .3s;
  24. -o-transition: all .3s;
  25. transition: all .3s
  26. }
  27. .uni-popup__mask.uni-bottom,
  28. .uni-popup__mask.uni-center,
  29. .uni-popup__mask.uni-top {
  30. opacity: 1
  31. }
  32. .uni-popup__wrapper {
  33. position: absolute;
  34. z-index: 999;
  35. -webkit-box-sizing: border-box;
  36. box-sizing: border-box
  37. }
  38. .uni-popup__wrapper.ani {
  39. -webkit-transition: all .3s;
  40. -o-transition: all .3s;
  41. transition: all .3s
  42. }
  43. .uni-popup__wrapper.top {
  44. top: 0;
  45. left: 0;
  46. width: 100%;
  47. -webkit-transform: translateY(-100%);
  48. -ms-transform: translateY(-100%);
  49. transform: translateY(-100%)
  50. }
  51. .uni-popup__wrapper.bottom {
  52. bottom: 0;
  53. left: 0;
  54. width: 100%;
  55. -webkit-transform: translateY(100%);
  56. -ms-transform: translateY(100%);
  57. transform: translateY(100%)
  58. }
  59. .uni-popup__wrapper.center {
  60. width: 100%;
  61. height: 100%;
  62. display: -webkit-box;
  63. display: -webkit-flex;
  64. display: -ms-flexbox;
  65. display: flex;
  66. -webkit-box-pack: center;
  67. -webkit-justify-content: center;
  68. -ms-flex-pack: center;
  69. justify-content: center;
  70. -webkit-box-align: center;
  71. -webkit-align-items: center;
  72. -ms-flex-align: center;
  73. align-items: center;
  74. -webkit-transform: scale(1.2);
  75. -ms-transform: scale(1.2);
  76. transform: scale(1.2);
  77. opacity: 0
  78. }
  79. .uni-popup__wrapper-box {
  80. position: relative;
  81. -webkit-box-sizing: border-box;
  82. box-sizing: border-box
  83. }
  84. .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
  85. padding: 30rpx;
  86. background: #fff
  87. }
  88. .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
  89. position: relative;
  90. max-width: 80%;
  91. max-height: 80%;
  92. overflow-y: scroll
  93. }
  94. .uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
  95. .uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
  96. width: 100%;
  97. max-height: 500px;
  98. overflow-y: scroll
  99. }
  100. .uni-popup__wrapper.uni-bottom,
  101. .uni-popup__wrapper.uni-top {
  102. -webkit-transform: translateY(0);
  103. -ms-transform: translateY(0);
  104. transform: translateY(0)
  105. }
  106. .uni-popup__wrapper.uni-center {
  107. -webkit-transform: scale(1);
  108. -ms-transform: scale(1);
  109. transform: scale(1);
  110. opacity: 1
  111. }