dati/lib/style/components/modal/index.less

/* ==================
         模态窗口
 ==================== */
@import '../../themes/default.less';

@modalPrefixCls: lz-modal;

.@{modalPrefixCls} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @modal-zindex;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000upx;
  background: @fill-mask;
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;

  &::before {
    content: '\200B';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  &&-show {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
  }

  .@{modalPrefixCls}-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 680upx;
    max-width: 100%;
    background-color: @modal-fill;
    border-radius: @modal-radius;
    overflow: hidden;
  }

  &&-bottom {
    margin-bottom: -1000px;

    &::before {
      vertical-align: bottom;
    }

    .@{modalPrefixCls}-dialog {
      width: 100%;
      border-radius: 0;
    }
  }

  &&-bottom&-show {
    margin-bottom: 0;
  }

  &&-drawer {
    transform: scale(1);
    display: flex;

    .@{modalPrefixCls}-dialog {
      height: 100%;
      min-width: 200upx;
      border-radius: 0;
      margin: initial;
      transition-duration: 0.3s;
      flex-basis: 60%;
    }
  }
  &&-drawer&-left {
    justify-content: flex-start;
    .@{modalPrefixCls}-dialog {
      transform: translateX(-100%);
    }
  }
  &&-drawer&-right {
    justify-content: flex-end;
    .@{modalPrefixCls}-dialog {
      transform: translateX(100%);
    }
  }
  &&-drawer&-show {
    .@{modalPrefixCls}-dialog {
      transform: translateX(0%);
    }
  }
}