antd-mini/less/Popup/variable.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) '../style/variables.less';
@import (reference) '../style/themes/index.less';

// popup 背景色
@popup-background: var(--popup-background, @COLOR_CARD);
// 产品蒙层
@popup-mask-product: @color-product-mask;
// popup 圆角
@popup-radius: 48 * @rpx;

@popup-color: var(--popup-color, @COLOR_TEXT_PRIMARY);

@popup-assit-color: var(--popup-assit-color, @COLOR_TEXT_ASSIST);

@popup-mask-close-bg: var(--popup-mask-close-bg, @COLOR_BLACK_FADED);

.mask-appear(@duration: 400ms) {
  animation-fill-mode: forwards;
  animation-duration: @duration;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  animation-name: ant-popup-mask-appear;
}

.mask-close(@duration: 400ms) {
  animation-delay: 100ms;
  animation-fill-mode: forwards;
  animation-duration: @duration;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  animation-name: ant-popup-mask-close;
}

.animation-transform(@name, @duration: 300ms) {
  animation-fill-mode: forwards;
  animation-name: @name;
  animation-delay: 100ms;
  animation-duration: @duration;
  animation-timing-function: cubic-bezier(0, 0.4, 0, 1);
}

.animation-transform-close(@name, @duration: 300ms) {
  animation-fill-mode: forwards;
  animation-name: @name;
  animation-duration: @duration;
  animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6);
}

.animation-center() {
  animation-fill-mode: forwards;
  animation-name: ant-popup-transform-center-scale,
    ant-popup-transform-center-opacity;
  animation-delay: 100ms, 100ms;
  animation-duration: 300ms, 200ms;
  animation-timing-function: cubic-bezier(0.57, -0.22, 0, 1.2),
    cubic-bezier(0.35, 0, 0.65, 1);
}

.animation-center-close() {
  animation-fill-mode: forwards;
  animation-name: ant-popup-transform-center-close-scale,
    ant-popup-transform-center-close-opacity;
  animation-duration: 300ms, 200ms;
  animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6),
    cubic-bezier(0.35, 0, 0.65, 1);
}

.animation-position-center() {
  animation-fill-mode: forwards;
  animation-name: ant-popup-position-center-scale,
    ant-popup-position-center-opacity;
  animation-delay: 100ms, 100ms;
  animation-duration: 300ms, 200ms;
  animation-timing-function: cubic-bezier(0.57, -0.22, 0, 1.2),
    cubic-bezier(0.35, 0, 0.65, 1);
}

.animation-position-center-close() {
  animation-fill-mode: forwards;
  animation-name: ant-popup-position-center-close-scale,
    ant-popup-position-center-close-opacity;
  animation-duration: 300ms, 200ms;
  animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6),
    cubic-bezier(0.35, 0, 0.65, 1);
}