modal-g/src/style/index.less

gantd modal

@gant-prefix: gant;
@component: ~'@{gant-prefix}-modal';
@activeIconColor: var(--modal-header-icon-hover-color);
// 对角方向
@diagonalDirections: rightTop, rightBottom, leftBottom, leftTop;
// 坐标轴方向
@axialDirections: top, right, bottom, left;
@diagonalSize: 20px;
@diagonalOffset: 12px;
@axialSize: 10px;
@axialcOffset: @axialSize / 2;



  // Modal
  :root {
    --modal-highlight-color: #f00;
    --modal-body-padding: 10px;
    --modal-header-bg: #fff;
    --modal-footer-bg: transparent;
    --modal-footer-reset-color: rgba(0, 0, 0, 1);
    --modal-footer-border-color-split: rgba(0,0,0,0.45);
    --modal-mask-bg: rgba(0,0,0,0.45);
    --modal-header-bg: #fff;
    --modal-header-color: rgba(0, 0, 0, 0.65);
    --modal-header-hover-color: rgba(0, 0, 0, 1);
    --modal-header-icon-hover-color: #fff;
    --modal-header-danger-icon-bg: #f00;
    --modal-header-default-icon-bg: rgba(0, 0, 0, 0.3);
  }

  html {
    .@{component}-resizableModalWrapper{
      .ant-modal-header {
        padding: 4px !important;
      }

      .ant-modal-close-x {
        width: 30px;
        height: 30px;
        line-height: 30px;
      }

      .ant-modal-body {
        padding: 10px;
      }

      .ant-modal-title {
        font-size: 14px;
        font-weight: bold;
      }

      .ant-modal-confirm-body {
        padding-bottom: 30px;
      }

      .ant-modal-confirm {
        .ant-modal-confirm-btns {
          margin-top: 0px;
        }

        .ant-modal-body {
          padding: 10px !important;
        }
      }
      .ant-modal-footer{
        padding:3px;
      }
    }
  }
  .diagonalPositionMixin(@direction){
    top: if((@direction=leftTop) or (@direction=rightTop), -@diagonalOffset, none);
    right: if((@direction=rightTop) or (@direction=rightBottom), -@diagonalOffset, none);
    bottom: if((@direction=rightBottom) or (@direction=leftBottom), -@diagonalOffset, none);
    left: if((@direction=leftBottom) or (@direction=leftTop), -@diagonalOffset, none);
    cursor: if((@direction=leftBottom) or (@direction=rightTop), ne-resize, se-resize);
    z-index: 11;
  }

  .axialPositionMixin(@direction){
    top: if(@direction=top, -@axialcOffset, if((@direction=left) or (@direction=right), @diagonalOffset, none));
    right: if(@direction=right, -@axialcOffset, none);
    bottom: if(@direction=bottom, -@axialcOffset, none);
    left: if(@direction=left, -@axialcOffset, none);
    cursor: if(@direction=top, n-resize, if(@direction=right, e-resize, if(@direction=bottom, s-resize, w-resize)));
    width:if((@direction=top) or (@direction=bottom), calc(100% - @diagonalSize), @axialSize);
    height:if((@direction=top) or (@direction=bottom), @axialSize, calc(100% - @diagonalSize));
    z-index: 11;
  }

  .@{component} {
    &-resizableModalDefault {
      pointer-events: none;
    }

    &-resizableModalDialog {
      pointer-events: auto;
    }

    &-resizableModalWrapper {
      overflow: hidden !important;

      .ant-modal {
        display: flex;
        max-width: none;
        // transform-origin: 50% 50% !important;
      }

      .ant-modal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .ant-modal-close {
          transition: none;
        }

        .ant-modal-close-x {
          &:hover {
            background-color: var(--modal-header-danger-icon-bg);

            i {
              color: @activeIconColor;
            }
          }

          &:active {
            background-color: var(--modal-highlight-color);

            i {
              color: @activeIconColor;
            }
          }
        }
      }

      .ant-modal-body {
        flex: 1;
        overflow-y: auto;
      }

      .@{component}-resizableModalTitle {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .@{component}-canDrag {
        cursor: move;
      }

      .@{component}-resizableModalContent {
        height: 100%;
      }

      .@{component}-maximizeAnchor {
        right: 30px;
        width: 30px;
        top: 0;
        cursor: pointer;
        height: 30px;
        position: absolute;

        .gant-input-wrapper {
          font-size: 16px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: var(--modal-header-color);
        }

        &:hover {
          background-color: var(--modal-header-default-icon-bg);

          i {
            color: @activeIconColor;
          }
        }
      }

      each(@diagonalDirections, {
        .@{component}-@{value}-resizeAnchor {
          .diagonalPositionMixin(@value);
          width: @diagonalSize;
          height:  @diagonalSize;
          position: absolute;
        }
      })

      each(@axialDirections, {
        .@{component}-@{value}-resizeAnchor {
          .axialPositionMixin(@value);
          position: absolute;
        }
      })
      
    }

    &-maximize {
      .ant-modal-content {
        border-radius: 0;
      }
    }
  }