| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- @import '../style/var';
- .van {
- &-overflow-hidden {
- overflow: hidden !important;
- }
- &-popup {
- position: fixed;
- top: 50%;
- left: 50%;
- max-height: 100%;
- overflow-y: auto;
- background-color: @white;
- transition: .3s ease-out;
- -webkit-overflow-scrolling: touch;
- transform: translate3d(-50%, -50%, 0);
- &--top {
- width: 100%;
- top: 0;
- right: auto;
- bottom: auto;
- left: 50%;
- transform: translate3d(-50%, 0, 0);
- }
- &--right {
- top: 50%;
- right: 0;
- bottom: auto;
- left: auto;
- transform: translate3d(0, -50%, 0);
- }
- &--bottom {
- width: 100%;
- top: auto;
- bottom: 0;
- right: auto;
- left: 50%;
- transform: translate3d(-50%, 0, 0);
- }
- &--left {
- top: 50%;
- right: auto;
- bottom: auto;
- left: 0;
- transform: translate3d(0, -50%, 0);
- }
- &-slide-top-enter,
- &-slide-top-leave-active {
- transform: translate3d(-50%, -100%, 0);
- }
- &-slide-right-enter,
- &-slide-right-leave-active {
- transform: translate3d(100%, -50%, 0);
- }
- &-slide-bottom-enter,
- &-slide-bottom-leave-active {
- transform: translate3d(-50%, 100%, 0);
- }
- &-slide-left-enter,
- &-slide-left-leave-active {
- transform: translate3d(-100%, -50%, 0);
- }
- }
- }
|