opentiny
/
tiny-vue
2
0
Fork 30
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

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
This commit is contained in:
lcy0620 2025-03-19 10:48:54 +08:00 committed by GitHub
parent 24c61207ff
commit bbdf32fbbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
View File

@ -209,6 +209,6 @@ const options = ref([
<style scoped lang="less">
.no-data {
text-align: center;
line-height: 240px;
line-height: 200px;
}
</style>

2
examples/sites/demos/pc/app/cascader/filterable.vue
View File

@ -217,6 +217,6 @@ export default {
<style scoped lang="less">
.no-data {
text-align: center;
line-height: 240px;
line-height: 200px;
}
</style>

2
examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
View File

@ -55,6 +55,6 @@ header {
}
:deep(.red) {
font-weight: bold;
color: red;
color: #d94838;
}
</style>

2
examples/sites/demos/pc/app/transfer/custom-render.vue
View File

@ -65,6 +65,6 @@ header {
}
:deep(.red) {
font-weight: bold;
color: red;
color: #d94838;
}
</style>

4
examples/sites/demos/pc/app/tree/icons-composition-api.vue
View File

@ -5,9 +5,9 @@
:data="data"
show-checkbox
:expand-icon="expandIcon"
expand-icon-color="#c2c2c2"
expand-icon-color="#5291FF"
:shrink-icon="shrinkIcon"
shrink-icon-color="#191919"
shrink-icon-color="#5291FF"
>
<template #prefix="{ node }">
<component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>

4
examples/sites/demos/pc/app/tree/icons.vue
View File

@ -5,9 +5,9 @@
:data="data"
show-checkbox
:expand-icon="expandIcon"
expand-icon-color="#c2c2c2"
expand-icon-color="#5291FF"
:shrink-icon="shrinkIcon"
shrink-icon-color="#191919"
shrink-icon-color="#5291FF"
>
<template #prefix="{ node }">
<component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>

2
packages/theme/src/cascader-menu/index.less
View File

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

14
packages/theme/src/cascader-node/index.less
View File

@ -29,12 +29,12 @@
background: var(--tv-CascaderNode-selectable-active-bg-color);
color: var(--tv-CascaderNode-selectable-text-color);
&:hover {
background: var(--tv-CascaderNode-selectable-hover-bg-color);
background: var(--tv-CascaderNode-hover-bg-color);
}
}
&.in-active-path:hover {
background: var(--tv-CascaderNode-selectable-hover-bg-color);
background: var(--tv-CascaderNode-hover-bg-color);
}
&:not(.is-disabled):not(.in-active-path):not(.is-active) {
@ -62,7 +62,7 @@
&__prefix,
&__postfix {
font-size: var(--tv-CascaderNode-icon-font-size);
font-size: var(--tv-CascaderNode-icon-size);
fill: var(--tv-CascaderNode-icon-color);
}
@ -73,6 +73,9 @@
}
.@{cascader-node-prefix-cls}__label {
font-weight: var(--tv-CascaderNode-active-font-weight);
svg {
fill: var(--tv-CascaderNode-active-icon-color);
}
}
}
@ -99,7 +102,10 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
svg {
font-size: var(--tv-CascaderNode-icon-size);
fill: var(--tv-CascaderNode-icon-color);
}
// 兼容ie10-ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
flex-basis: auto;

2
packages/theme/src/cascader-node/vars.less
View File

@ -26,7 +26,7 @@
// 下拉列表子项禁用状态时的背景色
--tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
// 下拉列表子项的icon图标的字体大小
--tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
--tv-CascaderNode-icon-size: var(--tv-font-size-sm, 12px);
// 下拉列表子项的icon图标的色
--tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
// 下拉列表子项禁用时的icon图标的色

9
packages/theme/src/cascader/index.less
View File

@ -114,13 +114,10 @@
.@{cascader-prefix-cls}-panel {
justify-content: flex-start;
align-items: flex-start;
border: solid 1px var(--tv-Cascader-border-color);
}
.@{cascader-prefix-cls}-menu {
border: 1px solid #e4e7ed;
background:var(--tv-Cascader-dropdown-bg-color);
&:not(:first-child) {
margin-left: -1px;
}
.@{cascader-prefix-cls}-menu {
background:var(--tv-Cascader-dropdown-bg-color);
.@{cascader-prefix-cls}-menu__wrap {
height: auto;
padding-bottom: 6px;

4
packages/theme/src/cascader/vars.less
View File

@ -15,6 +15,8 @@
--tv-Cascader-font-size: var(--tv-font-size-default, 14px);
// 输入框图标字体大小
--tv-Cascader-input-icon-font-size: 10px; // 无对应变量
// 下拉菜单边框色
--tv-Cascader-border-color: var(--tv-color-border-divider);
// 悬浮时显示的边框色
--tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
// 聚焦时显示的边框色
@ -54,7 +56,7 @@
// 下拉列表子项悬浮时的背景色（没有生效）
--tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
// 搜索后下拉列表无匹配数据的文本色
--tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
--tv-Cascader-empty-text-color: var(--tv-color-text-secondary);
// 搜索框的文本色（没有生效）
--tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
// 搜索框的占位符的文本色（没有生效）

4
packages/theme/src/transfer/index.less
View File

@ -153,7 +153,9 @@
text-align: left;
padding-right: var(--tv-Transfer-panel-body-padding-right);
padding-left: var(--tv-Transfer-panel-body-padding-left);
.tiny-table.simple table tbody tr:has(td svg.is-check) {
background-color: var(--tv-Transfer-panel-item-active-bg-color);
}
&.is-with-footer {
padding-bottom: var(--tv-Transfer-panel-body-footer-padding-bottom);
height: var(--tv-Transfer-panel-body-footer-height);

2
packages/theme/src/transfer/vars.less
View File

@ -83,6 +83,8 @@
--tv-Transfer-panel-item-hover-text-color: var(--tv-color-text, #191919);
// 面板悬浮时背景色
--tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5);
// 面板选中时背景色
--tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light);
// 面板搜索框高度
--tv-Transfer-panel-filter-height: 32px;
// 面板搜索框字体大小

4
packages/theme/src/tree/index.less
View File

@ -360,8 +360,10 @@
overflow: hidden;
padding-left: var(--tv-Tree-node-padding-left);
svg {
& > svg {
fill: var(--tv-Tree-node-operate-icon-color);
font-size: var(--tv-Tree-node-operate-icon-font-size);
margin-right: calc(var(--tv-Tree-node-label-margin-left) / 2);
&:hover {
fill: var(--tv-Tree-node-checked-icon-color);
}