@jannie-shao/components-antd4/lib/form/style/index.less

基于 Antd 4 的组件封装

@import '../../style/const.less';

@form-prefix: ~'@{root-prefix}-form';

.@{form-prefix}-parent {
  width: 100%;
}
.@{form-prefix} {
  font-size: @normal-font;
  font-weight: @normal-weight;
  &.ant-form-horizontal .ant-form-item-label {
    width: 20%;
  }
  label {
    font-size: @normal-font;
    font-weight: @normal-weight;
  }
  .ant-form-item {
    min-width: 168px;
    .ant-select-selector {
      min-width: 168px;
    }
    .ant-picker {
      width: 100%;
    }
    &.use-small-item {
      min-width: 128px;
      .ant-select-selector {
        min-width: 128px;
      }
    }
  }
  &-item-table {
    position: relative;
    width: 100%;
    table {
      table-layout: fixed;
      &, .ant-form-item,
      .ant-select-selector {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 0;
      }
      .@{form-prefix}-item-table-operation {
        color: @color-operation;
        font-size: @large-font;
        &:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
  }
  &-item-list {
    position: relative;
    width: 100%;
    &[data-layout="vertical"] {
      &:not(:last-child) {
        border-bottom: 1px dashed #f0f0f0;
        margin-bottom: 24px;
      }
    }
    &[data-layout="inline"] {
      &:last-child .ant-form-item {
        margin-bottom: 0;
      }
    }
    &-item {
      display: flex;
      &, .ant-form-item,
      .ant-select-selector {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
      }
      &, .ant-select-selector {
        margin-bottom: 0;
      }
      &-fields {
        flex-grow: 1;
      }
      &-opts {
        min-width: 40px;
        text-align: center;
        color: @color-operation;
        font-size: @large-font;
        &:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
  }
  &-item-group {
    display: flex;
    margin-bottom: -24px;
    .ant-form-item {
      min-width: auto;
      flex-grow: 1;
      &:not(:first-child) {
        margin-left: 12px;
      }
    }
  }
  &-btns {
    display: inline-block;
    button {
      min-width: 76px;
    }
    button:not(:first-child):not(.ant-btn-link) {
      margin-left: 12px;
    }
  }
  &.ant-form-horizontal {
    &.@{form-prefix}-grid {
      display: grid;
      grid-gap: 0 16px;
      .funFormGridHidden(@idx) when (@idx > 0) {
        &.@{form-prefix}-grid-hide-@{idx} {
          .ant-form-item:not(.@{form-prefix}-actions):nth-child(n+@{idx}) {
            display: none;
          }
        }
        .funFormGridHidden(@idx - 1);
      }
      .funFormGridHidden(30);
      .@{form-prefix}-actions {
        position: relative;
        width: 100%;
        .ant-form-item-label {
          display: none;
        }
        &-content {
          position: absolute;
          top: 0;
          right: 0;
          white-space: nowrap;
          .@{form-prefix}-btns {
            margin-left: 16px;
          }
        }
      }
    }
  }
}