fix(form): [form] fix text validation style error in other size form … (

#1798) * fix(form): [form] fix text validation style error in other size form close #1750 * fix(form): [form] fix form item not aligned close #1726
opentiny · Jul 31, 2024 · 746c8ea · 746c8ea
1 parent 4bcb2e7
commit 746c8ea
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/examples/sites/demos/pc/app/form/message-type-composition-api.vue b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
@@ -66,7 +66,7 @@ function handleSubmit() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 400px;
 }
 
 .demo-form :deep(.tiny-date-container) {

diff --git a/examples/sites/demos/pc/app/form/message-type.vue b/examples/sites/demos/pc/app/form/message-type.vue
@@ -71,7 +71,7 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 400px;
 }
 
 .demo-form :deep(.tiny-date-container) {

diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
@@ -139,6 +139,16 @@
     line-height: var(--ti-form-item-label-line-height);
     .clearfix();
 
+    .@{input-prefix-cls},
+    .@{rate-prefix-cls},
+    .@{select-prefix-cls},
+    .@{css-prefix}checkbox,
+    .@{css-prefix}radio,
+    .@{css-prefix}link,
+    .@{css-prefix}numeric {
+      vertical-align: bottom;
+    }
+
     .@{input-prefix-cls} {
       display: inline-block;
       &.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
@@ -151,7 +161,6 @@
     }
 
     .@{rate-prefix-cls} {
-      vertical-align: middle;
       &__text {
         line-height: 1.5;
       }
@@ -167,8 +176,10 @@
 
     .@{css-prefix}checkbox,
     .@{css-prefix}radio {
-      vertical-align: middle;
-      line-height: 30px;
+      line-height: var(--ti-form-item-label-line-height);
+    }
+    .@{css-prefix}slider-container {
+      height: var(--ti-form-item-label-line-height);
     }
     .@{css-prefix}checkbox-group {
       min-height: var(--ti-form-item-label-line-height);
@@ -194,7 +205,7 @@
 
     .validate-icon {
       fill: var(--ti-form-item-error-text-color);
-      margin-right: 8px;
+      margin-right: var(--ti-form-item-error-icon-margin-right);
     }
     .@{form-item-prefix-cls}__validate-message {
       vertical-align: middle;

diff --git a/packages/theme/src/form-item/vars.less b/packages/theme/src/form-item/vars.less
@@ -44,13 +44,15 @@
   // 小型尺寸表单的行间距
   --ti-form-item-margin-bottom-default: var(--ti-common-space-5x, 20px);
   // 迷你尺寸表单的行间距
-  --ti-form-item-margin-bottom-mini: var(--ti-common-space-2x, 8px);
+  --ti-form-item-margin-bottom-mini: var(--ti-common-space-4x, 16px);
   // 小型尺寸表单的行间距
-  --ti-form-item-margin-bottom-small: var(--ti-common-space-2x, 8px);
+  --ti-form-item-margin-bottom-small: var(--ti-common-space-5x, 20px);
   // 中等尺寸表单的行间距
-  --ti-form-item-margin-bottom-medium: var(--ti-common-space-3x, 12px);
+  --ti-form-item-margin-bottom-medium: var(--ti-common-space-5x, 20px);
   // 表单校验错误时星号的显示(hide)
   --ti-form-item-error-star-display: inline-block;
+  // 表单校验图标右侧外边距
+  --ti-form-item-error-icon-margin-right: var(--ti-common-space-base, 4px);
   // 表单校验行内错误左侧外边距
   --ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base, 4px) * 2.5);
   // 表单校验块级错误消息上侧内边距