diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue index 27c1e0dce8..6cdef30144 100644 --- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue +++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue @@ -19,6 +19,6 @@ const IconMinus = iconMinus() } .my-date-picker { - background: var(--tv-color-bg-active-emphasize); + background: var(--tv-color-bg-2); } diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue index fef9495591..3d18aff254 100644 --- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue +++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue @@ -27,6 +27,6 @@ export default { } .my-date-picker { - background: var(--tv-color-bg-active-emphasize); + background: var(--tv-color-bg-2); } diff --git a/examples/sites/demos/pc/app/tabs/custom-more-icon.spec.ts b/examples/sites/demos/pc/app/tabs/custom-more-icon.spec.ts index 4f702f4a23..6b007a1594 100644 --- a/examples/sites/demos/pc/app/tabs/custom-more-icon.spec.ts +++ b/examples/sites/demos/pc/app/tabs/custom-more-icon.spec.ts @@ -18,7 +18,7 @@ test('"定义更多按钮"', async ({ page }) => { await expect(listWidth).toBeGreaterThan(boxWidth) await expect(tabItems).toHaveCount(8) - await expect(dropdownItems).toHaveCount(3) + await expect(dropdownItems).toHaveCount(2) await expect(headerBox).toHaveCSS('overflow', 'hidden') await moreIcon.hover() await dropdownLastItem.click() diff --git a/packages/renderless/src/date-range/vue.ts b/packages/renderless/src/date-range/vue.ts index 3f55eed0bc..b50d436a98 100644 --- a/packages/renderless/src/date-range/vue.ts +++ b/packages/renderless/src/date-range/vue.ts @@ -131,7 +131,7 @@ const initState = ({ reactive, computed, api, constants, designConfig, props }) enableYearArrow: computed(() => api.computerEnableYearArrow()), // tiny 新增 confirmButtonProps: { - plain: true, + plain: false, type: 'default', ...designConfig?.state?.confirmButtonProps } diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less index 1199d96bde..8266724e68 100644 --- a/packages/theme/src/search/index.less +++ b/packages/theme/src/search/index.less @@ -110,8 +110,8 @@ transform: translateY(-50%); width: 1px; height: 16px; - background-color: #000000; - opacity: 8%; + background-color: var(--tv-Search-border-short-color); + opacity: 1; } } diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less index 237ab835fd..334bb526dd 100644 --- a/packages/theme/src/search/vars.less +++ b/packages/theme/src/search/vars.less @@ -69,4 +69,6 @@ --tv-Search-list-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5); // 搜索下拉框选项水平内边距 --tv-Search-selector-list-padding-x: 10px; + // 搜索图标分割线 + --tv-Search-border-short-color: var(--tv-color-border-divider-short, #dbdbdb); } diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less index 7bbd24d4ee..a0bcab712d 100644 --- a/packages/theme/src/steps/index.less +++ b/packages/theme/src/steps/index.less @@ -651,10 +651,6 @@ .left-line { border-top: 1px solid var(--tv-Steps-line-active-bg-color); } - - .right-line { - border-color: var(--tv-Steps-line-doing-border-color); - } } &.done { @@ -703,6 +699,7 @@ font-size: var(--tv-Steps-font-size); margin-left: var(--tv-Steps-text-margin-left); font-weight: 500; + padding-top: 2px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -1028,27 +1025,36 @@ .@{steps-prefix-cls} { &-block.fault { & > .block-left .left-dot { - border-color: #f23030; + border-color: var(--tv-Steps-error-icon-color); } & > .block-right .title-vertical { - color: #f23030; + color: var(--tv-Steps-error-text-color); } } - &-block.disabled { - cursor: not-allowed; + &-block { + display: flex; - & > .block-right { - .title-vertical, - .description { - color: var(--tv-Steps-disabled-text-color); + & > .block-left { + margin-top: 6.5px; + margin-right: 12px; + + & .left-dot { + width: 10px; + height: 10px; + border: 1px solid var(--tv-Steps-dot-vertical-undo-dot-color); + border-radius: 50%; + box-sizing: border-box; } - } - } - &-block { - display: flex; + & .left-line { + margin: 4px auto 0; + height: calc(100% - 11.5px); + width: 1px; + background-color: var(--tv-Steps-dot-vertical-undo-dot-color); + } + } &.done, &.doing, @@ -1058,8 +1064,7 @@ } } - &.done, - &.doing { + &.done { & > .block-left > .left-line { background-color: var(--tv-Steps-dot-vertical-current-bg-color); } @@ -1075,33 +1080,13 @@ } } - & > .block-left { - margin-top: 6.5px; - margin-right: 12px; - - & .left-dot { - width: 10px; - height: 10px; - border: 1px solid var(--tv-Steps-dot-vertical-current-bg-color); - border-radius: 50%; - box-sizing: border-box; - } - - & .left-line { - margin: 4px auto 0; - height: calc(100% - 11.5px); - width: 1px; - background-color: var(--tv-Steps-dot-vertical-current-bg-color); - } - } - & > .block-right { font-size: 14px; line-height: 1.5; padding-bottom: 12px; .title-vertical { - color: #595959; + color: var(--tv-Steps-dot-title-undo-text-color); } .description { @@ -1116,6 +1101,22 @@ display: none; } } + + &.disabled { + cursor: not-allowed; + + & .left-dot { + background-color: var(--tv-Steps-disabled-icon-bg-color); + border-color: var(--tv-Steps-disabled-border-color); + } + + & > .block-right { + .title-vertical, + .description { + color: var(--tv-Steps-disabled-text-color); + } + } + } } } } diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less index 4f13507c1e..c8f38016db 100644 --- a/packages/theme/src/steps/vars.less +++ b/packages/theme/src/steps/vars.less @@ -184,7 +184,10 @@ // 垂直点状形场景 // 垂直点状形当前节点颜色 - --tv-Steps-dot-vertical-current-bg-color: var(--tv-color-border, #808080); + --tv-Steps-dot-vertical-current-bg-color: var(--tv-color-border-active, #191919); + --tv-Steps-dot-vertical-undo-border-color: var(--tv-color-border-disabled, #c2c2c2); + --tv-Steps-dot-vertical-undo-dot-color: var(--tv-color-bg-4, #c2c2c2); + --tv-Steps-dot-title-undo-text-color: var(--tv-color-text-secondary, #595959); /** timline场景 */ // timeline图标字号 diff --git a/packages/theme/src/tabs/index.less b/packages/theme/src/tabs/index.less index 17ff9200a5..28e432186a 100644 --- a/packages/theme/src/tabs/index.less +++ b/packages/theme/src/tabs/index.less @@ -34,9 +34,6 @@ overflow: hidden; } - &__nav-scroll { - margin-right: 16px; - } /** 头部场景 */ &__header { @@ -44,7 +41,6 @@ margin: 0; padding: 0; display: flex; - justify-content: space-between; align-items: center; .@{tabs-prefix-cls} { @@ -63,10 +59,9 @@ // 添加按钮 &__new-tab { - margin-left: 16px; margin-top: 3px; height: 16px; - padding: 0 16px; + padding-left: 12px; font-size: var(--tv-Tabs-header-separator-height); display: inline-flex; border-left: 1px solid var(--tv-Tabs-border-color); @@ -78,6 +73,8 @@ svg { fill: var(--tv-Tabs-header-icon-color); + font-size: var(--tv-Tabs-more-icon-size); + padding: 4px; &:hover { fill: var(--tv-Tabs-header-icon-color-hover); @@ -92,7 +89,6 @@ display: flex; align-items: center; position: relative; - width: 100%; &.is-scrollable { padding: 0 20px; @@ -292,8 +288,6 @@ } &:hover { - background-color: var(--tv-Tabs-icon-close-hover-bg-color); - svg { fill: var(--tv-Tabs-icon-close-hover-text-color); } @@ -315,10 +309,11 @@ // 更多按钮场景 &__more-container { position: absolute; - right: 0px; + right: 0; font-size: var(--tv-Tabs-font-size-base); color: var(--tv-Tabs-header-font-normal-text-color); line-height: var(--tv-Tabs-height); + padding-top: 5px; .tiny-dropdown__suffix-inner { display: none; @@ -358,6 +353,7 @@ .tiny-svg { font-size: var(--tv-Tabs-more-icon-size); + padding: 4px; vertical-align: middle; fill: var(--tv-Tabs-more-icon-color); diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less index a5c42ecc95..005d294c56 100644 --- a/packages/theme/src/tabs/vars.less +++ b/packages/theme/src/tabs/vars.less @@ -141,7 +141,7 @@ // 头部更多图标盒子高度 --tv-Tabs-more-icon-height: 52px; // 头部更多图标尺寸 - --tv-Tabs-more-icon-size: var(--tv-font-size-heading-xs, 16px); + --tv-Tabs-more-icon-size: var(--tv-font-size-heading-lg, 24px); // 头部更多图标颜色 --tv-Tabs-more-icon-color: var(--tv-color-icon-control, #191919); // 头部更多按钮左侧盒子阴影高度 diff --git a/packages/vue/src/tabs/src/tab-nav/pc.vue b/packages/vue/src/tabs/src/tab-nav/pc.vue index d4a704d39c..d64c84dd6a 100644 --- a/packages/vue/src/tabs/src/tab-nav/pc.vue +++ b/packages/vue/src/tabs/src/tab-nav/pc.vue @@ -251,7 +251,7 @@ export default defineComponent({ }) // 根据生成的子元素宽度动态设置tabslist盒子的padding-right - const paddingRight = this.$refs.more ? `${this.$refs.more.offsetWidth}px` : '46px' + const paddingRight = this.$refs.more ? `${this.$refs.more.offsetWidth}px` : '0' return (