From f30f72fb6b41310669f5ef33b141d1d893c67c86 Mon Sep 17 00:00:00 2001 From: zhanyini Date: Thu, 10 Oct 2024 15:24:44 -0700 Subject: [PATCH] feat(select): [select] refactor(select): [select] refactor theme vars for select --- packages/theme/src/select/index.less | 52 ++++++++++++++-------------- packages/theme/src/select/vars.less | 38 ++++++++++---------- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less index 468512c365..2e4fbc52aa 100644 --- a/packages/theme/src/select/index.less +++ b/packages/theme/src/select/index.less @@ -104,7 +104,7 @@ position: absolute; line-height: normal; white-space: normal; - padding: var(--ti-Select-tags-padding); + padding: var(--tv-Select-tags-padding); z-index: 1; top: 50%; margin-left: 1px; @@ -140,24 +140,24 @@ outline: 0; padding: 0; margin-left: 8px; - color: var(--ti-Select-text-color); - font-size: var(--ti-Select-font-size); - height: var(--ti-Select-height); + color: var(--tv-Select-text-color); + font-size: var(--tv-Select-font-size); + height: var(--tv-Select-height); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; &.is-mini { - height: var(--ti-Select-height-mini); + height: var(--tv-Select-height-mini); } &.is-small { - height: var(--ti-Select-height-small); + height: var(--tv-Select-height-small); } &.is-medium { - height: var(--ti-Select-height-medium); + height: var(--tv-Select-height-medium); } } @@ -169,7 +169,7 @@ white-space: nowrap; box-sizing: border-box; border-color: transparent; - margin: var(--ti-Select-tag-margin); + margin: var(--tv-Select-tag-margin); text-overflow: ellipsis; overflow: hidden; display: inline-flex; @@ -196,9 +196,9 @@ display: inline-flex; > span { - color: var(--ti-Select-text-color-disabled); - margin: var(--ti-Select-tags-margin-top) var(--ti-Select-tags-margin-right) - var(--ti-Select-tags-margin-bottom) var(--ti-Select-tags-margin-left); + color: var(--tv-Select-text-color-disabled); + margin: var(--tv-Select-tags-margin-top) var(--tv-Select-tags-margin-right) + var(--tv-Select-tags-margin-bottom) var(--tv-Select-tags-margin-left); display: inline-block; width: 100%; white-space: nowrap; @@ -212,14 +212,14 @@ .@{select-prefix-cls}__collapse-text { display: inline-flex; align-items: center; - margin: var(--ti-Select-collapse-margin); - font-size: var(--ti-Select-font-size); - color: var(--ti-Select-collapse-text-color); + margin: var(--tv-Select-collapse-margin); + font-size: var(--tv-Select-font-size); + color: var(--tv-Select-collapse-text-color); .tiny-svg { - margin: var(--ti-Select-collapse-margin); - fill: var(--ti-Select-icon-color); - font-size: var(--ti-Select-icon-size); + margin: var(--tv-Select-collapse-margin); + fill: var(--tv-Select-icon-color); + font-size: var(--tv-Select-icon-size); } } } @@ -242,7 +242,7 @@ } .@{select-prefix-cls}__tags { - height: var(--ti-Select-tags-height); + height: var(--tv-Select-tags-height); overflow: hidden; &-collapse { @@ -369,14 +369,14 @@ } .@{select-prefix-cls}__caret { - fill: var(--ti-Select-icon-color); - font-size: var(--ti-Select-icon-size); + fill: var(--tv-Select-icon-color); + font-size: var(--tv-Select-icon-size); transition: transform 0.3s; transform: rotateZ(180deg); cursor: pointer; &:hover { - fill: var(--ti-Select-icon-color-hover); + fill: var(--tv-Select-icon-color-hover); } &.is-reverse { @@ -386,14 +386,14 @@ .@{select-prefix-cls}__limit-txt, .@{select-prefix-cls}__proportion-txt { - font-size: var(--ti-Select-font-size); - margin: var(--ti-Select-suffix-text-margin); - color: var(--ti-Select-suffix-text-color); + font-size: var(--tv-Select-font-size); + margin: var(--tv-Select-suffix-text-margin); + color: var(--tv-Select-suffix-text-color); } .@{select-prefix-cls}__copy { cursor: pointer; - margin-right: var(--ti-Select-suffix-icon-margin-right); + margin-right: var(--tv-Select-suffix-icon-margin-right); } .@{input-prefix-cls}__suffix { @@ -408,7 +408,7 @@ &.is-disabled { .@{select-prefix-cls}__caret { - fill: var(--ti-Select-icon-color-disabled); + fill: var(--tv-Select-icon-color-disabled); cursor: not-allowed; } diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less index 4b6714f48a..aaf1690952 100644 --- a/packages/theme/src/select/vars.less +++ b/packages/theme/src/select/vars.less @@ -12,45 +12,45 @@ .component-css-vars-select() { // 文本色 - --ti-Select-text-color: var(--tv-color-text, #191919); + --tv-Select-text-color: var(--tv-color-text, #191919); // 多选禁用文本色 - --ti-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); + --tv-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); // 默认字号 - --ti-Select-font-size: var(--tv-font-size-md, 14px); + --tv-Select-font-size: var(--tv-font-size-md, 14px); // 图标色 - --ti-Select-icon-color: var(--tv-color-icon, #808080); + --tv-Select-icon-color: var(--tv-color-icon, #808080); // 图标禁用色 - --ti-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2); + --tv-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2); // 图标悬浮色 - --ti-Select-icon-color-hover: var(--tv-color-icon-hover, #191919); + --tv-Select-icon-color-hover: var(--tv-color-icon-hover, #191919); // 图标尺寸 - --ti-Select-icon-size: var(--tv-icon-size, 16px); + --tv-Select-icon-size: var(--tv-icon-size, 16px); // 选择器高度 - --ti-Select-height: var(--tv-size-height-md, 32px); + --tv-Select-height: var(--tv-size-height-md, 32px); // 选择器高度(mini) - --ti-Select-height-mini: var(--tv-size-height-xs, 24px); + --tv-Select-height-mini: var(--tv-size-height-xs, 24px); // 选择器高度(small) - --ti-Select-height-small: var(--tv-size-height-sm, 28px); + --tv-Select-height-small: var(--tv-size-height-sm, 28px); // 选择器高度(medium) - --ti-Select-height-medium: var(--tv-size-height-lg, 40px); + --tv-Select-height-medium: var(--tv-size-height-lg, 40px); // 标签区域高度 - --ti-Select-tags-height: var(--tv-size-height-md, 32px); + --tv-Select-tags-height: var(--tv-size-height-md, 32px); // 标签区域内边距 - --ti-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px); + --tv-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px); // 标签外边距 - --ti-Select-tag-margin: var(--tv-space-xs, 2px); + --tv-Select-tag-margin: var(--tv-space-xs, 2px); // suffix 图标右测外间距 - --ti-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px); + --tv-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px); // suffix 文本外间距 - --ti-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px); + --tv-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px); // suffix 文本色 - --ti-Select-suffix-text-color: var(--tv-color-text-weaken, #808080); + --tv-Select-suffix-text-color: var(--tv-color-text-weaken, #808080); // 收起按钮文本色 - --ti-Select-collapse-text-color: var(--tv-color-text-active, #1476ff); + --tv-Select-collapse-text-color: var(--tv-color-text-active, #1476ff); // 收起按钮外间距 - --ti-Select-collapse-margin: 0 var(--tv-space-xs, 2px); + --tv-Select-collapse-margin: 0 var(--tv-space-xs, 2px); }