ng-layout-form/es/form/index.less

layout form

@requiredColor: var(--error-color, #f5222d);
@requiredFontSize: 14px;
@requiredFontFamily: SimSun, sans-serif;
@border: 1px solid var(--border-color-split, #ececec);

.ng-form-wrapper {
  .ant-form {
    width: 100%;
  }

  .ng-form {
    min-height: 60px;
    margin: 0;
    padding: 10px 0;
    text-align: left;
    background: var(--component-background, #fff);

    .ant-form-item {
      .ant-form-item-explain,
      .ant-form-item-extra {
        padding: 0;
      }
    }

    .nggroup {
      flex-wrap: wrap;

      .formContainerItem .ant-form-item-control-input-content {
        flex-wrap: wrap;

        > .formItem {
          padding: 0;
        }
      }

      > div > .formItem {
        flex: 1;
      }
    }

    .ant-form-item-label {
      text-overflow: ellipsis;

      .ant-form-item-required {
        span::before {
          display: inline-block;
          margin-right: 4px;
          color: @requiredColor;
          font-size: @requiredFontSize;
          font-family: @requiredFontFamily;
          line-height: 1;
          content: '* ';
        }
      }

      label.ant-form-item-required:before {
        display: none !important;
      }

      > label.ant-form-item-no-colon::after {
        margin: 0;
      }

      > label {
        span {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:after {
          margin-top: -0.5px;
        }
      }
    }

    .formItem {
      flex-wrap: nowrap;
      padding: 0 16px;

      .rs-input-group {
        width: auto !important;
      }

      .ant-form-item-control {
        text-overflow: ellipsis;
      }
    }

    .formContainerItem {
      .ant-form-item-control-input-content {
        display: flex;
      }
    }
  }

  //layout布局--------------
  .vertical {
    flex-direction: column;

    > div {
      width: 100%;
      max-width: unset;
    }
  }

  .inline {
    display: block;

    > div {
      display: inline-block;
      // width: unset !important;
    }
  }

  @media (max-width: 575px) {
    .ant-form .ant-form-item .ant-form-item-label {
      flex: unset;
      white-space: nowrap;
    }

    .ant-form .ant-form-item .ant-form-item-control {
      flex: 1;
    }
  }

  &.ng-bordered-form {
    border: @border;
    position: relative;

    .border-form {
      padding: 0;

      .formItem {
        .ant-checkbox-group {
          padding: 4px 11px;
        }
      }

      margin-top: -1px;
      margin-left: -1px !important;

      > .ant-col {
        .formItem.ant-form-item {
          margin-bottom: 0;
          padding: 0;
        }

        .ant-form-item-explain {
          display: none !important;
        }

        border: @border;
        border-right: 0;
        margin-bottom: -1px;

        .ant-form-item-label {
          border-right: @border;
        }
      }

      .nggroup {
        overflow: hidden;

        .ant-col {
          .formItem.ant-form-item {
            margin-bottom: 0;
            padding: 0;
          }

          .ant-form-item-explain {
            display: none !important;
          }

          border-bottom: @border;
          margin-bottom: -1px;
        }

        > div {
          .ant-form-item {
            .ant-form-item-label {
              border-right: @border;
              border-left: @border;
            }

            &:first-child {
              .ant-form-item-label {
                border-left: none;
              }
            }
          }

          & > :last-child {
            .ant-form-item-control {
              border-right: @border;
              margin-right: -1px !important;
            }
          }
        }

        &:last-child {
          .ant-form-item-control {
            border-right: none;
            margin-right: -1px;
          }
        }
      }

      & > :last-child {
        .ant-form-item-control {
          border-right: @border;
          margin-right: -1px !important;
        }

        .form-item-nolabel {
          margin-right: -1px;
        }
      }
    }
  }
}

.ng-view-form {
  .ant-form-item {
    margin-bottom: 4px;
  }
}