93 lines
1.4 KiB
Plaintext
93 lines
1.4 KiB
Plaintext
@import '../common/style/index.less';
|
|
|
|
@popup: ~'@{prefix}-popup';
|
|
@popup-position: ~'@{popup}--position';
|
|
@popup-transition: ~'@{popup}--transition';
|
|
|
|
.@{popup} {
|
|
position: fixed;
|
|
z-index: 11500;
|
|
max-height: 100vh;
|
|
transition: all 300ms ease;
|
|
|
|
&__content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&__close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
&--overlay-transparent &__overlay {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
&--top {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
&--bottom {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
&--left {
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
&--right {
|
|
top: 0;
|
|
right: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
&--center {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: scale(1) translate3d(-50%, -50%, 0);
|
|
transform-origin: 0% 0%;
|
|
}
|
|
|
|
&.@{prefix}-fade-enter,
|
|
&.@{prefix}-fade-leave-to {
|
|
&.@{popup}--top {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
&.@{popup}--bottom {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
&.@{popup}--left {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&.@{popup}--right {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
&.@{popup}--center {
|
|
transform: scale(0.6) translate3d(-50%, -50%, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&.@{prefix}-dialog-enter,
|
|
&.@{prefix}-dialog-leave-to {
|
|
&.@{popup}--center {
|
|
transform: scale(0.6) translate3d(-50%, -50%, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|