2017-02-28 17:12:02 +08:00

76 lines
1.4 KiB
CSS

@component-namespace zan {
@b modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.701961);
}
@b popup {
position: fixed;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
backface-visibility: hidden;
transition: .2s ease-out;
@m top {
top: 0;
right: auto;
bottom: auto;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
@m right {
top: 50%;
right: 0;
bottom: auto;
left: auto;
transform: translate3d(0, -50%, 0);
}
@m bottom {
top: auto;
bottom: 0;
right: auto;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
@m left {
top: 50%;
right: auto;
bottom: auto;
left: 0;
transform: translate3d(0, -50%, 0);
}
}
}
.popup-slide-top-enter,
.popup-slide-top-leave-active {
transform: translate3d(-50%, -100%, 0);
}
.popup-slide-right-enter,
.popup-slide-right-leave-active {
transform: translate3d(100%, -50%, 0);
}
.popup-slide-bottom-enter,
.popup-slide-bottom-leave-active {
transform: translate3d(-50%, 100%, 0);
}
.popup-slide-left-enter, .popup-slide-left-leave-active {
transform: translate3d(-100%, -50%, 0);
}
.popup-fade-enter, .popup-fade-leave-active {
opacity: 0;
}