mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
76 lines
1.4 KiB
CSS
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;
|
|
}
|