index.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @import '../style/var';
  2. .van {
  3. &-overflow-hidden {
  4. overflow: hidden !important;
  5. }
  6. &-popup {
  7. position: fixed;
  8. top: 50%;
  9. left: 50%;
  10. max-height: 100%;
  11. overflow-y: auto;
  12. background-color: @white;
  13. transition: .3s ease-out;
  14. -webkit-overflow-scrolling: touch;
  15. transform: translate3d(-50%, -50%, 0);
  16. &--top {
  17. width: 100%;
  18. top: 0;
  19. right: auto;
  20. bottom: auto;
  21. left: 50%;
  22. transform: translate3d(-50%, 0, 0);
  23. }
  24. &--right {
  25. top: 50%;
  26. right: 0;
  27. bottom: auto;
  28. left: auto;
  29. transform: translate3d(0, -50%, 0);
  30. }
  31. &--bottom {
  32. width: 100%;
  33. top: auto;
  34. bottom: 0;
  35. right: auto;
  36. left: 50%;
  37. transform: translate3d(-50%, 0, 0);
  38. }
  39. &--left {
  40. top: 50%;
  41. right: auto;
  42. bottom: auto;
  43. left: 0;
  44. transform: translate3d(0, -50%, 0);
  45. }
  46. &-slide-top-enter,
  47. &-slide-top-leave-active {
  48. transform: translate3d(-50%, -100%, 0);
  49. }
  50. &-slide-right-enter,
  51. &-slide-right-leave-active {
  52. transform: translate3d(100%, -50%, 0);
  53. }
  54. &-slide-bottom-enter,
  55. &-slide-bottom-leave-active {
  56. transform: translate3d(-50%, 100%, 0);
  57. }
  58. &-slide-left-enter,
  59. &-slide-left-leave-active {
  60. transform: translate3d(-100%, -50%, 0);
  61. }
  62. }
  63. }