@alifd/meet-react/es/modal/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component modal
  @display Modal
  @chinese 模态框
  @family feedback
*/
:root {
  /*
    @desc motion-time
    @semantic 动画市场
    @unconfigurable
  */
  --modal-duration: var(--motion-time-2);
  /**
    @desc motion-in
    @semantic 常规进入动画
    @unconfigurable
  */
  --modal-motion-in: var(--motion-type-ease-in-out);
  /**
    @desc motion-out
    @semantic 常规退出动画
    @unconfigurable
  */
  --modal-motion-out: var(--motion-type-ease-in-out);
  /**
    @desc center-motion-in
    @semantic 居中退出动画
    @unconfigurable
  */
  --modal-center-motion-in: var(--motion-type-ease-in-out-back);
  /**
    @desc center-motion-out
    @semantic 居中退出动画
    @unconfigurable
  */
  --modal-center-motion-out: var(--motion-type-ease-in-out-back);
  /*
    @desc z-index
    @semantic 层级
    @unconfigurable
  */
  --modal-elevation: var(--elevation-3);
  /*
    @desc content-bg-color
    @semantic 内容区背景色
    @namespace style/common
  */
  --modal-container-bg-color: var(--color-white);
  /*
    @desc mask-bg-color
    @semantic 遮罩背景色
    @namespace style/common
  */
  --modal-mask-bg-color: var(--color-black);
  /*
    @desc mask-bg-opacity
    @semantic 遮罩透明度
    @namespace style/common
    @type float
  */
  --modal-mask-bg-opacity: 0.5;
}

.mt-modal {
  position: fixed;
  z-index: var(--modal-elevation);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: row;
}
.mt-modal-theme-wrapper {
  position: relative;
  width: 375px;
  height: 568px;
}
.mt-modal--no-portal {
  position: absolute;
}
.mt-modal--center {
  justify-content: center;
  align-items: center;
}
.mt-modal--top {
  justify-content: center;
  align-items: flex-start;
}
.mt-modal--bottom {
  justify-content: center;
  align-items: flex-end;
}
.mt-modal--left {
  justify-content: flex-start;
  align-items: center;
}
.mt-modal--right {
  justify-content: flex-end;
  align-items: center;
}
.mt-modal-container {
  background-color: var(--modal-container-bg-color);
  transition: all var(--modal-duration) var(--modal-motion-out);
  position: relative;
}
.mt-modal-container--center {
  transition-timing-function: var(--modal-center-motion-out);
}
.mt-modal-container--center-active {
  animation: mt-mask-center-entering var(--modal-duration) var(--modal-center-motion-in);
  opacity: 1;
}
.mt-modal-container--center-inactive {
  transform: scale(0);
  opacity: 0;
}
.mt-modal-container--top {
  width: 100%;
}
.mt-modal-container--top-active {
  animation: mt-mask-top-entering var(--modal-duration) var(--modal-motion-in);
}
.mt-modal-container--top-inactive {
  transform: translate(0, -100%);
}
.mt-modal-container--bottom {
  width: 100%;
}
.mt-modal-container--bottom-active {
  animation: mt-mask-bottom-entering var(--modal-duration) var(--modal-motion-in);
}
.mt-modal-container--bottom-inactive {
  transform: translate(0, 100%);
}
.mt-modal-container--left {
  height: 100%;
}
.mt-modal-container--left-active {
  animation: mt-mask-left-entering var(--modal-duration) var(--modal-motion-in);
}
.mt-modal-container--left-inactive {
  transform: translate(-100%, 0);
}
.mt-modal-container--right {
  height: 100%;
}
.mt-modal-container--right-active {
  animation: mt-mask-right-entering var(--modal-duration) var(--modal-motion-in);
}
.mt-modal-container--right-inactive {
  transform: translate(100%, 0);
}
.mt-modal--hidden {
  right: 106.66666666666667vw;
  left: auto;
}
.mt-modal-mask {
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: all var(--modal-duration) var(--motion-type-ease);
  touch-action: none;
}
.mt-modal-mask--disable-scroll {
  overflow: hidden !important;
}
.mt-modal-mask--active {
  animation: mt-mask-entering var(--motion-time-1) var(--motion-type-ease);
  background-color: var(--modal-mask-bg-color);
  opacity: var(--modal-mask-bg-opacity);
}
.mt-modal-mask--inactive {
  background: none;
}

@keyframes mt-mask-center-entering {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mt-mask-top-entering {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes mt-mask-bottom-entering {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes mt-mask-left-entering {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes mt-mask-right-entering {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes mt-mask-entering {
  0% {
    background: none;
  }
  100% {
    background: rgba(0, 0, 0, 0.5);
  }
}