linkmore-design/lib/form/style/lmform.less

🌈 🚀lm组件库。🚀

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

.lm_form_responsive_box {
  .lm_form {
    background: rgb(240, 240, 240);
    > .lm_container_wrapper {
      background: rgb(240, 240, 240);
      margin-bottom: 0;
      border-radius: 0;
      padding: 16px;
    }
  }
}
// 响应式
.lm_container_wrapper {
  overflow: auto;
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  padding: 0;
  .ant-cascader {
    width: 100%;
  }
}
//
.form_responsive_group_title {
  display: flex;
  font-size: @font-size-base;
  line-height: 22px;
  margin: 0;
  padding-top: 16px;
  color: var(--color-85);
  flex-basis: 100%;
  align-items: center;
  h3 {
    flex: 1;
    font-weight: medium;
    font-size: @font-size-base;
  }
  .anticon {
    font-size: 16px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    transition: transform 0.24s;
    &.open {
      transform: rotate(180deg);
    }
  }
}

.lm_form.ant-form .ant-form-item .ant-form-item-explain {
  line-height: 16px;
}
// 错误提示 使用tip形式展示
.lm_form-item-tip-error {
  .ant-form-item-explain {
    width: 100%;
    position: absolute;
    display: flex;
    top: 0;
    left: 100%;
    z-index: 100;
    color: #fa4f53;
    pointer-events: none;
    &::before {
      content: ' ';
      position: absolute;
      z-index: 10;
      display: inline-block;
      height: 0;
      width: 0;
      background-color: #fff;
      transform: rotate(45deg);
      border-width: 4px;
      border-style: solid;
    }
    .ant-form-item-explain-error {
      line-height: 20px;
      font-size: 12px;
      background-color: #fff;
      padding: 6px 8px;
      box-shadow: 0 0 6px 2px #e3e3e3;
      border-radius: 2px;
    }
  }
  &-right {
    .ant-form-item-explain {
      &::before {
        box-shadow: -1px 1px 1px 0px #f0f0f0;
        border-color: transparent transparent #fff #fff;
        margin-left: 3px;
        margin-top: 12px;
      }
      .ant-form-item-explain-error {
        margin-left: 7px;
      }
    }
  }
  &-left {
    .ant-form-item-explain {
      left: -100%;
      justify-content: flex-end;
      padding-right: 7px;
      &::before {
        box-shadow: 1px -1px 1px 0px #f0f0f0;
        border-color: #fff #fff transparent transparent;
        margin-left: -11px;
        margin-top: 12px;
        left: 100%;
      }
      .ant-form-item-explain-error {
        margin-left: -4px;
      }
    }
  }
  &-top {
    .ant-form-item-explain {
      top: -39px;
      left: 0;
      justify-content: center;
      &::before {
        box-shadow: 1px 1px 1px 0px #f0f0f0;
        border-color: transparent #fff #fff transparent;
        background-color: #fff;
        margin-top: 28px;
      }
      .ant-form-item-explain-error {
        margin-left: -4px;
      }
    }
  }
  &-bottom {
    .ant-form-item-explain {
      top: 39px;
      left: 0;
      justify-content: center;
      &::before {
        box-shadow: -1px -1px 1px 0px #f0f0f0;
        border-color: #fff transparent transparent #fff;
        background-color: #fff;
        margin-top: -4px;
      }
      .ant-form-item-explain-error {
        margin-left: -4px;
      }
    }
  }
}

// 响应式下select样式
.ant-form-item.ant-form-item-responsive {
  .lm_select {
    width: 100%;
  }
}

.ant-form-item-explain-error {
  font-size: 12px;
}

// 响应式下InputNumber样式
.ant-form-item-responsive .lm_input-number {
  width: 100%;
}