Skip to content

Commit bbdf32f

Browse files
lcy0620lcy0620
authored
feat(cascader): [cascader,tree] dark theme adaptation (#3136)
* feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation * feat(cascader): [cascader,transfer,tree] dark theme adaptation
1 parent 24c6120 commit bbdf32f

File tree

14 files changed

+34
-23
lines changed

14 files changed

+34
-23
lines changed

‎examples/sites/demos/pc/app/cascader/filterable-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,6 @@ const options = ref([
209209
<style scoped lang="less">
210210
.no-data {
211211
text-align: center;
212-
line-height: 240px;
212+
line-height: 200px;
213213
}
214214
</style>

‎examples/sites/demos/pc/app/cascader/filterable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,6 @@ export default {
217217
<style scoped lang="less">
218218
.no-data {
219219
text-align: center;
220-
line-height: 240px;
220+
line-height: 200px;
221221
}
222222
</style>

‎examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,6 @@ header {
5555
}
5656
:deep(.red) {
5757
font-weight: bold;
58-
color: red;
58+
color: #d94838;
5959
}
6060
</style>

‎examples/sites/demos/pc/app/transfer/custom-render.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,6 @@ header {
6565
}
6666
:deep(.red) {
6767
font-weight: bold;
68-
color: red;
68+
color: #d94838;
6969
}
7070
</style>

‎examples/sites/demos/pc/app/tree/icons-composition-api.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
:data="data"
66
show-checkbox
77
:expand-icon="expandIcon"
8-
expand-icon-color="#c2c2c2"
8+
expand-icon-color="#5291FF"
99
:shrink-icon="shrinkIcon"
10-
shrink-icon-color="#191919"
10+
shrink-icon-color="#5291FF"
1111
>
1212
<template #prefix="{ node }">
1313
<component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>

‎examples/sites/demos/pc/app/tree/icons.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
:data="data"
66
show-checkbox
77
:expand-icon="expandIcon"
8-
expand-icon-color="#c2c2c2"
8+
expand-icon-color="#5291FF"
99
:shrink-icon="shrinkIcon"
10-
shrink-icon-color="#191919"
10+
shrink-icon-color="#5291FF"
1111
>
1212
<template #prefix="{ node }">
1313
<component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>

‎packages/theme/src/cascader-menu/index.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
}
3434

3535
& &__wrap {
36-
min-height: 204px;
36+
min-height: 208px;
3737
}
3838
// tiny 新增： 直接使用级联面板时，高度要放开，不能被 tiny-scrollbar限制了
3939
& &__wrap-expand {

‎packages/theme/src/cascader-node/index.less

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@
2929
background: var(--tv-CascaderNode-selectable-active-bg-color);
3030
color: var(--tv-CascaderNode-selectable-text-color);
3131
&:hover {
32-
background: var(--tv-CascaderNode-selectable-hover-bg-color);
32+
background: var(--tv-CascaderNode-hover-bg-color);
3333
}
3434
}
3535

3636
&.in-active-path:hover {
37-
background: var(--tv-CascaderNode-selectable-hover-bg-color);
37+
background: var(--tv-CascaderNode-hover-bg-color);
3838
}
3939

4040
&:not(.is-disabled):not(.in-active-path):not(.is-active) {
@@ -62,7 +62,7 @@
6262

6363
&__prefix,
6464
&__postfix {
65-
font-size: var(--tv-CascaderNode-icon-font-size);
65+
font-size: var(--tv-CascaderNode-icon-size);
6666
fill: var(--tv-CascaderNode-icon-color);
6767
}
6868

@@ -73,6 +73,9 @@
7373
}
7474
.@{cascader-node-prefix-cls}__label {
7575
font-weight: var(--tv-CascaderNode-active-font-weight);
76+
svg {
77+
fill: var(--tv-CascaderNode-active-icon-color);
78+
}
7679
}
7780
}
7881

@@ -99,7 +102,10 @@
99102
white-space: nowrap;
100103
overflow: hidden;
101104
text-overflow: ellipsis;
102-
105+
svg {
106+
font-size: var(--tv-CascaderNode-icon-size);
107+
fill: var(--tv-CascaderNode-icon-color);
108+
}
103109
// 兼容ie10-ie11
104110
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
105111
flex-basis: auto;

‎packages/theme/src/cascader-node/vars.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
// 下拉列表子项禁用状态时的背景色
2727
--tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
2828
// 下拉列表子项的icon图标的字体大小
29-
--tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
29+
--tv-CascaderNode-icon-size: var(--tv-font-size-sm, 12px);
3030
// 下拉列表子项的icon图标的色
3131
--tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
3232
// 下拉列表子项禁用时的icon图标的色

‎packages/theme/src/cascader/index.less

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,10 @@
114114
.@{cascader-prefix-cls}-panel {
115115
justify-content: flex-start;
116116
align-items: flex-start;
117+
border: solid 1px var(--tv-Cascader-border-color);
117118
}
118-
.@{cascader-prefix-cls}-menu {
119-
border: 1px solid #e4e7ed;
120-
background:var(--tv-Cascader-dropdown-bg-color);
121-
&:not(:first-child) {
122-
margin-left: -1px;
123-
}
119+
.@{cascader-prefix-cls}-menu {
120+
background:var(--tv-Cascader-dropdown-bg-color);
124121
.@{cascader-prefix-cls}-menu__wrap {
125122
height: auto;
126123
padding-bottom: 6px;

‎packages/theme/src/cascader/vars.less

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
--tv-Cascader-font-size: var(--tv-font-size-default, 14px);
1616
// 输入框图标字体大小
1717
--tv-Cascader-input-icon-font-size: 10px; // 无对应变量
18+
// 下拉菜单边框色
19+
--tv-Cascader-border-color: var(--tv-color-border-divider);
1820
// 悬浮时显示的边框色
1921
--tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
2022
// 聚焦时显示的边框色
@@ -54,7 +56,7 @@
5456
// 下拉列表子项悬浮时的背景色（没有生效）
5557
--tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
5658
// 搜索后下拉列表无匹配数据的文本色
57-
--tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
59+
--tv-Cascader-empty-text-color: var(--tv-color-text-secondary);
5860
// 搜索框的文本色（没有生效）
5961
--tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
6062
// 搜索框的占位符的文本色（没有生效）

‎packages/theme/src/transfer/index.less

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,9 @@
153153
text-align: left;
154154
padding-right: var(--tv-Transfer-panel-body-padding-right);
155155
padding-left: var(--tv-Transfer-panel-body-padding-left);
156-
156+
.tiny-table.simple table tbody tr:has(td svg.is-check) {
157+
background-color: var(--tv-Transfer-panel-item-active-bg-color);
158+
}
157159
&.is-with-footer {
158160
padding-bottom: var(--tv-Transfer-panel-body-footer-padding-bottom);
159161
height: var(--tv-Transfer-panel-body-footer-height);

‎packages/theme/src/transfer/vars.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@
8383
--tv-Transfer-panel-item-hover-text-color: var(--tv-color-text, #191919);
8484
// 面板悬浮时背景色
8585
--tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5);
86+
// 面板选中时背景色
87+
--tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light);
8688
// 面板搜索框高度
8789
--tv-Transfer-panel-filter-height: 32px;
8890
// 面板搜索框字体大小

‎packages/theme/src/tree/index.less

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,8 +360,10 @@
360360
overflow: hidden;
361361
padding-left: var(--tv-Tree-node-padding-left);
362362

363-
svg {
363+
& > svg {
364364
fill: var(--tv-Tree-node-operate-icon-color);
365+
font-size: var(--tv-Tree-node-operate-icon-font-size);
366+
margin-right: calc(var(--tv-Tree-node-label-margin-left) / 2);
365367
&:hover {
366368
fill: var(--tv-Tree-node-checked-icon-color);
367369
}

0 commit comments

Comments
 (0)