tntd/lib/query-form/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

.tnt-queryform {
  display: flex;

  &-extra {
    line-height: 32px;
    margin-left: 12px;
    & > * {
      margin-left: 8px;
    }
  }

  &-actions {
    align-items: center;
    display: inline-block;
    height: 32px;
    line-height: 32px;

    & > *:not(.expand-link) {
      margin-right: 10px;
    }
    & > .expand-link {
      padding: 0;
      margin-right: 0;
    }
    & > .ant-badge {
      .tnt-icon {
        margin-right: 8px;
      }
    }
  }

  .ant-form {
    display: inline-block;
    margin-bottom: 16px;
    display: flex;
    flex: 1;
    &:not(.@{ant-prefix}-form-vertical) {
      :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
      .@{ant-prefix}-input-group-wrapper {
        position: static;
        vertical-align: top;
      }
      // safari下时间没对齐
      .@{ant-prefix}-calendar-picker {
        position: static;
        vertical-align: top;
      }
    }
    &.expanded.showMore {
      margin-bottom: 4px;
    }
    &.ant-form-inline {
      flex-wrap: unset;
    }

    & > div:nth-child(1) {
      height: 32px;
      overflow: hidden;
      .ant-form-item-label {
        label {
          // bottom: 4px;
        }
      }
    }

    &.expanded {
      & > div:nth-child(1) {
        height: auto !important;
      }
    }

    &.showMore {
      & > div:nth-child(1) {
        .ant-form-item {
          margin-bottom: 12px;
        }
      }
    }

    & > div:nth-child(2) {
      display: flex;
    }

    &.ant-form-inline .ant-form-item {
      margin-right: 10px;
      display: inline-block;
    }

    .ant-form-item-control {
      // min-width: 160px;
      line-height: unset;
      .ant-calendar-picker-input {
        padding: 0 11px;
      }
      .ant-form-item-children {
        & > .ant-input,
        & > .ant-input-affix-wrapper {
          width: 160px;
          // width: 200px;
        }
      }
    }
  }

  

  &-drawer {
    margin-top: 50px;
    &.large-size {
      margin-top: 60px;
    }

    &.ant-drawer.ant-drawer-open {
      .ant-drawer-mask {
        opacity: 0;
        background: unset;
      }
    }
    .ant-drawer-body {
      .ant-form-item {
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
      }
      .ant-form-item-label {
        display: block;
        text-align: left;
        line-height: 22px;
        margin-bottom: 10px;
      }
      .ant-form-item-control-wrapper,
      .ant-form-item-control,
      .ant-calendar-picker,
      .ant-input {
        min-width: 100%;
        width: 100%;
      }

      & > .ant-btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        &.ant-btn-primary {
          margin-top: 20px;
        }
      }
    }
  }
}