@fe6/water-pro/components/form-pro/style/index.less

An enterprise-class UI design language and Vue-based implementation

@import '../../style/themes/index';
@import '../../style/mixins/index';

@form-base-prefix-cls: ~'@{ant-prefix}-form';
@form-prefix-cls: ~'@{form-base-prefix-cls}-pro';

.@{form-prefix-cls} {
  & .@{ant-prefix}-row {
    width: 100%;
  }

  & .@{form-prefix-cls}-footer-affix .ant-affix {
    background: #fff;
    box-shadow: 0 -1px 4px 0 rgba(0, 21, 41, 0.12);
  }

  & .@{form-prefix-cls}-nav {
    &-affix .ant-affix {
      background: #fff;
      box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
    }
    display: flex;

    padding: 0 8px;
    background: #fff;
    border: 1px solid #f0f0f0;

    &-item {
      margin: 0 16px;
      padding-top: 2px;
      line-height: 44px;
      border-bottom: 2px solid #fff;
      cursor: pointer;

      &-active {
        border-bottom-color: @primary-6;
      }
    }
  }

  &-card-first {
    margin-top: 16px;
  }

  & .ant-card {
    margin-bottom: 24px;
  }

  & .ant-card-body {
    & .ant-col:last-child .ant-form-item {
      margin-bottom: 0;
    }
  }

  & .pcr-app .pcr-interaction input {
    line-height: 18px;
  }

  & .pcr-app[data-theme='monolith'] .pcr-selection .pcr-color-palette {
    height: 4em;
  }

  &-help {
    margin-right: 8px;
  }

  &-suffix {
    display: inline-block;
    padding-left: 6px;
    color: @text-color;
  }

  & .@{form-base-prefix-cls}-item-control-wrapper {
    width: 100%;

    .ant-calendar-picker:not(.ant-calendar-range-picker-group) {
      width: 100%;
    }
  }

  // NOTE [fix] 横着的时候上下对不齐
  & .ant-affix {
    height: auto !important;
    .@{form-prefix-cls}-item-action {
      padding: 16px;
    }
  }

  .@{form-prefix-cls}-item {
    margin-bottom: 20px !important;

    &-label label::after {
      margin: 0 6px 0 2px;
    }

    &-with-help {
      margin-bottom: 0;
    }

    &-suffix {
      & .@{form-base-prefix-cls}-item-children {
        display: flex;
        align-items: center;
      }
    }

    &-diy {
      & .@{form-base-prefix-cls}-item-control {
        line-height: inherit;
      }
      & .@{form-base-prefix-cls}-item-children {
        display: flex;
        align-items: center;
        height: 40px;
      }

      & .@{ant-prefix}-tag-group-create,
      & .@{ant-prefix}-tag-group-create-input,
      & .@{ant-prefix}-tag-group-create-input-only {
        margin: 0;
      }

      & .pcr-app[data-theme='monolith'] {
        box-sizing: border-box;
      }
    }

    &-special {
      & .@{form-base-prefix-cls}-item-children {
        height: 32px;
        margin-bottom: 8px;
      }
    }

    &-smscode {
      & .@{form-base-prefix-cls}-item-children {
        display: block;
        height: auto;
        line-height: 40px;

        & .@{ant-prefix}-input-smscode {
          padding-top: 4px;
        }
      }
    }
  }

  .@{form-prefix-cls}-explain {
    font-size: 14px;
  }

  &--compact {
    .@{form-base-prefix-cls}-item {
      width: calc(100% - 16px);
      margin-bottom: 8px !important;
    }
    .@{form-prefix-cls}-item-action {
      margin-bottom: 8px !important;
      line-height: inherit;
    }
  }
}