jiaqingjiayi-xiaochengxu/甲情_甲意/miniprogram/node_modules/antd-mini/less/Popup/index.less
2024-11-10 15:01:22 +08:00

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);
}
}