MojaveHao
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
gimmyhehe 2024-07-31 14:22:57 +08:00 committed by GitHub
parent 4bcb2e7781
commit 746c8ea054
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/form/message-type-composition-api.vue
View File

@ -66,7 +66,7 @@ function handleSubmit() {
<style scoped>
.demo-form {
width: 380px;
width: 400px;
}
.demo-form :deep(.tiny-date-container) {

2
examples/sites/demos/pc/app/form/message-type.vue
View File

@ -71,7 +71,7 @@ export default {
<style scoped>
.demo-form {
width: 380px;
width: 400px;
}
.demo-form :deep(.tiny-date-container) {

19
packages/theme/src/form-item/index.less
View File

@ -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;

8
packages/theme/src/form-item/vars.less
View File

@ -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);
// 表单校验块级错误消息上侧内边距