From 80b99dcba6154ad3f608ab8da1c7fda8a660da69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com> Date: Mon, 21 Oct 2024 09:14:00 +0800 Subject: [PATCH] refactor(transfer): update css vars to --tv- (#2320) --- packages/theme/src/transfer/index.less | 266 ++++++++++++------------- packages/theme/src/transfer/vars.less | 232 ++++++++++----------- 2 files changed, 249 insertions(+), 249 deletions(-) diff --git a/packages/theme/src/transfer/index.less b/packages/theme/src/transfer/index.less index bfc8f6fee4..f44bbd6ee7 100644 --- a/packages/theme/src/transfer/index.less +++ b/packages/theme/src/transfer/index.less @@ -27,82 +27,82 @@ @tree-prefix-cls: ~'@{css-prefix}tree'; .@{transfer-prefix-cls} { - .component-css-vars-transfer(); + .inject-Transfer-vars(); display: flex; justify-content: flex-start; align-items: center; - font-size: var(--ti-transfer-font-size); + font-size: var(--tv-Transfer-font-size); &__buttons { - padding-left: var(--ti-transfer-buttons-padding-left); - padding-right: var(--ti-transfer-buttons-padding-right); - padding-top: var(--ti-transfer-buttons-padding-top); - padding-bottom: var(--ti-transfer-buttons-padding-bottom); + padding-left: var(--tv-Transfer-buttons-padding-left); + padding-right: var(--tv-Transfer-buttons-padding-right); + padding-top: var(--tv-Transfer-buttons-padding-top); + padding-bottom: var(--tv-Transfer-buttons-padding-bottom); .defaultButton { display: flex; flex-direction: column; .@{button-prefix-cls} + .@{button-prefix-cls} { - margin-left: var(--ti-transfer-buttons-defaultButton-margin-left); + margin-left: var(--tv-Transfer-buttons-defaultButton-margin-left); } & + .@{button-prefix-cls} { - margin-right: var(--ti-transfer-buttons-defaultButton-margin-right); - margin-top: var(--ti-transfer-buttons-defaultButton-margin-top); - margin-bottom: var(--ti-transfer-buttons-defaultButton-margin-bottom); + margin-right: var(--tv-Transfer-buttons-defaultButton-margin-right); + margin-top: var(--tv-Transfer-buttons-defaultButton-margin-top); + margin-bottom: var(--tv-Transfer-buttons-defaultButton-margin-bottom); } } .@{button-prefix-cls} { min-width: auto; - margin-left: var(--ti-transfer-buttons-margin-left); - margin-right: var(--ti-transfer-buttons-margin-right); - margin-top: var(--ti-transfer-buttons-margin-top); - margin-bottom: var(--ti-transfer-buttons-margin-bottom); + margin-left: var(--tv-Transfer-buttons-margin-left); + margin-right: var(--tv-Transfer-buttons-margin-right); + margin-top: var(--tv-Transfer-buttons-margin-top); + margin-bottom: var(--tv-Transfer-buttons-margin-bottom); } } &__button { display: block; - margin-left: var(--ti-transfer-button-margin-left); - margin-right: var(--ti-transfer-button-margin-right); - margin-top: var(--ti-transfer-button-margin-top); - margin-bottom: var(--ti-transfer-button-margin-bottom); + margin-left: var(--tv-Transfer-button-margin-left); + margin-right: var(--tv-Transfer-button-margin-right); + margin-top: var(--tv-Transfer-button-margin-top); + margin-bottom: var(--tv-Transfer-button-margin-bottom); &:not(.is-disabled) { - border-color: var(--ti-transfer-button-bg-color) !important; + border-color: var(--tv-Transfer-button-bg-color) !important; } - background-color: var(--ti-transfer-button-bg-color); - width: var(--ti-transfer-button-width); - height: var(--ti-transfer-button-height); - border-radius: var(--ti-transfer-button-border-radius); + background-color: var(--tv-Transfer-button-bg-color); + width: var(--tv-Transfer-button-width); + height: var(--tv-Transfer-button-height); + border-radius: var(--tv-Transfer-button-border-radius); line-height: normal; - padding-left: var(--ti-transfer-button-padding-left); - padding-right: var(--ti-transfer-button-padding-right); - padding-top: var(--ti-transfer-button-padding-top); - padding-bottom: var(--ti-transfer-button-padding-bottom); + padding-left: var(--tv-Transfer-button-padding-left); + padding-right: var(--tv-Transfer-button-padding-right); + padding-top: var(--tv-Transfer-button-padding-top); + padding-bottom: var(--tv-Transfer-button-padding-bottom); // 避免 button中的svg字体变大后，产生的省略号 text-overflow: clip; &.is-with-texts { - border-radius: var(--ti-transfer-button-border-radius); + border-radius: var(--tv-Transfer-button-border-radius); min-width: 60px; } &.@{button-prefix-cls}:not(.is-circle) .@{svg-prefix-cls} { - font-size: var(--ti-transfer-svg-font-size); + font-size: var(--tv-Transfer-svg-font-size); margin-right: 0; } &.@{button-prefix-cls}:not(.is-disabled) { - background-color: var(--ti-transfer-button-bg-color); + background-color: var(--tv-Transfer-button-bg-color); } &:first-child { - margin-bottom: var(--ti-transfer-first-button-margin-bottom); + margin-bottom: var(--tv-Transfer-first-button-margin-bottom); } &:nth-child(2) { @@ -111,7 +111,7 @@ i, span { - font-size: var(--ti-transfer-font-size); + font-size: var(--tv-Transfer-font-size); transform: translateY(-3px); // 适配 xdesign, 让span居中 display: inline-block; } @@ -124,24 +124,24 @@ & &__button { &.is-disabled, &.is-disabled:hover { - border: 1px solid var(--ti-transfer-button-disabled-border-color); - background-color: var(--ti-transfer-button-disabled-bg-color); - color: var(--ti-transfer-button-disabled-text-color); - line-height: var(--ti-transfer-button-disabled-line-height); + border: 1px solid var(--tv-Transfer-button-disabled-border-color); + background-color: var(--tv-Transfer-button-disabled-bg-color); + color: var(--tv-Transfer-button-disabled-text-color); + line-height: var(--tv-Transfer-button-disabled-line-height); .@{svg-prefix-cls} { - fill: var(--ti-transfer-button-disabled-text-color); + fill: var(--tv-Transfer-button-disabled-text-color); } } } } .@{transfer-panel-prefix-cls} { - border: 1px solid var(--ti-transfer-panel-border-color); - border-radius: var(--ti-transfer-panel-border-radius); + border: 1px solid var(--tv-Transfer-panel-border-color); + border-radius: var(--tv-Transfer-panel-border-radius); overflow: hidden; - background: var(--ti-transfer-panel-bg-color); - width: var(--ti-transfer-panel-width); + background: var(--tv-Transfer-panel-bg-color); + width: var(--tv-Transfer-panel-width); max-height: 100%; vertical-align: middle; box-sizing: border-box; @@ -149,42 +149,42 @@ &__body { position: relative; - height: var(--ti-transfer-panel-body-height); + height: var(--tv-Transfer-panel-body-height); text-align: left; - padding-right: var(--ti-transfer-panel-body-padding-right); - padding-left: var(--ti-transfer-panel-body-padding-left); + padding-right: var(--tv-Transfer-panel-body-padding-right); + padding-left: var(--tv-Transfer-panel-body-padding-left); &.is-with-footer { - padding-bottom: var(--ti-transfer-panel-body-footer-padding-bottom); - height: var(--ti-transfer-panel-body-footer-height); + padding-bottom: var(--tv-Transfer-panel-body-footer-padding-bottom); + height: var(--tv-Transfer-panel-body-footer-height); } .@{tree-prefix-cls} { - height: var(--ti-transfer-panel-body-tree-height); - padding-left: var(--ti-transfer-panel-body-tree-padding-left); - padding-right: var(--ti-transfer-panel-body-tree-padding-right); - padding-top: var(--ti-transfer-panel-body-tree-padding-top); - padding-bottom: var(--ti-transfer-panel-body-tree-padding-bottom); + height: var(--tv-Transfer-panel-body-tree-height); + padding-left: var(--tv-Transfer-panel-body-tree-padding-left); + padding-right: var(--tv-Transfer-panel-body-tree-padding-right); + padding-top: var(--tv-Transfer-panel-body-tree-padding-top); + padding-bottom: var(--tv-Transfer-panel-body-tree-padding-bottom); overflow: auto; .transfer-scrollbar(8px); } .@{transfer-panel-prefix-cls}__filter ~ .@{tree-prefix-cls} { - height: var(--ti-transfer-panel-body-tree-filter-height); + height: var(--tv-Transfer-panel-body-tree-filter-height); } } &__list { - margin-left: var(--ti-transfer-panel-body-list-margin-left); - margin-right: var(--ti-transfer-panel-body-list-margin-right); - margin-top: var(--ti-transfer-panel-body-list-margin-top); - margin-bottom: var(--ti-transfer-panel-body-list-margin-bottom); - padding-left: var(--ti-transfer-panel-body-list-padding-left); - padding-right: var(--ti-transfer-panel-body-list-padding-right); - padding-top: var(--ti-transfer-panel-body-list-padding-top); - padding-bottom: var(--ti-transfer-panel-body-list-padding-bottom); + margin-left: var(--tv-Transfer-panel-body-list-margin-left); + margin-right: var(--tv-Transfer-panel-body-list-margin-right); + margin-top: var(--tv-Transfer-panel-body-list-margin-top); + margin-bottom: var(--tv-Transfer-panel-body-list-margin-bottom); + padding-left: var(--tv-Transfer-panel-body-list-padding-left); + padding-right: var(--tv-Transfer-panel-body-list-padding-right); + padding-top: var(--tv-Transfer-panel-body-list-padding-top); + padding-bottom: var(--tv-Transfer-panel-body-list-padding-bottom); list-style: none; - height: var(--ti-transfer-panel-body-height); + height: var(--tv-Transfer-panel-body-height); overflow: auto; box-sizing: border-box; display: block; @@ -194,8 +194,8 @@ } &.is-filterable { - height: var(--ti-transfer-panel-body-filter-height); - padding-top: var(--ti-transfer-panel-body-filter-padding-top); + height: var(--tv-Transfer-panel-body-filter-height); + padding-top: var(--tv-Transfer-panel-body-filter-padding-top); display: flex; flex-direction: column; @@ -212,8 +212,8 @@ } &__item { - line-height: var(--ti-transfer-panel-item-height); - padding-left: var(--ti-transfer-panel-item-padding-left); + line-height: var(--tv-Transfer-panel-item-height); + padding-left: var(--tv-Transfer-panel-item-padding-left); display: flex; transition: all 0.5s; @@ -223,8 +223,8 @@ } &.@{checkbox-prefix-cls} { - color: var(--ti-transfer-panel-item-text-color); - line-height: var(--ti-transfer-panel-item-height); + color: var(--tv-Transfer-panel-item-text-color); + line-height: var(--tv-Transfer-panel-item-height); margin: 0; display: flex; @@ -235,8 +235,8 @@ white-space: nowrap; display: block; box-sizing: border-box; - padding-left: var(--ti-transfer-panel-item-checkbox-padding-left); - line-height: var(--ti-transfer-panel-item-height); + padding-left: var(--tv-Transfer-panel-item-checkbox-padding-left); + line-height: var(--tv-Transfer-panel-item-height); } .@{checkbox-prefix-cls}__input { @@ -245,8 +245,8 @@ } &:hover { - background: var(--ti-transfer-panel-item-hover-bg-color); - color: var(--ti-transfer-panel-item-hover-text-color); + background: var(--tv-Transfer-panel-item-hover-bg-color); + color: var(--tv-Transfer-panel-item-hover-text-color); } &.is-disabled:hover { @@ -263,22 +263,22 @@ text-align: center; // 从padding-left改为 margin-left. 原因是 当前dom是tiny-input的根元素， input的prefix,suffix插槽是绝对定位的 // 如果使用padding, 会影响插槽与边框的距离，贴在一起。 所以要改为margin 保证不影响插槽。 - margin-left: var(--ti-transfer-panel-filter-padding-left); - margin-right: var(--ti-transfer-panel-filter-padding-right); - margin-top: var(--ti-transfer-panel-filter-padding-top); - margin-bottom: var(--ti-transfer-panel-filter-padding-bottom); + margin-left: var(--tv-Transfer-panel-filter-padding-left); + margin-right: var(--tv-Transfer-panel-filter-padding-right); + margin-top: var(--tv-Transfer-panel-filter-padding-top); + margin-bottom: var(--tv-Transfer-panel-filter-padding-bottom); box-sizing: border-box; display: block; width: auto; .@{input-prefix-cls}__inner { - height: var(--ti-transfer-panel-filter-height); - line-height: var(--ti-transfer-panel-filter-height); + height: var(--tv-Transfer-panel-filter-height); + line-height: var(--tv-Transfer-panel-filter-height); width: 100%; - font-size: var(--ti-transfer-panel-filter-font-size); + font-size: var(--tv-Transfer-panel-filter-font-size); display: inline-block; box-sizing: border-box; - border-radius: var(--ti-transfer-panel-filter-border-radius); + border-radius: var(--tv-Transfer-panel-filter-border-radius); border-bottom-color: #f0f0f0 !important; padding-left: 24px; padding-right: 0; @@ -293,20 +293,20 @@ } & &__header { - height: var(--ti-transfer-header-height); - line-height: var(--ti-transfer-header-height); - background: var(--ti-transfer-header-bg-color); - margin-left: var(--ti-transfer-header-margin-left); - margin-right: var(--ti-transfer-header-margin-right); - margin-top: var(--ti-transfer-header-margin-top); - margin-bottom: var(--ti-transfer-header-margin-bottom); - padding-left: var(--ti-transfer-header-padding-left); - padding-right: var(--ti-transfer-header-padding-right); - padding-top: var(--ti-transfer-header-padding-top); - padding-bottom: var(--ti-transfer-header-padding-bottom); - border-bottom: 1px solid var(--ti-transfer-header-border-color); + height: var(--tv-Transfer-header-height); + line-height: var(--tv-Transfer-header-height); + background: var(--tv-Transfer-header-bg-color); + margin-left: var(--tv-Transfer-header-margin-left); + margin-right: var(--tv-Transfer-header-margin-right); + margin-top: var(--tv-Transfer-header-margin-top); + margin-bottom: var(--tv-Transfer-header-margin-bottom); + padding-left: var(--tv-Transfer-header-padding-left); + padding-right: var(--tv-Transfer-header-padding-right); + padding-top: var(--tv-Transfer-header-padding-top); + padding-bottom: var(--tv-Transfer-header-padding-bottom); + border-bottom: 1px solid var(--tv-Transfer-header-border-color); box-sizing: border-box; - color: var(--ti-transfer-header-text-color); + color: var(--tv-Transfer-header-text-color); position: relative; display: flex; justify-content: flex-start; @@ -318,8 +318,8 @@ text-align: left; .@{checkbox-prefix-cls}__label { - font-size: var(--ti-transfer-header-font-size); - color: var(--ti-transfer-header-text-color); + font-size: var(--tv-Transfer-header-font-size); + color: var(--tv-Transfer-header-text-color); font-weight: 400; width: calc(100% - 38px); overflow: hidden; @@ -329,9 +329,9 @@ span { position: absolute; right: 0; - color: var(--ti-transfer-header-span-text-color); - font-size: var(--ti-transfer-header-font-size); - font-weight: var(--ti-transfer-header-span-font-weight); + color: var(--tv-Transfer-header-span-text-color); + font-size: var(--tv-Transfer-header-font-size); + font-weight: var(--tv-Transfer-header-span-font-weight); } } } @@ -343,20 +343,20 @@ transform: translateY(-50%); div { - width: var(--ti-transfer-header-sort-width); - height: var(--ti-transfer-header-sort-width); - line-height: var(--ti-transfer-header-sort-width); - margin-right: var(--ti-transfer-header-sort-margin-right); + width: var(--tv-Transfer-header-sort-width); + height: var(--tv-Transfer-header-sort-width); + line-height: var(--tv-Transfer-header-sort-width); + margin-right: var(--tv-Transfer-header-sort-margin-right); text-align: center; border: 1px solid; - border-radius: var(--ti-transfer-header-sort-border-radius); - color: var(--ti-transfer-header-sort-text-color); + border-radius: var(--tv-Transfer-header-sort-border-radius); + color: var(--tv-Transfer-header-sort-text-color); display: inline-block; cursor: pointer; i { - width: calc(var(--ti-transfer-header-sort-width) - 2px); - height: calc(var(--ti-transfer-header-sort-width) - 2px); + width: calc(var(--tv-Transfer-header-sort-width) - 2px); + height: calc(var(--tv-Transfer-header-sort-width) - 2px); display: block; } } @@ -364,17 +364,17 @@ } & &__footer { - height: var(--ti-transfer-footer-height); - background: var(--ti-transfer-footer-bg-color); - margin-left: var(--ti-transfer-footer-margin-left); - margin-right: var(--ti-transfer-footer-margin-right); - margin-top: var(--ti-transfer-footer-margin-top); - margin-bottom: var(--ti-transfer-footer-margin-bottom); - padding-left: var(--ti-transfer-footer-padding-left); - padding-right: var(--ti-transfer-footer-padding-right); - padding-top: var(--ti-transfer-footer-padding-top); - padding-bottom: var(--ti-transfer-footer-padding-bottom); - border-top: 1px solid var(--ti-transfer-footer-border-color); + height: var(--tv-Transfer-footer-height); + background: var(--tv-Transfer-footer-bg-color); + margin-left: var(--tv-Transfer-footer-margin-left); + margin-right: var(--tv-Transfer-footer-margin-right); + margin-top: var(--tv-Transfer-footer-margin-top); + margin-bottom: var(--tv-Transfer-footer-margin-bottom); + padding-left: var(--tv-Transfer-footer-padding-left); + padding-right: var(--tv-Transfer-footer-padding-right); + padding-top: var(--tv-Transfer-footer-padding-top); + padding-bottom: var(--tv-Transfer-footer-padding-bottom); + border-top: 1px solid var(--tv-Transfer-footer-border-color); position: absolute; bottom: 0; left: 0; @@ -389,7 +389,7 @@ } .@{checkbox-prefix-cls} { - padding-left: var(--ti-transfer-footer-checkbox-padding-left); + padding-left: var(--tv-Transfer-footer-checkbox-padding-left); } } @@ -398,13 +398,13 @@ width: 100%; top: calc(50% - 33px); margin: 0; - height: var(--ti-transfer-empty-height); - line-height: var(--ti-transfer-empty-height); - padding-left: var(--ti-transfer-empty-padding-left); - padding-right: var(--ti-transfer-empty-padding-right); - padding-top: var(--ti-transfer-empty-padding-top); - padding-bottom: var(--ti-transfer-empty-padding-bottom); - color: var(--ti-transfer-empty-text-color); + height: var(--tv-Transfer-empty-height); + line-height: var(--tv-Transfer-empty-height); + padding-left: var(--tv-Transfer-empty-padding-left); + padding-right: var(--tv-Transfer-empty-padding-right); + padding-top: var(--tv-Transfer-empty-padding-top); + padding-bottom: var(--tv-Transfer-empty-padding-bottom); + color: var(--tv-Transfer-empty-text-color); text-align: center; } @@ -417,10 +417,10 @@ .@{table-prefix-cls}.simple { width: 100%; - padding-left: var(--ti-transfer-table-padding-left); - padding-right: var(--ti-transfer-table-padding-right); - padding-top: var(--ti-transfer-table-padding-top); - padding-bottom: var(--ti-transfer-table-padding-bottom); + padding-left: var(--tv-Transfer-table-padding-left); + padding-right: var(--tv-Transfer-table-padding-right); + padding-top: var(--tv-Transfer-table-padding-top); + padding-bottom: var(--tv-Transfer-table-padding-bottom); height: 400px; overflow-y: auto; @@ -430,14 +430,14 @@ } .@{pager-prefix-cls} { - padding-left: var(--ti-transfer-pager-padding-left); - padding-top: var(--ti-transfer-pager-padding-top); - padding-bottom: var(--ti-transfer-pager-padding-bottom); - padding-right: var(--ti-transfer-pager-padding-right); + padding-left: var(--tv-Transfer-pager-padding-left); + padding-top: var(--tv-Transfer-pager-padding-top); + padding-bottom: var(--tv-Transfer-pager-padding-bottom); + padding-right: var(--tv-Transfer-pager-padding-right); } } .@{checkbox-prefix-cls}__label { - padding-left: var(--ti-transfer-checkbox-label-padding-left); + padding-left: var(--tv-Transfer-checkbox-label-padding-left); } } diff --git a/packages/theme/src/transfer/vars.less b/packages/theme/src/transfer/vars.less index 7a984ddee0..0e94caacdc 100644 --- a/packages/theme/src/transfer/vars.less +++ b/packages/theme/src/transfer/vars.less @@ -10,235 +10,235 @@ * */ -.component-css-vars-transfer() { +.inject-Transfer-vars() { // 字体基础大小 - --ti-transfer-font-size: var(--ti-common-font-size-1, 14px); + --tv-Transfer-font-size: var(--tv-font-size-md, 14px); // 按钮组左侧内边距 - --ti-transfer-buttons-padding-left: var(--ti-common-space-4x, 16px); + --tv-Transfer-buttons-padding-left: var(--tv-space-xl, 16px); // 按钮组右侧内边距 - --ti-transfer-buttons-padding-right: var(--ti-common-space-4x, 16px); + --tv-Transfer-buttons-padding-right: var(--tv-space-xl, 16px); // 按钮组顶部内边距 - --ti-transfer-buttons-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-padding-top: 0; // 按钮组底部内边距 - --ti-transfer-buttons-padding-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-padding-bottom: 0; // 按钮组默认按钮组左侧外边距 - --ti-transfer-buttons-defaultButton-margin-left: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-defaultButton-margin-left: 0; // 按钮组默认按钮组右侧外边距 - --ti-transfer-buttons-defaultButton-margin-right: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-defaultButton-margin-right: 0; // 按钮组默认按钮组顶部外边距 - --ti-transfer-buttons-defaultButton-margin-top: var(--ti-common-space-3x, 12px); + --tv-Transfer-buttons-defaultButton-margin-top: var(--tv-space-lg, 12px); // 按钮组默认按钮组底部外边距 - --ti-transfer-buttons-defaultButton-margin-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-defaultButton-margin-bottom: 0; // 按钮组左侧外边距 - --ti-transfer-buttons-margin-left: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-margin-left: 0; // 按钮组右侧外边距 - --ti-transfer-buttons-margin-right: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-margin-right: 0; // 按钮组顶部外边距 - --ti-transfer-buttons-margin-top: var(--ti-common-space-0, 0px); + --tv-Transfer-buttons-margin-top: 0; // 按钮组底部外边距 - --ti-transfer-buttons-margin-bottom: var(--ti-common-space-2x, 8px); + --tv-Transfer-buttons-margin-bottom: var(--tv-space-md, 8px); // 按钮左侧外边距 - --ti-transfer-button-margin-left: auto; + --tv-Transfer-button-margin-left: auto; // 按钮右侧外边距 - --ti-transfer-button-margin-right: auto; + --tv-Transfer-button-margin-right: auto; // 按钮顶部外边距 - --ti-transfer-button-margin-top: var(--ti-common-space-0, 0px); + --tv-Transfer-button-margin-top: 0; // 按钮底部外边距 - --ti-transfer-button-margin-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-button-margin-bottom: 0; // 按钮背景色 - --ti-transfer-button-bg-color: #1476ff; + --tv-Transfer-button-bg-color: var(--tv-color-bg-active-control); // 按钮左侧内边距 - --ti-transfer-button-padding-left: 2px; + --tv-Transfer-button-padding-left: var(--tv-space-xs); // 按钮右侧内边距 - --ti-transfer-button-padding-right: 2px; + --tv-Transfer-button-padding-right: var(--tv-space-xs); // 按钮顶部内边距 - --ti-transfer-button-padding-top: 2px; + --tv-Transfer-button-padding-top: var(--tv-space-xs); // 按钮底部内边距 - --ti-transfer-button-padding-bottom: 2px; + --tv-Transfer-button-padding-bottom: var(--tv-space-xs); // 按钮圆角 - --ti-transfer-button-border-radius: var(--ti-common-size-base, 4px); + --tv-Transfer-button-border-radius: var(--tv-border-radius-sm, 4px); // 按钮禁用时文本色 - --ti-transfer-button-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2); + --tv-Transfer-button-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2); // 按钮禁用时边框色 - --ti-transfer-button-disabled-border-color: var(--ti-common-color-line-normal, #c2c2c2); + --tv-Transfer-button-disabled-border-color: var(--tv-color-border, #c2c2c2); // 按钮禁用时背景色 - --ti-transfer-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0); + --tv-Transfer-button-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0); // 按钮禁用时行高 - --ti-transfer-button-disabled-line-height: 1; + --tv-Transfer-button-disabled-line-height: 1; // 第一个按钮的底部外边距 - --ti-transfer-first-button-margin-bottom: var(--ti-common-space-3x, 12px); + --tv-Transfer-first-button-margin-bottom: var(--tv-space-lg, 12px); // 面板背景色 - --ti-transfer-panel-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); + --tv-Transfer-panel-bg-color: var(--tv-color-bg-secondary, #ffffff); // 面板内容区域高度 - --ti-transfer-panel-body-height: 260px; + --tv-Transfer-panel-body-height: 260px; // 面板内容区域边框色 - --ti-transfer-panel-border-color: var(--ti-common-color-line-normal, #c2c2c2); + --tv-Transfer-panel-border-color: var(--tv-color-border, #c2c2c2); // 面板内容区域边框圆角 - --ti-transfer-panel-border-radius: var(--ti-common-border-radius-normal, 6px); + --tv-Transfer-panel-border-radius: var(--tv-border-radius-md, 6px); // 面板高度 - --ti-transfer-panel-item-height: var(--ti-common-size-8x, 32px); + --tv-Transfer-panel-item-height: 32px; // 面板文本色 - --ti-transfer-panel-item-text-color: var(--ti-common-color-info-normal, #191919); + --tv-Transfer-panel-item-text-color: var(--tv-color-text, #191919); // 面板悬浮时文本色 - --ti-transfer-panel-item-hover-text-color: var(--ti-common-color-icon-hover, #191919); + --tv-Transfer-panel-item-hover-text-color: var(--tv-color-text, #191919); // 面板悬浮时背景色 - --ti-transfer-panel-item-hover-bg-color: var(ti-common-color-bg-normal, #f5f5f5); + --tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5); // 面板搜索框高度 - --ti-transfer-panel-filter-height: var(--ti-common-size-height-normal, 32px); + --tv-Transfer-panel-filter-height: 32px; // 面板搜索框字体大小 - --ti-transfer-panel-filter-font-size: var(--ti-common-font-size-base, 14px); + --tv-Transfer-panel-filter-font-size: var(--tv-font-size-md, 14px); // 面板搜索框边框圆角 - --ti-transfer-panel-filter-border-radius: var(--ti-common-border-radius-normal, 6px); + --tv-Transfer-panel-filter-border-radius: var(--tv-border-radius-md, 6px); // 面板内容区域过滤后列表高度 - --ti-transfer-panel-body-filter-height: calc(var(--ti-common-size-50x, 200px) + 16px); + --tv-Transfer-panel-body-filter-height: 216px; // 面板内容区域右内边距 - --ti-transfer-panel-body-padding-right: calc(var(--ti-common-space-1, 1px) + 1px); + --tv-Transfer-panel-body-padding-right: var(--tv-space-xs, 2px); // 面板内容区域左内边距 - --ti-transfer-panel-body-padding-left: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-padding-left: 0; // 面板内容区域存在底部时的内边距 - --ti-transfer-panel-body-footer-padding-bottom: var(--ti-common-space-10x, 40px); + --tv-Transfer-panel-body-footer-padding-bottom: 40px; // 面板内容区域存在底部时的高度 - --ti-transfer-panel-body-footer-height: calc(100% - 40px); + --tv-Transfer-panel-body-footer-height: calc(100% - 40px); // 面板宽度 - --ti-transfer-panel-width: var(--ti-common-size-50x, 200px); + --tv-Transfer-panel-width: 200px; // 面板头部高度 - --ti-transfer-header-height: 38px; + --tv-Transfer-header-height: 38px; // 面板头部背景色 - --ti-transfer-header-bg-color: #fff; + --tv-Transfer-header-bg-color: var(--tv-color-bg-secondary, #fff); // 面板头部边框色 - --ti-transfer-header-border-color: rgba(0, 0, 0, 0.08); + --tv-Transfer-header-border-color: #00000014; // 没有对应common变量值 // 面板头部文本色 - --ti-transfer-header-text-color: var(--ti-common-color-info-normal, #191919); + --tv-Transfer-header-text-color: var(--tv-color-text, #191919); // 面板头部span文本色 - --ti-transfer-header-span-text-color: var(--ti-common-color-info-normal, #191919); + --tv-Transfer-header-span-text-color: var(--tv-color-text, #191919); // 面板头部字体大小 - --ti-transfer-header-font-size: var(--ti-common-font-size-base, 14px); + --tv-Transfer-header-font-size: var(--tv-font-size-md, 14px); // 面板头部排序图标宽度 - --ti-transfer-header-sort-width: var(--ti-common-size-5x, 20px); + --tv-Transfer-header-sort-width: 20px; // 面板头部排序图标文本色 - --ti-transfer-header-sort-text-color: var(--ti-common-color-bg-emphasize, #191919); + --tv-Transfer-header-sort-text-color: var(--tv-color-text-important, #191919); // 面板底部高度 - --ti-transfer-footer-height: var(--ti-common-size-10x, 40px); + --tv-Transfer-footer-height: 40px; // 面板底部背景色 - --ti-transfer-footer-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); + --tv-Transfer-footer-bg-color: var(--tv-color-bg-secondary, #ffffff); // 面板底部边框色 - --ti-transfer-footer-border-color: var(--ti-common-color-line-normal, #c2c2c2); + --tv-Transfer-footer-border-color: var(--tv-color-border, #c2c2c2); // 面板内容区域列表为空时显示的文本高度 - --ti-transfer-empty-height: var(--ti-common-size-height-minor, 30px); + --tv-Transfer-empty-height: 30px; // 面板内容区域列表为空时显示的文本色 - --ti-transfer-empty-text-color: var(--ti-common-color-text-weaken, #808080); + --tv-Transfer-empty-text-color: var(--tv-color-text-weaken, #808080); // 面板内容区域为嵌套树样式时的高度 - --ti-transfer-panel-body-tree-height: 100%; + --tv-Transfer-panel-body-tree-height: 100%; // 面板内容区域为嵌套树样式时的左侧内边距 - --ti-transfer-panel-body-tree-padding-left: var(--ti-common-space-2x, 8px); + --tv-Transfer-panel-body-tree-padding-left: var(--tv-space-md, 8px); // 面板内容区域为嵌套树样式时的右侧内边距 - --ti-transfer-panel-body-tree-padding-right: var(--ti-common-space-2x, 8px); + --tv-Transfer-panel-body-tree-padding-right: var(--tv-space-md, 8px); // 面板内容区域为嵌套树样式时的顶部内边距 - --ti-transfer-panel-body-tree-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-tree-padding-top: 0; // 面板内容区域为嵌套树样式时的底部内边距 - --ti-transfer-panel-body-tree-padding-bottom: var(--ti-common-space-2x, 8px); + --tv-Transfer-panel-body-tree-padding-bottom: var(--tv-space-md, 8px); // 面板内容区域为嵌套树样式时搜索框过滤后的高度 - --ti-transfer-panel-body-tree-filter-height: calc(100% - 46px); + --tv-Transfer-panel-body-tree-filter-height: calc(100% - 46px); // 面板内容区域列表的左侧外边距 - --ti-transfer-panel-body-list-margin-left: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-margin-left: 0; // 面板内容区域列表的右侧外边距 - --ti-transfer-panel-body-list-margin-right: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-margin-right: 0; // 面板内容区域列表的顶部外边距 - --ti-transfer-panel-body-list-margin-top: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-margin-top: 0; // 面板内容区域列表的底部外边距 - --ti-transfer-panel-body-list-margin-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-margin-bottom: 0; // 面板内容区域列表的左侧内边距 - --ti-transfer-panel-body-list-padding-left: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-padding-left: 0; // 面板内容区域列表的右侧内边距 - --ti-transfer-panel-body-list-padding-right: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-list-padding-right: 0; // 面板内容区域列表的顶部内边距 - --ti-transfer-panel-body-list-padding-top: 4px; + --tv-Transfer-panel-body-list-padding-top: 4px; // 面板内容区域列表的底部内边距 - --ti-transfer-panel-body-list-padding-bottom: 4px; + --tv-Transfer-panel-body-list-padding-bottom: 4px; // 面板内容区域过滤后顶部内边距 - --ti-transfer-panel-body-filter-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-panel-body-filter-padding-top: 0; // 面板左侧内边距 - --ti-transfer-panel-item-padding-left: var(--ti-common-space-4x, 16px); + --tv-Transfer-panel-item-padding-left: var(--tv-space-xl, 16px); // 面板多选框左侧内边距 - --ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x, 20px) + 2px); + --tv-Transfer-panel-item-checkbox-padding-left: 22px; // 面板搜索框左侧内边距 - --ti-transfer-panel-filter-padding-left: var(--ti-common-space-4x, 16px); + --tv-Transfer-panel-filter-padding-left: var(--tv-space-xl, 16px); // 面板搜索框右侧内边距 - --ti-transfer-panel-filter-padding-right: var(--ti-common-space-4x, 16px); + --tv-Transfer-panel-filter-padding-right: var(--tv-space-xl, 16px); // 面板搜索框顶部内边距 - --ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x, 8px); + --tv-Transfer-panel-filter-padding-top: var(--tv-space-md, 8px); // 面板搜索框底部内边距 - --ti-transfer-panel-filter-padding-bottom: var(--ti-common-space-2x, 8px); + --tv-Transfer-panel-filter-padding-bottom: var(--tv-space-md, 8px); // 头部左侧外边距 - --ti-transfer-header-margin-left: var(--ti-common-space-0, 0px); + --tv-Transfer-header-margin-left: 0; // 头部右侧外边距 - --ti-transfer-header-margin-right: var(--ti-common-space-0, 0px); + --tv-Transfer-header-margin-right: 0; // 头部顶部外边距 - --ti-transfer-header-margin-top: var(--ti-common-space-0, 0px); + --tv-Transfer-header-margin-top: 0; // 头部底部外边距 - --ti-transfer-header-margin-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-header-margin-bottom: 0; // 头部左侧内边距 - --ti-transfer-header-padding-left: var(--ti-common-space-4x, 16px); + --tv-Transfer-header-padding-left: var(--tv-space-xl, 16px); // 头部右侧内边距 - --ti-transfer-header-padding-right: var(--ti-common-space-4x, 16px); + --tv-Transfer-header-padding-right: var(--tv-space-xl, 16px); // 头部顶部内边距 - --ti-transfer-header-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-header-padding-top: 0; // 头部底部内边距 - --ti-transfer-header-padding-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-header-padding-bottom: 0; // 面板头部span字重 - --ti-transfer-header-span-font-weight: var(--ti-common-font-weight-4, normal); + --tv-Transfer-header-span-font-weight: var(--tv-font-weight-regular, normal); // 面板头部排序图标右侧外边距 - --ti-transfer-header-sort-margin-right: var(--ti-common-space-2x, 8px); + --tv-Transfer-header-sort-margin-right: var(--tv-space-md, 8px); // 面板头部排序图标边框圆角 - --ti-transfer-header-sort-border-radius: 50%; + --tv-Transfer-header-sort-border-radius: 50%; // 面板底部左侧外边距 - --ti-transfer-footer-margin-left: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-margin-left: 0; // 面板底部右侧外边距 - --ti-transfer-footer-margin-right: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-margin-right: 0; // 面板底部的顶部外边距 - --ti-transfer-footer-margin-top: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-margin-top: 0; // 面板底部的底部外边距 - --ti-transfer-footer-margin-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-margin-bottom: 0; // 面板底部左侧内边距 - --ti-transfer-footer-padding-left: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-padding-left: 0; // 面板底部右侧内边距 - --ti-transfer-footer-padding-right: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-padding-right: 0; // 面板底部的顶部内边距 - --ti-transfer-footer-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-padding-top: 0; // 面板底部的底部内边距 - --ti-transfer-footer-padding-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-footer-padding-bottom: 0; // 面板底部复选框左侧内边距 - --ti-transfer-footer-checkbox-padding-left: var(--ti-common-space-5x, 20px); + --tv-Transfer-footer-checkbox-padding-left: 20px; // 面板内容区域列表为空时显示的无数据文本的顶部内边距 - --ti-transfer-empty-padding-top: var(--ti-common-space-6, 6px); + --tv-Transfer-empty-padding-top: 6px; // 面板内容区域列表为空时显示的无数据文本的右侧内边距 - --ti-transfer-empty-padding-right: calc(var(--ti-common-space-4x, 16px) - 1px); + --tv-Transfer-empty-padding-right: 15px; // 面板内容区域列表为空时显示的无数据文本的底部内边距 - --ti-transfer-empty-padding-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-empty-padding-bottom: 0; // 面板内容区域列表为空时显示的无数据文本的左侧内边距 - --ti-transfer-empty-padding-left: var(--ti-common-space-0, 0px); + --tv-Transfer-empty-padding-left: 0; // 面板内容区域表格的左侧内边距 - --ti-transfer-table-padding-left: var(--ti-common-space-2x, 8px); + --tv-Transfer-table-padding-left: var(--tv-space-md, 8px); // 面板内容区域表格的顶部内边距 - --ti-transfer-table-padding-top: var(--ti-common-space-0, 0px); + --tv-Transfer-table-padding-top: 0; // 面板内容区域表格的右侧内边距 - --ti-transfer-table-padding-right: var(--ti-common-space-2x, 8px); + --tv-Transfer-table-padding-right: var(--tv-space-md, 8px); // 面板内容区域表格的底部内边距 - --ti-transfer-table-padding-bottom: var(--ti-common-space-0, 0px); + --tv-Transfer-table-padding-bottom: 0; // 面板内容区域分页的左侧内边距 - --ti-transfer-pager-padding-left: var(--ti-common-space-10, 10px); + --tv-Transfer-pager-padding-left: 10px; // 面板内容区域分页的顶部内边距 - --ti-transfer-pager-padding-top: var(--ti-common-space-10, 10px); + --tv-Transfer-pager-padding-top: 10px; // 面板内容区域分页的右侧内边距 - --ti-transfer-pager-padding-right: var(--ti-common-space-10, 10px); + --tv-Transfer-pager-padding-right: 10px; // 面板内容区域分页的底部内边距 - --ti-transfer-pager-padding-bottom: var(--ti-common-space-10, 10px); + --tv-Transfer-pager-padding-bottom: 10px; // 多选框左侧内边距 - --ti-transfer-checkbox-label-padding-left: var(--ti-common-space-2x, 8px); + --tv-Transfer-checkbox-label-padding-left: var(--tv-space-md, 8px); // 穿梭按钮宽度 - --ti-transfer-button-width: var(--ti-common-size-4x, 16px); + --tv-Transfer-button-width: 16px; // 穿梭按钮高度 - --ti-transfer-button-height: var(--ti-common-size-4x, 16px); + --tv-Transfer-button-height: 16px; // 穿梭箭头大小 - --ti-transfer-svg-font-size: 10px; + --tv-Transfer-svg-font-size: 10px; }