ci4sManagement-cloud/react-ui/src/overrides.less

/*
 * @Author: 赵伟
 * @Date: 2024-04-28 08:47:43
 * @Description: 覆盖 antd 样式
 */

// 设置 Table 可以滑动，带分页
.vertical-scroll-table {
  .ant-table-wrapper {
    height: 100%;
    .ant-spin-nested-loading {
      height: 100%;

      .ant-spin-container {
        height: 100%;

        .ant-table {
          height: calc(100% - 74px); // 分页控件的高度

          .ant-table-container {
            height: 100%;

            .ant-table-body {
              overflow-y: auto !important;
            }
          }
        }
      }
    }
  }
}

// 设置 Table 可以滑动，没有分页
.vertical-scroll-table-no-page {
  .ant-table-wrapper {
    height: 100%;
    .ant-spin-nested-loading {
      height: 100%;

      .ant-spin-container {
        height: 100%;

        .ant-table {
          height: 100%;

          .ant-table-container {
            height: 100%;

            .ant-table-body {
              overflow-y: auto !important;
            }
          }
        }
      }
    }
  }
}

// Tabs 样式
// 删除底部白色横线
.ant-tabs {
  .ant-tabs-nav::before {
    border: none;
  }

  // 删除下边的 margin-bottom
  .ant-tabs-nav {
    margin-bottom: 0;
  }
}

// 表格样式
.ant-table-header {
  border: 1px solid rgba(167, 178, 194, 0.17);
  border-bottom: none;
}

.ant-table-wrapper .ant-table-thead > tr > td {
  background-color: #fff;
}

.ant-table-row-selected {
  .ant-table-cell {
    color: @primary-color;
  }
}

.ant-pro-page-container {
  overflow-y: auto;
}

// Modal
.ant-modal {
  .ant-modal-close {
    top: 27px;
    right: 27px;
    width: 26px;
    height: 26px;
    color: @text-color-secondary;
    border: 2px solid @text-color-secondary;
    border-radius: 50%;

    &:hover,
    &:active {
      color: #272536;
      background-color: transparent;
      border: 2px solid #272536;
    }
  }

  .ant-form-item .ant-form-item-label > label {
    font-size: @font-size;
  }

  // 输入框高度为46px
  .ant-input-affix-wrapper {
    padding-top: 2px;
    padding-bottom: 2px;

    .ant-input {
      height: 40px;
    }
  }

  .ant-input.ant-input-disabled {
    height: 46px;
  }

  // 选择框高度为46px
  .ant-select-single {
    height: 46px;
  }

  .ant-input-number {
    .ant-input-number-input {
      height: 44px;
    }
  }
}

// Confirm Modal
.ant-modal-confirm {
  .ant-modal-content {
    padding: 40px 67px;
    background-image: url(@/assets/img/modal-back.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    border-radius: 20px;
  }
  .ant-modal-confirm-body {
    .anticon {
      display: none;
    }
  }

  .ant-modal-confirm-paragraph {
    max-width: 100%;
    margin-top: 27px;
    text-align: center;
  }

  .ant-modal-confirm-btns {
    margin-top: 40px;
    text-align: center;

    .ant-btn {
      height: 40px;
      padding: 0 30px;
      font-size: @font-size-content;
      border-radius: 6px;
    }
    .ant-btn-default {
      border-color: transparent;
    }
    .ant-btn + .ant-btn {
      margin-left: 20px;
    }
  }
}

// 表单类型为large时，font-size为15px
.ant-form-large {
  .ant-form-item-label {
    label {
      font-size: @font-size;
    }
  }
}

// 取消 hover 颜色变化
.ant-menu .ant-menu-title-content {
  transition: color 0s;
  a {
    transition: color 0s;
  }
}

.ant-pro-sider-collapsed-button {
  inset-block-start: 65px !important;
}

.ant-pro-layout .ant-pro-sider-logo > a > h1 {
  margin-inline-start: 12px;
}

.ant-pro-layout .ant-pro-sider-logo-collapsed {
  padding: 16px 12px;
}

.ant-pro-base-menu-inline .ant-pro-base-menu-inline-menu-item {
  transition: padding 0.1s !important;
}

// PageContainer 里的 ProTable 只滑动内容区域
.system-menu.ant-pro-page-container {
  height: 100%;
  overflow: hidden;
  .ant-pro-grid-content {
    height: 100%;
    .ant-pro-grid-content-children {
      height: 100%;
      .ant-pro-layout-watermark-wrapper {
        height: 100%;
        .ant-pro-page-container-children-container {
          height: 100%;
          padding: 0;
          .ant-pro-table {
            display: flex;
            flex-direction: column;
            height: 100%;
            .ant-pro-card.ant-pro-table-search {
              flex: none;
              height: auto;
            }
            .ant-pro-card {
              flex: 1;
              min-height: 0;
              .ant-pro-card-body {
                height: 100%;
                .ant-table-wrapper {
                  height: calc(100% - 64px);
                  .ant-spin-nested-loading {
                    height: 100%;
                    .ant-spin-container {
                      height: 100%;
                      .ant-table-fixed-header {
                        height: 100%;
                        .ant-table-container {
                          height: 100%;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}