Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(theme): [toggle-menu] refactor toggle-menu theme vars #2248

Merged
merged 4 commits into from
Oct 15, 2024
Merged

refactor(theme): [toggle-menu] refactor toggle-menu theme vars #2248

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d808ed9
refactor(theme): [toggle-menu] refactor toggle-menu theme vars
zzcr Oct 12, 2024
786fe84
Merge branch 'dev' into refactor-toggle-menu-theme-vars-1012
zzcr Oct 15, 2024
cf5bf44
Merge branch 'dev' of github.com:opentiny/tiny-vue into refactor-togg…
zzcr Oct 15, 2024
a6e90ff
fix: fix e2e test error
zzcr Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions packages/theme/src/toggle-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{toggle-menu-prefix-cls} {
.component-css-vars-toggle-menu();
.inject-ToggleMenu-vars();

width: var(--ti-toggle-menu-width);
width: var(--tv-ToggleMenu-width);
position: relative;

& &__body {
Expand All @@ -38,8 +38,8 @@
}

& &__name {
color: var(--ti-toggle-menu-name-text-color);
font-size: var(--ti-toggle-menu-font-size);
color: var(--tv-ToggleMenu-name-text-color);
font-size: var(--tv-ToggleMenu-font-size);
}

& &__tree {
Expand All @@ -53,18 +53,18 @@
}

& &__filter-search {
width: var(--ti-toggle-menu-filter-search-size);
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
width: var(--tv-ToggleMenu-filter-search-size);
height: var(--tv-ToggleMenu-filter-search-size);
line-height: var(--tv-ToggleMenu-filter-search-size);
display: block;
text-align: center;
position: absolute;
right: 0;
top: 0;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-filter-search-icon-color);
font-size: var(--ti-toggle-menu-filter-search-font-size);
fill: var(--tv-ToggleMenu-filter-search-icon-color);
font-size: var(--tv-ToggleMenu-filter-search-svg-size);
}
}

Expand All @@ -74,18 +74,18 @@
left: calc(100% - 14px);
z-index: 2;
width: 14px;
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
background: var(--ti-toggle-menu-toggle-bg-color);
height: var(--tv-ToggleMenu-filter-search-size);
line-height: var(--tv-ToggleMenu-filter-search-size);
background: var(--tv-ToggleMenu-toggle-bg-color);
cursor: pointer;
transition: 0.2s linear;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color);
fill: var(--tv-ToggleMenu-toggle-icon-color);
}

&:hover .@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color-hover);
fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
}
}

Expand All @@ -106,7 +106,7 @@
background: none;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color-hover);
fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
}
}
}
Expand All @@ -123,7 +123,7 @@
.@{tree-prefix-cls} {
.is-current:not(.show-checkbox) {
> .@{tree-node-prefix-cls}__content > .@{tree-node-prefix-cls}__content-left {
font-weight: var(--ti-toggle-menu-toggle-font-weight);
font-weight: var(--tv-ToggleMenu-toggle-font-weight);
}
}

Expand All @@ -134,8 +134,8 @@
:not(.show-checkbox) > .@{tree-node-prefix-cls}__content .@{tree-node-prefix-cls}__label,
.@{tree-node-prefix-cls}__content-right {
&:hover {
background-color: var(--ti-toggle-menu-toggle-bg-hover-color);
font-weight: var(--ti-toggle-menu-toggle-font-weight);
background-color: var(--tv-ToggleMenu-toggle-bg-hover-color);
font-weight: var(--tv-ToggleMenu-toggle-font-weight);
}
}

Expand Down Expand Up @@ -176,7 +176,7 @@
}

.@{input-prefix-cls}__inner {
font-size: var(--ti-toggle-menu-font-size);
font-size: var(--tv-ToggleMenu-font-size);
padding-right: 30px;
border-radius: 0;
border-top: 0;
Expand All @@ -185,9 +185,9 @@
}

.@{tree-node-prefix-cls}__content {
height: var(--ti-toggle-menu-tree-node-height);
line-height: var(--ti-toggle-menu-tree-node-height);
font-size: var(--ti-toggle-menu-font-size);
height: var(--tv-ToggleMenu-tree-node-height);
line-height: var(--tv-ToggleMenu-tree-node-height);
font-size: var(--tv-ToggleMenu-font-size);
padding-left: 0;
margin-left: 0;
}
Expand Down
26 changes: 13 additions & 13 deletions packages/theme/src/toggle-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,29 @@
*
*/

.component-css-vars-toggle-menu() {
.inject-ToggleMenu-vars() {
// 收缩菜单宽度
--ti-toggle-menu-width: var(--ti-common-size-50x, 200px);
--tv-ToggleMenu-width: 200px;
// 收缩菜单字号
--ti-toggle-menu-font-size: var(--ti-common-font-size-1, 14px);
--tv-ToggleMenu-font-size: var(--tv-font-size-md);
// 收缩菜单列表文本色
--ti-toggle-menu-name-text-color: var(--ti-common-color-text-primary, #191919);
--tv-ToggleMenu-name-text-color: var(--tv-color-text);
// 收缩菜单列表项高度
--ti-toggle-menu-tree-node-height: var(--ti-common-size-8x, 32px);
--tv-ToggleMenu-tree-node-height: 32px;
// 收缩菜单收缩搜索高度
--ti-toggle-menu-filter-search-size: var(--ti-common-size-7x, 28px);
--tv-ToggleMenu-filter-search-size: 28px;
// 收缩菜单输入框搜索图标尺寸
--ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2, 16px);
--tv-ToggleMenu-filter-search-svg-size: var(--tv-icon-size);
// 收缩菜单搜索图标色
--ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6, #191919);
--tv-ToggleMenu-filter-search-icon-color: var(--tv-color-icon);
// 收缩菜单收缩图标色
--ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6, #191919);
--tv-ToggleMenu-toggle-icon-color: var(--tv-color-icon);
// 收缩菜单收缩图标悬浮色
--ti-toggle-menu-toggle-icon-color-hover: var(--ti-common-color-primary-hover, #595959);
--tv-ToggleMenu-toggle-icon-color-hover: var(--tv-color-icon-hover);
// 收缩菜单收缩按钮背景色
--ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border, #999999);
--tv-ToggleMenu-toggle-bg-color: var(--tv-color-bg-gray-2);
// 收缩菜单选中字重色
--ti-toggle-menu-toggle-font-weight: var(--ti-common-font-weight-6, 600);
--tv-ToggleMenu-toggle-font-weight: var(--tv-font-weight-bold);
// 收缩菜单收缩标签悬浮背景色
--ti-toggle-menu-toggle-bg-hover-color: var(--ti-common-color-hover-background, #f5f5f5);
--tv-ToggleMenu-toggle-bg-hover-color: var(--tv-color-bg-hover);
}
Loading