vxe-pc-ui 4.14.6 → 4.14.7

package/styles/components/form.scss

@@ -1,668 +1,668 @@
-@use "sass:list";
-
-%ButtonHover {
-  color: var(--vxe-ui-font-primary-lighten-color);
-  border-color: var(--vxe-ui-font-primary-lighten-color);
-}
-
-.vxe-form {
-  position: relative;
-  font-size: var(--vxe-ui-font-size-default);
-  color: var(--vxe-ui-font-color);
-  font-family: var(--vxe-ui-font-family);
-  background-color: var(--vxe-ui-layout-background-color);
-  text-align: left;
-  .vxe-row {
-    flex-shrink: 0;
-  }
-}
-
-.vxe-form--item-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.vxe-form--item-row,
-.vxe-col--inner {
-  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
-          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
-          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
-  @for $index from 0 to list.length($spans) {
-    & > .vxe-form--item-col_#{$index + 1} {
-      width: list.nth($spans, $index + 1);
-    }
-  }
-}
-
-.vxe-form-slots {
-  display: none;
-}
-
-.vxe-form--item-inner,
-.vxe-form--item-trigger-node {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.vxe-form--item-title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 320px;
-  padding-right: 0.8em;
-  &.is--ellipsis {
-    .vxe-form--item-title-content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  .vxe-form--item-title-tip-prefix,
-  .vxe-form--item-title-tip-suffix,
-  .vxe-form--item-title-postfix,
-  .vxe-form--item-title-prefix,
-  .vxe-form--item-title-suffix {
-    flex-shrink: 0;
-  }
-  .vxe-form--item-title-tip-prefix,
-  .vxe-form--item-title-tip-suffix {
-    vertical-align: middle;
-  }
-  .vxe-form--item-title-tip-prefix {
-    margin-right: 0.25em;
-  }
-  .vxe-form--item-title-tip-suffix {
-    margin-left: 0.2em;
-  }
-  .vxe-form--item-title-postfix {
-    display: flex;
-    align-items: center;
-  }
-  .vxe-form--item-title-content {
-    flex-grow: 1;
-  }
-  .vxe-form--item-title-label {
-    vertical-align: middle;
-  }
-  .vxe-form--item-title-prefix,
-  .vxe-form--item-title-suffix {
-    display: inline-flex;
-    flex-direction: row;
-    vertical-align: middle;
-  }
-}
-
-.vxe-form--item-title {
-  flex-shrink: 0;
-}
-.vxe-form--item-content {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  flex-grow: 1;
-  word-break: break-all;
-  &:not(.vxe-form--group-content) {
-    align-items: center;
-  }
-}
-
-.vxe-form--item-trigger-node {
-  font-size: 12px;
-  min-width: 100px;
-  color: #909399;
-  text-align: center;
-  user-select: none;
-  cursor: pointer;
-  .vxe-form--item-trigger-icon {
-    display: inline-block;
-    margin: 0 0.25em;
-    transition: all 0.1s;
-  }
-}
-
-.vxe-form-item--valid-error-tip {
-  position: absolute;
-  width: 100%;
-  font-size: 0.9em;
-  line-height: 1em;
-  color: var(--vxe-ui-form-validate-error-color);
-  background-color: var(--vxe-ui-form-validate-error-background-color);
-  z-index: 1;
-  opacity: 0;
-  transform-origin: center top;
-  transform: scaleY(0);
-  transition: all 0.2s ease-in-out;
-  .vxe-form-item--valid-error-wrapper {
-    display: inline-block;
-    border-radius: var(--vxe-ui-base-border-radius);
-    pointer-events: auto;
-  }
-  .vxe-form-item--valid-error-theme-beautify {
-    padding: 0.2em 0.6em 0.25em 0.6em;
-    color: #fff;
-    background-color: var(--vxe-ui-status-error-color);
-    .vxe-form-item--valid-error-msg {
-      background: transparent;
-    }
-  }
-  .vxe-form-item--valid-error-theme-normal {
-    color: var(--vxe-ui-table-validate-error-color);
-    background-color: var(--vxe-ui-form-validate-error-theme-normal-background-color);
-  }
-}
-
-.vxe-form {
-  .vxe-form--wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  .vxe-form--item {
-    display: none;
-    &.is--active {
-      &:not(.is--hidden) {
-        display: inline-flex;
-      }
-    }
-  }
-}
-
-.vxe-form--item-inner {
-  position: relative;
-  width: 100%;
-}
-
-.vxe-form-item--valid-error-icon-wrapper {
-  visibility: hidden;
-  position: relative;
-  flex-shrink: 0;
-  padding-left: 0.5em;
-  color: var(--vxe-ui-form-validate-error-color);
-  &.is--hide {
-    .vxe-form-item--valid-error-icon-msg-tip {
-      width: 0;
-      padding: 0;
-    }
-  }
-}
-.vxe-form-item--valid-error-icon-btn {
-  position: relative;
-  user-select: none;
-  z-index: 6;
-  cursor: help;
-}
-.vxe-form-item--valid-error-icon-msg-tip {
-  position: absolute;
-  top: 50%;
-  right: 0.8em;
-  display: block;
-  max-width: 24em;
-  padding: 0.4em;
-  overflow: hidden;
-  z-index: 5;
-  transform: translateY(-50%);
-}
-.vxe-form-item--valid-error-icon-msg {
-  border-radius: var(--vxe-ui-base-border-radius);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  box-shadow: 2px 2px 4px -2px rgba(0,0,0,.5);
-}
-.vxe-form-item--valid-error-icon-theme-beautify {
-  padding: 0.2em 0.6em 0.25em 0.6em;
-  color: #fff;
-  background-color: var(--vxe-ui-status-error-color);
-  .vxe-form-item--valid-error-msg {
-    background: transparent;
-  }
-}
-.vxe-form-item--valid-error-icon-theme-normal {
-  padding: 0 0.6em;
-  color: var(--vxe-ui-table-validate-error-color);
-  border: 1px solid var(--vxe-ui-table-validate-error-color);
-  background-color: var(--vxe-ui-form-validate-error-theme-normal-background-color);
-}
-
-.vxe-form--item {
-  &.is--bold {
-    & > .vxe-form--item-title {
-      font-weight: bold;
-    }
-  }
-  &.is--colon {
-    & > .vxe-form--item-title {
-      .vxe-form--item-title-postfix {
-        &:after {
-          content: ":";
-          font-weight: normal;
-          margin-left: 0.2em;
-        }
-      }
-    }
-  }
-  &.is--asterisk {
-    &.is--required {
-      & > .vxe-form--item-title {
-        .vxe-form--item-title-content {
-          &:before {
-            content: "*";
-            color: var(--vxe-ui-form-validate-error-color);
-            font-family: Verdana,Arial,Tahoma;
-            margin-right: 0.2em;
-            font-weight: normal;
-            vertical-align: middle;
-          }
-        }
-      }
-    }
-  }
-  &.is--tbg { 
-    & > .vxe-form--item-title {
-      background-color: var(--vxe-ui-form-title-background-color);
-    }
-  }
-  &.is--vertical {
-    flex-direction: column;
-    align-items: initial;
-    & > .vxe-form--item-title {
-      height: 2.5em;
-      line-height: 2.3em;
-      padding-right: 0;
-      max-width: none;
-      .vxe-form--item-title-content {
-        flex-grow: initial;
-      }
-    }
-  }
-  &.is--span {
-    .vxe-default-input:not([type="submit"]):not([type="reset"]),
-    .vxe-default-textarea,
-    .vxe-default-select,
-    .vxe-input,
-    .vxe-number-input,
-    .vxe-password-input,
-    .vxe-date-picker,
-    .vxe-date-range-picker,
-    .vxe-textarea,
-    .vxe-select,
-    .vxe-tree-select,
-    .vxe-table-select,
-    .vxe-ico-picker {
-      width: 100%;
-    }
-  }
-  &.is--error {
-    &.show--err-msg {
-      & > .vxe-form--item-content {
-        padding-top: 0;
-        padding-bottom: 1.3em;
-      }
-    }
-    &.err--bg {
-      & > .vxe-form--item-content {
-        background-color: var(--vxe-ui-form-validate-error-item-background-color);
-      }
-    }
-    & > .vxe-form--item-content {
-      & > .vxe-form-item--valid-error-icon-wrapper {
-        visibility: visible;
-      }
-    }
-    .vxe-input,
-    .vxe-number-input,
-    .vxe-password-input,
-    .vxe-date-picker,
-    .vxe-date-range-picker,
-    .vxe-textarea > .vxe-textarea--inner,
-    .vxe-upload .vxe-upload--image-action-box,
-    .vxe-upload .vxe-upload--file-action-btn > .vxe-button,
-    .vxe-select,
-    .vxe-tree-select,
-    .vxe-table-select,
-    .vxe-default-input,
-    .vxe-default-textarea,
-    .vxe-default-select,
-    .vxe-ico-picker {
-      border-color: var(--vxe-ui-form-validate-error-color);
-    }
-    .vxe-input,
-    .vxe-number-input,
-    .vxe-password-input,
-    .vxe-date-picker,
-    .vxe-date-range-picker,
-    .vxe-textarea>.vxe-textarea--inner,
-    .vxe-default-input[type="text"],
-    .vxe-default-input[type="search"],
-    .vxe-default-textarea,
-    .vxe-default-select {
-      &:focus {
-        border-color: var(--vxe-ui-form-validate-error-color);
-      }
-    }
-    .vxe-form-item--valid-error-tip {
-      opacity: 1;
-      transform: scaleY(1);
-    }
-  }
-  .vxe-default-input,
-  .vxe-default-textarea,
-  .vxe-default-select {
-    outline: 0;
-    border: 1px solid var(--vxe-ui-input-border-color);
-    border-radius: var(--vxe-ui-base-border-radius);
-  }
-  .vxe-default-input,
-  .vxe-default-select {
-    height: var(--vxe-ui-button-height-default);
-  }
-  .vxe-default-input {
-    padding: 0 0.8em;
-  }
-  .vxe-default-textarea {
-    height: calc(var(--vxe-ui-button-height-default) * 2);
-    padding: 0.3em 0.6em;
-  }
-  .vxe-default-input[type="number"] {
-    padding-right: 0.2em;
-  }
-  .vxe-default-input[type="text"],
-  .vxe-default-input[type="search"] {
-    padding: 0 1em;
-  }
-  .vxe-default-input[type="text"],
-  .vxe-default-input[type="search"],
-  .vxe-default-textarea,
-  .vxe-default-select {
-    color: var(--vxe-ui-font-color);
-    &:focus {
-      border: 1px solid var(--vxe-ui-font-primary-color);
-    }
-    &[disabled] {
-      cursor: not-allowed;
-      background-color: var(--vxe-ui-input-disabled-background-color);
-    }
-  }
-  .vxe-default-input[type="submit"],
-  .vxe-default-input[type="reset"] {
-    line-height: calc(var(--vxe-ui-button-height-default) - 2px);
-    background-color: #fff;
-    cursor: pointer;
-    &:hover {
-      @extend %ButtonHover;
-    }
-    &:active {
-      color: var(--vxe-ui-font-primary-darken-color);
-      border-color: var(--vxe-ui-font-primary-darken-color);
-    }
-  }
-  .vxe-default-input {
-    &[type="date"]::-webkit-inner-spin-button {
-      margin-top: 6px;
-    }
-    &[type="date"]::-webkit-inner-spin-button,
-    &[type="number"]::-webkit-inner-spin-button {
-      height: 24px;
-    }
-    &::placeholder {
-      color: var(--vxe-ui-input-placeholder-color);
-    }
-  }
-  .vxe-default-input[type="text"],
-  .vxe-default-input[type="search"],
-  .vxe-default-textarea,
-  .vxe-default-select {
-    width: 180px;
-  }
-  .vxe-default-textarea {
-    resize: none;
-    vertical-align: middle;
-    &::placeholder {
-      color: var(--vxe-ui-input-placeholder-color);
-    }
-  }
-}
-.vxe-form {
-  &.is--border {
-    position: relative;
-    overflow: hidden;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid var(--vxe-ui-form-border-color);
-      pointer-events: none;
-      z-index: 1;
-    }
-    .vxe-form--item {
-      position: relative;
-      padding: 0;
-      &::before {
-        content: "";
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        width: calc(100% + 1px);
-        height: calc(100% + 1px);
-        border: 1px solid var(--vxe-ui-form-border-color);
-        pointer-events: none;
-      }
-      &.is--padding {
-        &.is--vertical {
-          & > .vxe-form--item-title {
-            border-bottom: 1px solid var(--vxe-ui-form-border-color);
-          }
-        }
-        &:not(.is--vertical) {
-          & > .vxe-form--item-title {
-            border-right: 1px solid var(--vxe-ui-form-border-color);
-          }
-        }
-      }
-    }
-  }
-}
-
-.vxe-form {
-  .vxe-form--item {
-    &.hide--content {
-      & > .vxe-form--item-title {
-        max-width: none;
-        flex-shrink: unset;
-        flex-grow: 1;
-      }
-    }
-  }
-}
-
-
-.vxe-form--item {
-  &.is--padding {
-    &.is--vertical {
-      & > .vxe-form--item-title {
-        padding: 0 var(--vxe-ui-form-item-padding-default);
-      }
-    }
-    & > .vxe-form--item-title {
-      padding: var(--vxe-ui-form-item-padding-default);
-    }
-    & > .vxe-form--item-content {
-      padding: var(--vxe-ui-form-item-padding-default);
-    }
-  }
-  &.size--medium {
-    &.is--padding {
-      &.is--vertical {
-        & > .vxe-form--item-title {
-          padding: 0 var(--vxe-ui-form-item-padding-medium);
-        }
-      }
-      & > .vxe-form--item-title {
-        padding: var(--vxe-ui-form-item-padding-medium);
-      }
-      & > .vxe-form--item-content {
-        padding: var(--vxe-ui-form-item-padding-medium);
-      }
-    }
-  }
-  &.size--small {
-    &.is--padding {
-      &.is--vertical {
-        & > .vxe-form--item-title {
-          padding: 0 var(--vxe-ui-form-item-padding-small);
-        }
-      }
-      & > .vxe-form--item-title {
-        padding: var(--vxe-ui-form-item-padding-small);
-      }
-      & > .vxe-form--item-content {
-        padding: var(--vxe-ui-form-item-padding-small);
-      }
-    }
-  }
-  &.size--mini {
-    &.is--padding {
-      &.is--vertical {
-        & > .vxe-form--item-title {
-          padding: 0 var(--vxe-ui-form-item-padding-mini);
-        }
-      }
-      & > .vxe-form--item-title {
-        padding: var(--vxe-ui-form-item-padding-mini);
-      }
-      & > .vxe-form--item-content {
-        padding: var(--vxe-ui-form-item-padding-mini);
-      }
-    }
-  }
-}
-
-.vxe-form--item {
-  &.is--padding {
-    & > .vxe-form--group-content {
-      &.vxe-form--item-content {
-        padding: 0;
-      }
-    }
-  }
-}
-
-.vxe-form {
-  .vxe-form--item-title {
-    &.align--center {
-      text-align: center;
-    }
-    &.align--left {
-      text-align: left;
-    }
-    &.align--right {
-      text-align: right;
-    }
-  }
-  .vxe-form--item-content {
-    &.align--center {
-      & > .vxe-form--item-inner {
-        text-align: center;
-      }
-    }
-    &.align--left {
-      & > .vxe-form--item-inner {
-        text-align: left;
-      }
-    }
-    &.align--right {
-      & > .vxe-form--item-inner {
-        text-align: right;
-      }
-    }
-    &.vertical-align--center {
-      align-items: center;
-    }
-  }
-  .vxe-form--item {
-    &:not(.is--vertical) {
-      .vxe-form--item-title {
-        min-height: var(--vxe-ui-form-item-min-height-default);
-      }
-    }
-    .vxe-form--item-content {
-      min-height: var(--vxe-ui-form-item-min-height-default);
-    }
-  }
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    .vxe-default-input[type="submit"],
-    .vxe-default-input[type="reset"] {
-      line-height: calc(var(--vxe-ui-button-height-medium) - 2px);
-    }
-    .vxe-default-input,
-    .vxe-default-select {
-      height: var(--vxe-ui-button-height-medium);
-    }
-    .vxe-default-textarea {
-      height: calc(var(--vxe-ui-button-height-medium) * 2);
-    }
-    .vxe-form--item {
-      &:not(.is--vertical) {
-        .vxe-form--item-title {
-          min-height: var(--vxe-ui-form-item-min-height-medium);
-        }
-      }
-      .vxe-form--item-content {
-        min-height: var(--vxe-ui-form-item-min-height-medium);
-      }
-    }
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    .vxe-default-input[type="submit"],
-    .vxe-default-input[type="reset"] {
-      line-height: calc(var(--vxe-ui-button-height-small) - 2px);
-    }
-    .vxe-default-input,
-    .vxe-default-select {
-      height: var(--vxe-ui-button-height-small);
-    }
-    .vxe-default-textarea {
-      height: calc(var(--vxe-ui-button-height-small) * 2);
-    }
-    .vxe-form--item {
-      &:not(.is--vertical) {
-        .vxe-form--item-title {
-          min-height: var(--vxe-ui-form-item-min-height-small);
-        }
-      }
-      .vxe-form--item-content {
-        min-height: var(--vxe-ui-form-item-min-height-small);
-      }
-    }
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    .vxe-default-input[type="submit"],
-    .vxe-default-input[type="reset"] {
-      line-height: calc(var(--vxe-ui-button-height-mini) - 2px);
-    }
-    .vxe-default-input,
-    .vxe-default-select {
-      height: var(--vxe-ui-button-height-mini);
-    }
-    .vxe-default-textarea {
-      height: calc(var(--vxe-ui-button-height-mini) * 2);
-    }
-    .vxe-form--item {
-      &:not(.is--vertical) {
-        .vxe-form--item-title {
-          min-height: var(--vxe-ui-form-item-min-height-mini);
-        }
-      }
-      .vxe-form--item-content {
-        min-height: var(--vxe-ui-form-item-min-height-mini);
-      }
-    }
-  }
-}
+@use "sass:list";
+
+%ButtonHover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+
+.vxe-form {
+  position: relative;
+  font-size: var(--vxe-ui-font-size-default);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-layout-background-color);
+  text-align: left;
+  .vxe-row {
+    flex-shrink: 0;
+  }
+}
+
+.vxe-form--item-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.vxe-form--item-row,
+.vxe-col--inner {
+  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
+          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
+          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
+  @for $index from 0 to list.length($spans) {
+    & > .vxe-form--item-col_#{$index + 1} {
+      width: list.nth($spans, $index + 1);
+    }
+  }
+}
+
+.vxe-form-slots {
+  display: none;
+}
+
+.vxe-form--item-inner,
+.vxe-form--item-trigger-node {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.vxe-form--item-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 320px;
+  padding-right: 0.8em;
+  &.is--ellipsis {
+    .vxe-form--item-title-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .vxe-form--item-title-tip-prefix,
+  .vxe-form--item-title-tip-suffix,
+  .vxe-form--item-title-postfix,
+  .vxe-form--item-title-prefix,
+  .vxe-form--item-title-suffix {
+    flex-shrink: 0;
+  }
+  .vxe-form--item-title-tip-prefix,
+  .vxe-form--item-title-tip-suffix {
+    vertical-align: middle;
+  }
+  .vxe-form--item-title-tip-prefix {
+    margin-right: 0.25em;
+  }
+  .vxe-form--item-title-tip-suffix {
+    margin-left: 0.2em;
+  }
+  .vxe-form--item-title-postfix {
+    display: flex;
+    align-items: center;
+  }
+  .vxe-form--item-title-content {
+    flex-grow: 1;
+  }
+  .vxe-form--item-title-label {
+    vertical-align: middle;
+  }
+  .vxe-form--item-title-prefix,
+  .vxe-form--item-title-suffix {
+    display: inline-flex;
+    flex-direction: row;
+    vertical-align: middle;
+  }
+}
+
+.vxe-form--item-title {
+  flex-shrink: 0;
+}
+.vxe-form--item-content {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  flex-grow: 1;
+  word-break: break-all;
+  &:not(.vxe-form--group-content) {
+    align-items: center;
+  }
+}
+
+.vxe-form--item-trigger-node {
+  font-size: 12px;
+  min-width: 100px;
+  color: #909399;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  .vxe-form--item-trigger-icon {
+    display: inline-block;
+    margin: 0 0.25em;
+    transition: all 0.1s;
+  }
+}
+
+.vxe-form-item--valid-error-tip {
+  position: absolute;
+  width: 100%;
+  font-size: 0.9em;
+  line-height: 1em;
+  color: var(--vxe-ui-form-validate-error-color);
+  background-color: var(--vxe-ui-form-validate-error-background-color);
+  z-index: 1;
+  opacity: 0;
+  transform-origin: center top;
+  transform: scaleY(0);
+  transition: all 0.2s ease-in-out;
+  .vxe-form-item--valid-error-wrapper {
+    display: inline-block;
+    border-radius: var(--vxe-ui-base-border-radius);
+    pointer-events: auto;
+  }
+  .vxe-form-item--valid-error-theme-beautify {
+    padding: 0.2em 0.6em 0.25em 0.6em;
+    color: #fff;
+    background-color: var(--vxe-ui-status-error-color);
+    .vxe-form-item--valid-error-msg {
+      background: transparent;
+    }
+  }
+  .vxe-form-item--valid-error-theme-normal {
+    color: var(--vxe-ui-table-validate-error-color);
+    background-color: var(--vxe-ui-form-validate-error-theme-normal-background-color);
+  }
+}
+
+.vxe-form {
+  .vxe-form--wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .vxe-form--item {
+    display: none;
+    &.is--active {
+      &:not(.is--hidden) {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+.vxe-form--item-inner {
+  position: relative;
+  width: 100%;
+}
+
+.vxe-form-item--valid-error-icon-wrapper {
+  visibility: hidden;
+  position: relative;
+  flex-shrink: 0;
+  padding-left: 0.5em;
+  color: var(--vxe-ui-form-validate-error-color);
+  &.is--hide {
+    .vxe-form-item--valid-error-icon-msg-tip {
+      width: 0;
+      padding: 0;
+    }
+  }
+}
+.vxe-form-item--valid-error-icon-btn {
+  position: relative;
+  user-select: none;
+  z-index: 6;
+  cursor: help;
+}
+.vxe-form-item--valid-error-icon-msg-tip {
+  position: absolute;
+  top: 50%;
+  right: 0.8em;
+  display: block;
+  max-width: 24em;
+  padding: 0.4em;
+  overflow: hidden;
+  z-index: 5;
+  transform: translateY(-50%);
+}
+.vxe-form-item--valid-error-icon-msg {
+  border-radius: var(--vxe-ui-base-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-shadow: 2px 2px 4px -2px rgba(0,0,0,.5);
+}
+.vxe-form-item--valid-error-icon-theme-beautify {
+  padding: 0.2em 0.6em 0.25em 0.6em;
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-color);
+  .vxe-form-item--valid-error-msg {
+    background: transparent;
+  }
+}
+.vxe-form-item--valid-error-icon-theme-normal {
+  padding: 0 0.6em;
+  color: var(--vxe-ui-table-validate-error-color);
+  border: 1px solid var(--vxe-ui-table-validate-error-color);
+  background-color: var(--vxe-ui-form-validate-error-theme-normal-background-color);
+}
+
+.vxe-form--item {
+  &.is--bold {
+    & > .vxe-form--item-title {
+      font-weight: bold;
+    }
+  }
+  &.is--colon {
+    & > .vxe-form--item-title {
+      .vxe-form--item-title-postfix {
+        &:after {
+          content: ":";
+          font-weight: normal;
+          margin-left: 0.2em;
+        }
+      }
+    }
+  }
+  &.is--asterisk {
+    &.is--required {
+      & > .vxe-form--item-title {
+        .vxe-form--item-title-content {
+          &:before {
+            content: "*";
+            color: var(--vxe-ui-form-validate-error-color);
+            font-family: Verdana,Arial,Tahoma;
+            margin-right: 0.2em;
+            font-weight: normal;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+  &.is--tbg { 
+    & > .vxe-form--item-title {
+      background-color: var(--vxe-ui-form-title-background-color);
+    }
+  }
+  &.is--vertical {
+    flex-direction: column;
+    align-items: initial;
+    & > .vxe-form--item-title {
+      height: 2.5em;
+      line-height: 2.3em;
+      padding-right: 0;
+      max-width: none;
+      .vxe-form--item-title-content {
+        flex-grow: initial;
+      }
+    }
+  }
+  &.is--span {
+    .vxe-default-input:not([type="submit"]):not([type="reset"]),
+    .vxe-default-textarea,
+    .vxe-default-select,
+    .vxe-input,
+    .vxe-number-input,
+    .vxe-password-input,
+    .vxe-date-picker,
+    .vxe-date-range-picker,
+    .vxe-textarea,
+    .vxe-select,
+    .vxe-tree-select,
+    .vxe-table-select,
+    .vxe-ico-picker {
+      width: 100%;
+    }
+  }
+  &.is--error {
+    &.show--err-msg {
+      & > .vxe-form--item-content {
+        padding-top: 0;
+        padding-bottom: 1.3em;
+      }
+    }
+    &.err--bg {
+      & > .vxe-form--item-content {
+        background-color: var(--vxe-ui-form-validate-error-item-background-color);
+      }
+    }
+    & > .vxe-form--item-content {
+      & > .vxe-form-item--valid-error-icon-wrapper {
+        visibility: visible;
+      }
+    }
+    .vxe-input,
+    .vxe-number-input,
+    .vxe-password-input,
+    .vxe-date-picker,
+    .vxe-date-range-picker,
+    .vxe-textarea > .vxe-textarea--inner,
+    .vxe-upload .vxe-upload--image-action-box,
+    .vxe-upload .vxe-upload--file-action-btn > .vxe-button,
+    .vxe-select,
+    .vxe-tree-select,
+    .vxe-table-select,
+    .vxe-default-input,
+    .vxe-default-textarea,
+    .vxe-default-select,
+    .vxe-ico-picker {
+      border-color: var(--vxe-ui-form-validate-error-color);
+    }
+    .vxe-input,
+    .vxe-number-input,
+    .vxe-password-input,
+    .vxe-date-picker,
+    .vxe-date-range-picker,
+    .vxe-textarea>.vxe-textarea--inner,
+    .vxe-default-input[type="text"],
+    .vxe-default-input[type="search"],
+    .vxe-default-textarea,
+    .vxe-default-select {
+      &:focus {
+        border-color: var(--vxe-ui-form-validate-error-color);
+      }
+    }
+    .vxe-form-item--valid-error-tip {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+  .vxe-default-input,
+  .vxe-default-textarea,
+  .vxe-default-select {
+    outline: 0;
+    border: 1px solid var(--vxe-ui-input-border-color);
+    border-radius: var(--vxe-ui-base-border-radius);
+  }
+  .vxe-default-input,
+  .vxe-default-select {
+    height: var(--vxe-ui-button-height-default);
+  }
+  .vxe-default-input {
+    padding: 0 0.8em;
+  }
+  .vxe-default-textarea {
+    height: calc(var(--vxe-ui-button-height-default) * 2);
+    padding: 0.3em 0.6em;
+  }
+  .vxe-default-input[type="number"] {
+    padding-right: 0.2em;
+  }
+  .vxe-default-input[type="text"],
+  .vxe-default-input[type="search"] {
+    padding: 0 1em;
+  }
+  .vxe-default-input[type="text"],
+  .vxe-default-input[type="search"],
+  .vxe-default-textarea,
+  .vxe-default-select {
+    color: var(--vxe-ui-font-color);
+    &:focus {
+      border: 1px solid var(--vxe-ui-font-primary-color);
+    }
+    &[disabled] {
+      cursor: not-allowed;
+      background-color: var(--vxe-ui-input-disabled-background-color);
+    }
+  }
+  .vxe-default-input[type="submit"],
+  .vxe-default-input[type="reset"] {
+    line-height: calc(var(--vxe-ui-button-height-default) - 2px);
+    background-color: #fff;
+    cursor: pointer;
+    &:hover {
+      @extend %ButtonHover;
+    }
+    &:active {
+      color: var(--vxe-ui-font-primary-darken-color);
+      border-color: var(--vxe-ui-font-primary-darken-color);
+    }
+  }
+  .vxe-default-input {
+    &[type="date"]::-webkit-inner-spin-button {
+      margin-top: 6px;
+    }
+    &[type="date"]::-webkit-inner-spin-button,
+    &[type="number"]::-webkit-inner-spin-button {
+      height: 24px;
+    }
+    &::placeholder {
+      color: var(--vxe-ui-input-placeholder-color);
+    }
+  }
+  .vxe-default-input[type="text"],
+  .vxe-default-input[type="search"],
+  .vxe-default-textarea,
+  .vxe-default-select {
+    width: 180px;
+  }
+  .vxe-default-textarea {
+    resize: none;
+    vertical-align: middle;
+    &::placeholder {
+      color: var(--vxe-ui-input-placeholder-color);
+    }
+  }
+}
+.vxe-form {
+  &.is--border {
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--vxe-ui-form-border-color);
+      pointer-events: none;
+      z-index: 1;
+    }
+    .vxe-form--item {
+      position: relative;
+      padding: 0;
+      &::before {
+        content: "";
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: calc(100% + 1px);
+        height: calc(100% + 1px);
+        border: 1px solid var(--vxe-ui-form-border-color);
+        pointer-events: none;
+      }
+      &.is--padding {
+        &.is--vertical {
+          & > .vxe-form--item-title {
+            border-bottom: 1px solid var(--vxe-ui-form-border-color);
+          }
+        }
+        &:not(.is--vertical) {
+          & > .vxe-form--item-title {
+            border-right: 1px solid var(--vxe-ui-form-border-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+.vxe-form {
+  .vxe-form--item {
+    &.hide--content {
+      & > .vxe-form--item-title {
+        max-width: none;
+        flex-shrink: unset;
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+
+.vxe-form--item {
+  &.is--padding {
+    &.is--vertical {
+      & > .vxe-form--item-title {
+        padding: 0 var(--vxe-ui-form-item-padding-default);
+      }
+    }
+    & > .vxe-form--item-title {
+      padding: var(--vxe-ui-form-item-padding-default);
+    }
+    & > .vxe-form--item-content {
+      padding: var(--vxe-ui-form-item-padding-default);
+    }
+  }
+  &.size--medium {
+    &.is--padding {
+      &.is--vertical {
+        & > .vxe-form--item-title {
+          padding: 0 var(--vxe-ui-form-item-padding-medium);
+        }
+      }
+      & > .vxe-form--item-title {
+        padding: var(--vxe-ui-form-item-padding-medium);
+      }
+      & > .vxe-form--item-content {
+        padding: var(--vxe-ui-form-item-padding-medium);
+      }
+    }
+  }
+  &.size--small {
+    &.is--padding {
+      &.is--vertical {
+        & > .vxe-form--item-title {
+          padding: 0 var(--vxe-ui-form-item-padding-small);
+        }
+      }
+      & > .vxe-form--item-title {
+        padding: var(--vxe-ui-form-item-padding-small);
+      }
+      & > .vxe-form--item-content {
+        padding: var(--vxe-ui-form-item-padding-small);
+      }
+    }
+  }
+  &.size--mini {
+    &.is--padding {
+      &.is--vertical {
+        & > .vxe-form--item-title {
+          padding: 0 var(--vxe-ui-form-item-padding-mini);
+        }
+      }
+      & > .vxe-form--item-title {
+        padding: var(--vxe-ui-form-item-padding-mini);
+      }
+      & > .vxe-form--item-content {
+        padding: var(--vxe-ui-form-item-padding-mini);
+      }
+    }
+  }
+}
+
+.vxe-form--item {
+  &.is--padding {
+    & > .vxe-form--group-content {
+      &.vxe-form--item-content {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.vxe-form {
+  .vxe-form--item-title {
+    &.align--center {
+      text-align: center;
+    }
+    &.align--left {
+      text-align: left;
+    }
+    &.align--right {
+      text-align: right;
+    }
+  }
+  .vxe-form--item-content {
+    &.align--center {
+      & > .vxe-form--item-inner {
+        text-align: center;
+      }
+    }
+    &.align--left {
+      & > .vxe-form--item-inner {
+        text-align: left;
+      }
+    }
+    &.align--right {
+      & > .vxe-form--item-inner {
+        text-align: right;
+      }
+    }
+    &.vertical-align--center {
+      align-items: center;
+    }
+  }
+  .vxe-form--item {
+    &:not(.is--vertical) {
+      .vxe-form--item-title {
+        min-height: var(--vxe-ui-form-item-min-height-default);
+      }
+    }
+    .vxe-form--item-content {
+      min-height: var(--vxe-ui-form-item-min-height-default);
+    }
+  }
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+    .vxe-default-input[type="submit"],
+    .vxe-default-input[type="reset"] {
+      line-height: calc(var(--vxe-ui-button-height-medium) - 2px);
+    }
+    .vxe-default-input,
+    .vxe-default-select {
+      height: var(--vxe-ui-button-height-medium);
+    }
+    .vxe-default-textarea {
+      height: calc(var(--vxe-ui-button-height-medium) * 2);
+    }
+    .vxe-form--item {
+      &:not(.is--vertical) {
+        .vxe-form--item-title {
+          min-height: var(--vxe-ui-form-item-min-height-medium);
+        }
+      }
+      .vxe-form--item-content {
+        min-height: var(--vxe-ui-form-item-min-height-medium);
+      }
+    }
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+    .vxe-default-input[type="submit"],
+    .vxe-default-input[type="reset"] {
+      line-height: calc(var(--vxe-ui-button-height-small) - 2px);
+    }
+    .vxe-default-input,
+    .vxe-default-select {
+      height: var(--vxe-ui-button-height-small);
+    }
+    .vxe-default-textarea {
+      height: calc(var(--vxe-ui-button-height-small) * 2);
+    }
+    .vxe-form--item {
+      &:not(.is--vertical) {
+        .vxe-form--item-title {
+          min-height: var(--vxe-ui-form-item-min-height-small);
+        }
+      }
+      .vxe-form--item-content {
+        min-height: var(--vxe-ui-form-item-min-height-small);
+      }
+    }
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+    .vxe-default-input[type="submit"],
+    .vxe-default-input[type="reset"] {
+      line-height: calc(var(--vxe-ui-button-height-mini) - 2px);
+    }
+    .vxe-default-input,
+    .vxe-default-select {
+      height: var(--vxe-ui-button-height-mini);
+    }
+    .vxe-default-textarea {
+      height: calc(var(--vxe-ui-button-height-mini) * 2);
+    }
+    .vxe-form--item {
+      &:not(.is--vertical) {
+        .vxe-form--item-title {
+          min-height: var(--vxe-ui-form-item-min-height-mini);
+        }
+      }
+      .vxe-form--item-content {
+        min-height: var(--vxe-ui-form-item-min-height-mini);
+      }
+    }
+  }
+}