186 lines
2.8 KiB
Plaintext
186 lines
2.8 KiB
Plaintext
@import (reference) './variable.less';
|
|
|
|
@popupPrefix: ant-popup;
|
|
|
|
.@{popupPrefix} {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 998;
|
|
touch-action: none;
|
|
&-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: @popup-mask-product;
|
|
animation-fill-mode: forwards;
|
|
&-closing {
|
|
animation-name: ant-popup-mask-close;
|
|
}
|
|
}
|
|
&-content {
|
|
position: fixed;
|
|
background: @popup-background;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
color: @COLOR_TEXT_PRIMARY;
|
|
}
|
|
&-top {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
animation-name: ant-popup-top;
|
|
border-radius: 0 0 @popup-radius @popup-radius;
|
|
&-close {
|
|
animation-name: ant-popup-top-close;
|
|
}
|
|
}
|
|
&-right {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
animation-name: ant-popup-right;
|
|
&-close {
|
|
animation-name: ant-popup-right-close;
|
|
}
|
|
}
|
|
&-bottom {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
animation-name: ant-popup-bottom;
|
|
border-radius: @popup-radius @popup-radius 0 0;
|
|
&-close {
|
|
animation-name: ant-popup-bottom-close;
|
|
}
|
|
}
|
|
&-left {
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
animation-name: ant-popup-left;
|
|
&-close {
|
|
animation-name: ant-popup-left-close;
|
|
}
|
|
}
|
|
&-center {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
animation-name: ant-popup-center;
|
|
border-radius: @popup-radius;
|
|
background: none;
|
|
&-close {
|
|
animation-name: ant-popup-center-close;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-top {
|
|
0% {
|
|
top: -100%;
|
|
}
|
|
100% {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-bottom {
|
|
0% {
|
|
bottom: -100%;
|
|
}
|
|
100% {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-left {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
100% {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-right {
|
|
0% {
|
|
right: -100%;
|
|
}
|
|
100% {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-center {
|
|
0% {
|
|
transform: translate3d(-50%, -50%, 0) scale(0.1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translate3d(-50%, -50%, 0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-top-close {
|
|
0% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: -100%;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-bottom-close {
|
|
0% {
|
|
bottom: 0;
|
|
}
|
|
100% {
|
|
bottom: -100%;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-left-close {
|
|
0% {
|
|
left: 0;
|
|
}
|
|
100% {
|
|
left: -100%;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-right-close {
|
|
0% {
|
|
right: 0;
|
|
}
|
|
100% {
|
|
right: -100%;
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-center-close {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translate3d(-50%, -50%, 0) scale(1);
|
|
}
|
|
20% {
|
|
opacity: 0.8;
|
|
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes ant-popup-mask-close {
|
|
0% {
|
|
background-color: @popup-mask-product;
|
|
}
|
|
100% {
|
|
background-color: fade(@COLOR_BLACK, 0);
|
|
}
|
|
}
|