From 8a0b9820aad9d6dc93a8e80298d7dca3daf59202 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 18 Oct 2024 15:06:42 +0800
Subject: [PATCH 1/2] refactor(theme): [popeditor] refactor popeditor theme
vars
---
packages/theme/src/popeditor/index.less | 91 +++++++++++------------
packages/theme/src/popeditor/vars.less | 96 +++++--------------------
2 files changed, 59 insertions(+), 128 deletions(-)
diff --git a/packages/theme/src/popeditor/index.less b/packages/theme/src/popeditor/index.less
index 850ee5bccb..53333e49ff 100644
--- a/packages/theme/src/popeditor/index.less
+++ b/packages/theme/src/popeditor/index.less
@@ -20,17 +20,16 @@
@svg-prefix-cls: ~'@{css-prefix}svg';
.@{popeditor-prefix-cls} {
- .component-css-vars-popeditor();
+ .inject-Popeditor-vars();
.@{input-prefix-cls} {
&.@{popeditor-prefix-cls}-readonly .@{input-prefix-cls}__inner {
- padding-left: var(--ti-popeditor-input-padding-left);
+ padding-left: 8px;
&:hover,
&:focus,
&:active {
cursor: pointer;
- border-color: var(--ti-popeditor-border-color);
}
}
@@ -43,7 +42,7 @@
& + .@{input-prefix-cls}__suffix {
.@{svg-prefix-cls}__popeditor {
- fill: var(--ti-popeditor-icon-color-disabled);
+ fill: var(--tv-Popeditor-icon-color-disabled);
}
}
}
@@ -54,7 +53,7 @@
.@{svg-prefix-cls}__popeditor,
.@{svg-prefix-cls}__popeditor:hover {
- fill: var(--ti-popeditor-icon-color-disabled);
+ fill: var(--tv-Popeditor-icon-color-disabled);
cursor: not-allowed;
}
}
@@ -80,7 +79,7 @@
cursor: not-allowed;
.@{svg-prefix-cls}__popeditor {
- fill: var(--ti-popeditor-icon-color-hover);
+ fill: var(--tv-Popeditor-icon-color-hover);
}
}
}
@@ -90,14 +89,14 @@
cursor: pointer;
.@{svg-prefix-cls}__popeditor {
- height: var(--ti-popeditor-icon-height);
- line-height: var(--ti-popeditor-icon-line-height);
- font-size: var(--ti-popeditor-icon-font-size);
- fill: var(--ti-popeditor-icon-color);
+ height: var(--tv-Popeditor-icon-height);
+ line-height: var(--tv-Popeditor-icon-line-height);
+ font-size: var(--tv-Popeditor-icon-font-size);
+ fill: var(--tv-Popeditor-icon-color);
cursor: pointer;
&:hover {
- fill: var(--ti-popeditor-icon-color-hover);
+ fill: var(--tv-Popeditor-icon-color-hover);
}
}
}
@@ -122,21 +121,21 @@
display: flex;
justify-content: flex-end;
align-items: center;
- margin-bottom: var(--ti-popeditor-search-item-margin-bottom);
+ margin-bottom: 24px;
.@{popeditor-prefix-cls}__search-label {
- text-align: var(--ti-popeditor-search-item-text-align);
+ text-align: left;
padding-right: 8px;
font-size: var(--ti-common-font-size-base);
- width: var(--ti-popeditor-search-item-width);
+ width: var(--tv-Popeditor-search-item-width);
}
&:nth-child(2n + 1) {
- padding-right: var(--ti-popeditor-search-item-padding-right);
+ padding-right: 16px;
}
&:nth-child(2n) {
- padding-left: var(--ti-popeditor-search-item-padding-left);
+ padding-left: 16px;
}
}
@@ -147,9 +146,8 @@
.@{popeditor-prefix-cls}__search-footer {
width: 100%;
- text-align: var(--ti-popeditor-search-footer-text-align);
- margin: var(--ti-popeditor-search-footer-margin-top) var(--ti-popeditor-search-footer-margin-horizontal)
- var(--ti-popeditor-search-footer-margin-bottom);
+ text-align: right;
+ margin: 0 auto 24px;
}
}
@@ -160,13 +158,11 @@
align-items: flex-start;
&__left {
- padding: var(--ti-popeditor-tabs-body-left-padding-top) var(--ti-popeditor-tabs-body-left-padding-right)
- var(--ti-popeditor-tabs-body-left-padding-bottom) var(--ti-popeditor-tabs-body-left-padding-left);
+ padding: 0 16px 0 0;
}
-
+
&__right {
- padding: var(--ti-popeditor-tabs-body-right-padding-top) var(--ti-popeditor-tabs-body-right-padding-right)
- var(--ti-popeditor-tabs-body-right-padding-bottom) var(--ti-popeditor-tabs-body-right-padding-left);
+ padding: 0 0 0 16px;
}
&__left,
@@ -183,33 +179,32 @@
.@{popeditor-prefix-cls}__tabs-head {
white-space: nowrap;
margin: 0;
- padding: 0 var(--ti-popeditor-tabs-header-padding-horizontal);
+ padding: 0;
overflow: hidden;
- height: var(--ti-popeditor-tabs-li-height);
+ height: var(--tv-Popeditor-tabs-li-height);
width: 100%;
position: relative;
ul {
- height: var(--ti-popeditor-tabs-li-height);
- border-bottom: 1px solid var(--ti-popeditor-border-color);
+ height: var(--tv-Popeditor-tabs-li-height);
+ border-bottom: 1px solid transparent;
box-sizing: border-box;
li {
float: left;
margin-right: -1px;
cursor: pointer;
- padding: var(--ti-popeditor-tabs-li-padding-vertical) var(--ti-popeditor-tabs-li-padding-horizontal);
- color: var(--ti-popeditor-tabs-text-color);
+ padding: 0 32px 0 0;
+ color: var(--tv-Popeditor-tabs-text-color);
min-width: 90px;
- height: var(--ti-popeditor-tabs-li-height);
- line-height: var(--ti-popeditor-tabs-li-line-height);
- font-size: var(--ti-popeditor-tabs-font-size);
- margin-right: var(--ti-popeditor-tabs-li-margin-right);
+ height: var(--tv-Popeditor-tabs-li-height);
+ line-height: var(--tv-Popeditor-tabs-li-line-height);
+ font-size: var(--tv-Popeditor-tabs-font-size);
&.@{popeditor-prefix-cls}__tabs-selected {
- color: var(--ti-popeditor-tabs-selected-text-color);
- border-bottom: 3px solid var(--ti-popeditor-tabs-selected-text-color);
- font-weight: var(--ti-popeditor-tabs-selected-font-weight);
+ color: var(--tv-Popeditor-tabs-selected-text-color);
+ border-bottom: 3px solid var(--tv-Popeditor-tabs-selected-text-color);
+ font-weight: var(--tv-Popeditor-tabs-selected-font-weight);
}
}
}
@@ -217,11 +212,10 @@
.@{popeditor-prefix-cls}__tabs-body {
.tabs-body-item {
- padding: var(--ti-popeditor-tabs-body-item-padding-top) var(--ti-popeditor-tabs-body-item-padding-horizontal)
- var(--ti-popeditor-tabs-body-item-padding-bottom);
+ padding: 16px 0 0;
.@{pager-prefix-cls} {
- padding-top: var(--ti-popeditor-pager-padding-top);
+ padding-top: 12px;
padding-bottom: 0;
}
}
@@ -233,16 +227,17 @@
.@{popeditor-prefix-cls}__filter-input {
margin-bottom: 20px;
- .tiny-input__inner {
- padding-left: var(--ti-popeditor-tree-input-padding-left);
- padding-right: var(--ti-popeditor-tree-input-padding-right);
+ .tiny-input__inner {
+ padding-left: 28px;
+ padding-right: 8px;
}
.tiny-input__prefix {
- visibility: var(--ti-popeditor-tree-input-prefix-visibility);
+ visibility: visible;
}
+
.tiny-input__suffix {
- visibility: var(--ti-popeditor-tree-input-sufffix-visibility);
+ visibility: hidden;
}
}
@@ -253,10 +248,10 @@
}
.@{popeditor-prefix-cls}__dialog-box {
- .component-css-vars-popeditor();
+ .inject-Popeditor-vars();
.@{dialog-box-prefix-cls}__footer {
- text-align: var(--ti-popeditor-footer-text-align);
- padding-top: var(--ti-popeditor-footer-padding-top);
+ text-align: right;
+ padding-top: 24px;
}
}
diff --git a/packages/theme/src/popeditor/vars.less b/packages/theme/src/popeditor/vars.less
index 5e325bca2a..dfaa732555 100644
--- a/packages/theme/src/popeditor/vars.less
+++ b/packages/theme/src/popeditor/vars.less
@@ -10,95 +10,31 @@
*
*/
-.component-css-vars-popeditor() {
- // 弹出框标题底部边框色和输入框边框色
- --ti-popeditor-border-color: var(--ti-common-border-color-transparent-8, var(--ti-base-bg-color-transparent-8));
- // 输入框左内边距
- --ti-popeditor-input-padding-left: var(--ti-common-space-2x, 8px);
+.inject-Popeditor-vars() {
// 输入框右侧默认图标色
- --ti-popeditor-icon-color: var(--ti-common-color-icon-active, #191919);
+ --tv-Popeditor-icon-color: var(--tv-color-icon);
// 输入框右侧禁用图标色
- --ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder, #808080);
+ --tv-Popeditor-icon-color-disabled: var(--tv-color-icon-disabled);
// 输入框右侧默认图标悬浮色
- --ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover, #595959);
+ --tv-Popeditor-icon-color-hover: var(--tv-color-icon-hover);
// 输入框右侧默认图标字号
- --ti-popeditor-icon-font-size: var(--ti-common-font-size-1, 14px);
+ --tv-Popeditor-icon-font-size: var(--tv-font-size-md);
// 输入框右侧默认图标高度
- --ti-popeditor-icon-height: var(--ti-common-size-height-normal, 32px);
+ --tv-Popeditor-icon-height: var(--tv-size-height-md);
// 输入框右侧默认图标行高
- --ti-popeditor-icon-line-height: var(--ti-popeditor-icon-height);
+ --tv-Popeditor-icon-line-height: var(--tv-Popeditor-icon-height);
// 弹出框头部标题选中文本色和边框色
- --ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active, #191919);
+ --tv-Popeditor-tabs-selected-text-color: var(--tv-color-text);
// 弹出框头部标题高度
- --ti-popeditor-tabs-li-height: calc(var(--ti-common-size-8x, 32px) + 2px);
- // 出框头部标题行高
- --ti-popeditor-tabs-li-line-height: var(--ti-common-line-height-2, 24px);
+ --tv-Popeditor-tabs-li-height: 34px;
+ // 弹出框头部标题行高
+ --tv-Popeditor-tabs-li-line-height: var(--tv-line-height-number);
// 出框头部标题字体大小
- --ti-popeditor-tabs-font-size: var(--ti-common-font-size-2, 16px);
+ --tv-Popeditor-tabs-font-size: var(--tv-font-size-lg);
// 弹出框头部标题选中文本字重
- --ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold, 600);
- // 弹出框查询条件item底部外边距
- --ti-popeditor-search-item-margin-bottom: var(--ti-common-space-6x, 24px);
- // 弹出框查询条件页脚顶部外边距
- --ti-popeditor-search-footer-margin-top: var(--ti-common-space-0, 0px);
- // 弹出框查询条件页脚底部外边距
- --ti-popeditor-search-footer-margin-bottom: var(--ti-common-space-6x, 24px);
- // 弹出框查询条件页脚水平外边距
- --ti-popeditor-search-footer-margin-horizontal: auto;
- // 弹出编辑头部标签页文本色(hide)
- --ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal, #191919);
- // 弹出表格头部标签页item垂直内边距
- --ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0, 0px);
- // 弹出表格头部标签页item水平内边距
- --ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-0, 0px);
- // 弹出表格头部标签页item右侧外边距
- --ti-popeditor-tabs-li-margin-right: var(--ti-common-space-8x, 32px);
- // 弹出表格(左侧）标签页内容区顶部内边距
- --ti-popeditor-tabs-body-left-padding-top: var(--ti-common-space-0, 0px);
- // 弹出表格(左侧）标签页内容区右侧内边距
- --ti-popeditor-tabs-body-left-padding-right: var(--ti-common-space-4x, 16px);
- // 弹出表格(左侧）标签页内容区底部内边距
- --ti-popeditor-tabs-body-left-padding-bottom: var(--ti-common-space-0, 0px);
- // 弹出表格(左侧）标签页内容区左侧内边距
- --ti-popeditor-tabs-body-left-padding-left: var(--ti-common-space-0, 0px);
- // 弹出表格(右侧）标签页内容区顶部内边距
- --ti-popeditor-tabs-body-right-padding-top: var(--ti-common-space-0, 0px);
- // 弹出表格(右侧）标签页内容区右侧内边距
- --ti-popeditor-tabs-body-right-padding-right: var(--ti-common-space-0, 0px);
- // 弹出表格(右侧）标签页内容区底部内边距
- --ti-popeditor-tabs-body-right-padding-bottom: var(--ti-common-space-0, 0px);
- // 弹出表格(右侧）标签页内容区左侧内边距
- --ti-popeditor-tabs-body-right-padding-left: var(--ti-common-space-4x, 16px);
- // 弹出表格内容顶部内边距
- --ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-4x, 16px);
- // 弹出表格内容水平内边距
- --ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-0, 0px);
- // 弹出表格内容底部内边距
- --ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0, 0px);
- // 弹出表格标签页水平方向内边距
- --ti-popeditor-tabs-header-padding-horizontal: var(--ti-common-space-0, 0px);
- // 弹出表格分页顶部内边距
- --ti-popeditor-pager-padding-top: var(--ti-common-space-3x, 12px);
- // 弹框底部对齐方式
- --ti-popeditor-footer-text-align: right;
- // 弹框底部顶部内边距
- --ti-popeditor-footer-padding-top: var(--ti-common-space-6x, 24px);
+ --tv-Popeditor-tabs-selected-font-weight: var(--tv-font-weight-bold);
+ // 弹出编辑头部标签页文本色
+ --tv-Popeditor-tabs-text-color: var(--tv-color-text);
// 弹出表格搜索项左侧标签文本默认宽度
- --ti-popeditor-search-item-width: 80px;
- // 弹出表格搜索项左侧标签文本对齐方式
- --ti-popeditor-search-item-text-align: left;
- // 弹出表格搜索项左侧标签文本右侧内边距
- --ti-popeditor-search-item-padding-right: var(--ti-common-space-4x, 16px);
- // 弹出表格搜索项左侧标签文本左侧内边距
- --ti-popeditor-search-item-padding-left: var(--ti-common-space-4x, 16px);
- // 弹出表格搜索底部按钮对齐方式
- --ti-popeditor-search-footer-text-align: right;
- // 弹出树搜索框左侧内边距
- --ti-popeditor-tree-input-padding-left: calc(var(--ti-common-space-8x, 32px) - 4px);
- // 弹出树搜索框右侧内边距
- --ti-popeditor-tree-input-padding-right: var(--ti-common-space-2x, 8px);
- // 弹出树搜索框是否显示前置图标
- --ti-popeditor-tree-input-prefix-visibility: visible;
- // 弹出树搜索框是否显示后置图标
- --ti-popeditor-tree-input-sufffix-visibility: hidden;
+ --tv-Popeditor-search-item-width: 80px;
}
From 70ca32b6986de41893cc9e89e68602c607f43e25 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 18 Oct 2024 18:02:59 +0800
Subject: [PATCH 2/2] refactor(theme): [popeditor] refactor popeditor theme
vars
---
examples/sites/demos/pc/app/popeditor/size-composition-api.vue | 2 +-
examples/sites/demos/pc/app/popeditor/size.vue | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
index e8c145b526..18aff0f3a4 100644
--- a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
@@ -10,7 +10,6 @@
text-split="@"
>