From 500302f584ca69226d8917066d8068e436130490 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Thu, 14 Nov 2024 17:30:56 +0800 Subject: [PATCH] feat: adapt input date-picker to the old theme style --- examples/sites/demos/apis/input.js | 4 +-- packages/theme/src/base/index.less | 1 + packages/theme/src/base/old-theme.less | 6 ++--- packages/theme/src/input/index.less | 35 +++++++++++-------------- packages/theme/src/input/vars.less | 12 ++------- packages/theme/src/picker/index.less | 19 +++++--------- packages/theme/src/transition/icon.less | 6 ++--- packages/vue/src/picker/src/pc.vue | 21 ++++++--------- 8 files changed, 41 insertions(+), 63 deletions(-) diff --git a/examples/sites/demos/apis/input.js b/examples/sites/demos/apis/input.js index bad6738eff..3b38844b8b 100644 --- a/examples/sites/demos/apis/input.js +++ b/examples/sites/demos/apis/input.js @@ -129,7 +129,7 @@ export default { type: 'string', defaultValue: '', desc: { - 'zh-CN': '设置只读态时的文本内容区，如果没有则会使用 modelVale 的值作为只读文本', + 'zh-CN': '设置只读态时的文本内容区，如果没有则会使用 modelValue 的值作为只读文本', 'en-US': "Sets the text content area in the read-only state, if not, modelVale's value is used as the read-only text" }, @@ -416,7 +416,7 @@ export default { type: "'medium' | 'small' | 'mini'", defaultValue: '', desc: { - 'zh-CN': '输入框尺寸，只在 type!="textarea" 时有效', + 'zh-CN': '输入框尺寸，只在 type 为 "textarea" 时有效', 'en-US': 'Size of the text box. This parameter is valid only when type!="textarea". ' }, mode: ['pc', 'mobile-first'], diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less index 2dc81e10d7..aa2077840a 100644 --- a/packages/theme/src/base/index.less +++ b/packages/theme/src/base/index.less @@ -12,4 +12,5 @@ @import './reset.less'; @import './vars.less'; +// @import './old-theme.less'; @import './transition.less'; diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less index c8079e801e..0d390c8bfe 100644 --- a/packages/theme/src/base/old-theme.less +++ b/packages/theme/src/base/old-theme.less @@ -411,9 +411,9 @@ --tv-size-height-xs: 24px; // mini 尺寸 --tv-size-height-sm: 28px; // small 尺寸 --tv-size-height-md: 32px; // medium 尺寸 - 默认 - --tv-size-height-lg: 40px; // large 尺寸 - --tv-size-height-xl: 48px; // xLarge 尺寸 - --tv-size-height-default:var(--tv-size-height-sm); + --tv-size-height-lg: 36px; // large 尺寸 + --tv-size-height-xl: 42px; // xLarge 尺寸 + --tv-size-height-default: var(--tv-size-height-sm); /** 7.2 图标大小 width, height **/ --tv-icon-size: 14px; diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less index 9d7fa560eb..1ef7ef6865 100644 --- a/packages/theme/src/input/index.less +++ b/packages/theme/src/input/index.less @@ -43,7 +43,6 @@ .placeholder(@color: var(--tv-Input-placeholder-text-color)); &.@{input-prefix-cls}__mask { - font-family: serif; color: #999; } } @@ -149,8 +148,8 @@ &__prefix, &__suffix { position: absolute; - top: var(--tv-Input-suffix-top); - transform: translateY(-50%); + top: 0; + height: 100%; transition: all 0.3s; text-align: center; color: var(--tv-Input-border-color); @@ -204,13 +203,15 @@ line-height: var(--tv-Input-height); text-align: center; transition: all 0.3s; - font-size: var(--tv-Input-icon-font-size); - fill: var(--tv-Input-icon-color); - width: var(--tv-Input-suffix-icon-width); - height: var(--tv-Input-suffix-icon-height); - &:hover { - fill: var(--tv-Input-icon-active-border-color); + svg { + fill: var(--tv-Input-icon-color); + width: var(--tv-Input-suffix-icon-width); + height: var(--tv-Input-suffix-icon-height); + + &:hover { + fill: var(--tv-Input-icon-active-border-color); + } } &:after { @@ -236,6 +237,7 @@ padding-right: var(--tv-Input-prefix-padding-right); } + // 输入字数统计 &-word-limit &__inner { padding-right: 56px; padding-left: 8px; @@ -248,33 +250,25 @@ &-medium { .input-size(var(--tv-Input-medium-height)); - .@{input-prefix-cls}__suffix { - top: var(--tv-Input-suffix-top-medium); - } } &-small { .input-size(var(--tv-Input-small-height)); - font-size: var(--tv-Input-small-font-size); + .@{input-prefix-cls}__inner { font-size: var(--tv-Input-small-font-size); } - .@{input-prefix-cls}__suffix { - top: var(--tv-Input-suffix-top-small); - } } &-mini { .input-size(var(--tv-Input-mini-height)); - font-size: var(--tv-Input-small-font-size); + .@{input-prefix-cls}__inner { font-size: var(--tv-Input-small-font-size); } - .@{input-prefix-cls}__suffix { - top: var(--tv-Input-suffix-top-mini); - } } + // 只读模式 &.is-display-only { .@{input-prefix-cls}-display-only { position: relative; @@ -323,6 +317,7 @@ } } + // 下边框模式 &.tiny-input-underline { .tiny-input__inner { border-radius: 0; diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less index b24f711769..8f19623c8f 100644 --- a/packages/theme/src/input/vars.less +++ b/packages/theme/src/input/vars.less @@ -36,14 +36,6 @@ --tv-Input-icon-color-hover: var(--tv-color-icon-hover); // 输入框聚焦时icon颜色 --tv-Input-focus-icon-color: var(--tv-color-icon-active); - // suffix元素的顶部高度 - --tv-Input-suffix-top: 16px; - // 中尺寸 suffix元素的顶部高度 - --tv-Input-suffix-top-medium: 20px; - // 小尺寸 suffix元素的顶部高度 - --tv-Input-suffix-top-small: 16px; - // 迷你 suffix元素的顶部高度 - --tv-Input-suffix-top-mini: 12px; // suffix图标颜色 --tv-Input-suffix-icon-color: var(--tv-color-icon); // 输入框占位符文本颜色 @@ -62,8 +54,8 @@ --tv-Input-disabled-border-color: var(--tv-color-border-disabled); // 输入框exceed时的文本颜色 --tv-Input-exceed-text-color: var(--tv-color-error-text); - // 输入框的icon图标的字体大小 - --tv-Input-icon-font-size: var(--tv-font-size-l); + // 输入框的icon图标的大小 + --tv-Input-icon-font-size: var(--tv-icon-size); // 输入框计数器的颜色 --tv-Input-count-font-color: var(--tv-color-text-weaken); // 输入框垂直方向内边距 diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less index 0719632349..c077386c7f 100644 --- a/packages/theme/src/picker/index.less +++ b/packages/theme/src/picker/index.less @@ -83,10 +83,6 @@ } } - .@{range-prefix-cls}__icon { - margin-top: -1px; - } - .@{range-prefix-cls}-input, .@{range-prefix-cls}-separator { font-size: var(--tv-Picker-font-size); @@ -117,14 +113,13 @@ .@{range-prefix-cls}__close-icon { width: 16px; height: 16px; - position: absolute; - top: 16px; - right: 12px; - transform: translateY(-50%); - background-color: #ffffff; + cursor: pointer; fill: var(--tv-Picker-icon-color); - z-index: 5; - + + & + .@{range-prefix-cls}__icon { + display: none; + } + &:hover { fill: var(--tv-Picker-icon-color-hover); } @@ -229,7 +224,7 @@ .@{range-editor-prefix-cls}.is-display-only { position: relative; - border-width: 0px; + border-width: 0; & > *:not(.@{range-editor-prefix-cls}-display-only) { visibility: hidden; diff --git a/packages/theme/src/transition/icon.less b/packages/theme/src/transition/icon.less index 8135d29d63..6a94e8c0e1 100644 --- a/packages/theme/src/transition/icon.less +++ b/packages/theme/src/transition/icon.less @@ -31,15 +31,15 @@ @keyframes bounce-in { 0% { - transform: translateY(-50%) scale(0); + transform: scale(0); } 50% { - transform: translateY(-50%) scale(1.2); + transform: scale(1.2); } 100% { - transform: translateY(-50%) scale(1); + transform: scale(1); } } diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue index 02a3a3ec2b..274dc64ff1 100644 --- a/packages/vue/src/picker/src/pc.vue +++ b/packages/vue/src/picker/src/pc.vue @@ -118,21 +118,16 @@ @focus="handleFocus" class="tiny-range-input" /> - + -
- -
+ - +