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

feat(nav-menu): [nav-menu] updata nav-menu xdesign (#1849) 

* feat(nav-menu): [nav-menu] updata nav-menu xdesign

* feat(nav-menu): [nav-menu] updata nav-menu xdesign

* feat(nav-menu): [nav-menu] updata nav-menu xdesign
This commit is contained in:
wuyiping0628 2024-08-06 19:02:04 -07:00 committed by GitHub
parent 18a5a8238c
commit 5fa3ec93aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 83 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/sites/demos/pc/app/nav-menu/slot-logo-composition-api.vue
View File

@ -313,9 +313,4 @@ const TinyIconTotal = iconTotal()
.preview {
min-height: 450px;
}
.preview .icon-logo {
fill: white;
font-size: 24px;
}
</style>

5
examples/sites/demos/pc/app/nav-menu/slot-logo.vue
View File

@ -320,9 +320,4 @@ export default {
.preview {
min-height: 450px;
}
.preview .icon-logo {
fill: white;
font-size: 24px;
}
</style>

41
packages/theme/src/nav-menu/index.less
View File

@ -22,15 +22,20 @@
background: var(--ti-nav-menu-bg-color);
height: var(--ti-nav-menu-height);
position: relative;
padding: 0 24px;
padding: 0 var(--ti-nav-menu-padding);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.10);
> .slot-logo {
float: left;
overflow: hidden;
margin: 0 100px 0 0;
margin: 0 var(--ti-nav-menu-slot-logo-margin-right) 0 var(--ti-nav-menu-slot-logo-margin-left);
line-height: var(--ti-nav-menu-height);
}
.preview .slot-logo .icon-logo {
fill: red;
}
> .slot-toolbar {
float: right;
@ -87,7 +92,7 @@
> span,
> a {
padding: 0 12px;
margin: 0 var(--ti-nav-menu-item-li-margin);
font-size: var(--ti-nav-menu-item-font-size);
text-align: center;
color: var(--ti-nav-menu-item-text-color);
@ -103,14 +108,16 @@
color: var(--ti-nav-menu-item-text-color);
background: var(--ti-nav-menu-item-hover-bg-color);
text-decoration: none;
font-weight: var(--ti-nav-menu-item-text-font-weight);
}
&.selected {
position: relative;
font-weight: var(--ti-nav-menu-item-text-font-weight);
&:after {
content: ' ';
width: var(--ti-nav-menu-item-selected-underline-width);
width: 100%;
height: var(--ti-nav-menu-item-selected-underline-height);
background: var(--ti-nav-menu-item-selected-underline-bg-color);
border: 1px solid var(--ti-nav-menu-item-selected-underline-bg-color);
@ -188,14 +195,17 @@
justify-content: space-between;
align-items: center;
color: var(--ti-nav-menu-popmenu-more-item-text-color);
cursor: pointer;
.more-icon {
fill: var(--ti-nav-menu-popmenu-more-item-icon-color);
}
&.active,
&:hover {
color: var(--ti-nav-menu-popmenu-more-item-hover-text-color);
background: var(--ti-nav-menu-popmenu-more-item-hover-bg-color);
font-weight: 700;
> a {
color: var(--ti-nav-menu-popmenu-more-item-hover-text-color);
@ -268,7 +278,7 @@
list-style: none;
&:first-child {
margin-top: 18px;
margin-top: var(--ti-nav-menu-submenu-group-margin-top);
}
> .@{nav-menu-prefix-cls}__sub-menu-title {
@ -303,7 +313,7 @@
.sub-item {
font-size: var(--ti-nav-menu-popmenu-node-item-font-size);
padding: 4px 0;
padding: var(--ti-nav-menu-popmenu-node-item-padding-top) 0 var(--ti-nav-menu-popmenu-node-item-padding-button);
&.third-title {
> a,
@ -332,12 +342,27 @@
white-space: normal;
word-break: break-all;
text-decoration: none;
font-size: var(--ti-nav-menu-popmenu-text-font-size);
cursor: pointer;
&.selected {
color: var(--ti-nav-menu-popmenu-selected-text-color);
font-weight: var(--ti-nav-menu-popmenu-selected-font-weight);
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--ti-nav-menu-item-selected-underline-bg-color);
z-index: 1;
}
}
}
&.only-secondary-title {
> span,
> a {
@ -396,11 +421,11 @@
> .more-button {
float: left;
text-align: center;
padding: 0 12px;
margin: 0 var(--ti-nav-menu-item-li-margin);
height: var(--ti-nav-menu-height);
line-height: var(--ti-nav-menu-height);
overflow: hidden;
fill: #fff;
fill: var(--ti-nav-menu-item-more-button-fill);
font-size: var(--ti-nav-menu-item-font-size);
&:hover {

29
packages/theme/src/nav-menu/smb-theme.js
View File

@ -1,3 +1,30 @@
export const tinyNavMenuSmbTheme = {
'ti-nav-menu-bg-color': '#282b33'
'ti-nav-menu-bg-color': 'var(--ti-common-color-bg-navigation)',
'ti-nav-menu-item-text-color': 'var(--ti-common-color-text-primary)',
'ti-nav-menu-item-more-button-fill': 'var(--ti-common-color-text-primary)',
'ti-nav-menu-popmenu-more-item-icon-color': 'var(--ti-common-color-icon-normal)',
'ti-nav-menu-popmenu-more-item-hover-text-color': 'var(--ti-common-color-primary-normal)',
'ti-nav-menu-popmenu-text-color': 'var(--ti-common-color-text-secondary)',
'ti-nav-menu-item-hover-bg-color': 'var(--ti-common-color-bg-navigation)',
'ti-nav-menu-item-text-font-weight': 'var(--ti-common-font-weight-bold)',
'ti-nav-menu-popmenu-selected-font-weight': 'var(--ti-common-font-weight-bold)',
'ti-nav-menu-item-selected-underline-height': 'var(--ti-common-border-weight-1)',
'ti-nav-menu-item-selected-underline-bg-color': 'var(--ti-common-color-text-primary)',
'ti-nav-menu-submenu-group-margin-top': 'var(--ti-common-size-9x)',
'ti-nav-menu-padding': 'var(--ti-common-size-4x)',
'ti-nav-menu-item-li-margin': 'var(--ti-common-size-4x)',
'ti-nav-menu-slot-logo-margin-left': 'var(--ti-common-size-4x)',
'ti-nav-menu-slot-logo-margin-right': 'var(--ti-common-size-12x)',
'ti-nav-menu-popmenu-node-item-padding-top': 'var(--ti-common-space-0)',
'ti-nav-menu-popmenu-node-item-padding-button': 'calc(var(--ti-common-space-3x) + 2px)',
'ti-nav-menu-submenu-padding-horizontal': 'calc(var(--ti-common-space-base) * 20.5)',
'ti-nav-menu-popmenu-node-title-margin-bottom': 'calc(var(--ti-common-space-4x) + 2px)',
'ti-nav-menu-popmenu-text-font-size': 'var(--ti-common-font-size-0)',
// SMB未定义颜色
'ti-nav-menu-popmenu-more-item-hover-bg-color': '#F5F5F5',
'ti-nav-menu-popmenu-more-item-active-bg-color': 'var(--ti-common-color-bg-navigation)',
'ti-nav-menu-popmenu-more-item-selected-bg-color': 'var(--ti-common-color-bg-navigation)',
'ti-nav-menu-popmenu-border-color': 'var(--ti-common-color-bg-navigation)',
'ti-nav-menu-popmenu-box-shadow': 'var(--ti-common-shadow-2-down)',
'ti-nav-menu-item-font-size': 'var(--ti-common-font-size-base)'
}

26
packages/theme/src/nav-menu/vars.less
View File

@ -17,18 +17,28 @@
--ti-nav-menu-bg-color: var(--ti-common-color-bg-navigation, #282b33);
// 导航菜单栏字号
--ti-nav-menu-item-font-size: var(--ti-common-font-size-2, 16px);
// 单个导航菜单外边距
--ti-nav-menu-item-li-margin: var(--ti-common-size-3x, 12px);
// 自定义图标外左边距
--ti-nav-menu-slot-logo-margin-left: var(--ti-common-space-0, 0);
// 自定义图标外右边距
--ti-nav-menu-slot-logo-margin-right: var(--ti-common-size-25x, 100px);
// 导航菜单栏内边距
--ti-nav-menu-padding: var(--ti-common-size-6x, 24px);
// 导航菜单栏文本色
--ti-nav-menu-item-text-color: var(--ti-common-color-light, #fff);
// 导航菜单栏更多图标
--ti-nav-menu-item-more-button-fill: var(--ti-common-color-light, #fff);
// 导航菜单栏选中后字体大小
--ti-nav-menu-item-text-font-weight: var(--ti-common-font-weight-4, normal);
// 导航菜单栏项悬浮背景色
--ti-nav-menu-item-hover-bg-color: #474c5e;
// 导航菜单栏项选中下划线宽度
--ti-nav-menu-item-selected-underline-width: var(--ti-common-size-14x, 56px);
// 导航菜单栏项选中下划线高度
--ti-nav-menu-item-selected-underline-height: calc(var(--ti-common-size-base, 4px) - 1);
// 导航菜单栏项选中下划线圆角
--ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0, 0px);
--ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0, 0);
// 导航菜单栏项选中下划线固定定位底部距离(hide)
--ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0, 0px);
--ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0, 0);
// 导航菜单栏项选中下划线背景色
--ti-nav-menu-item-selected-underline-bg-color: var(--ti-common-color-light, #fff);
// 导航菜单设置图标大小
@ -83,6 +93,14 @@
--ti-nav-menu-popmenu-title-border-color-bottom: transparent;
// 导航菜单下拉框标题字号
--ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1, 14px);
// 导航菜单下拉框标题字号
--ti-nav-menu-popmenu-text-font-size: var(--ti-common-font-size-1, 14px);
// 导航菜单下拉框非标题项字号
--ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base, 12px);
// 导航菜单下拉框外边距
--ti-nav-menu-submenu-group-margin-top: var(--ti-common-space-4x, 18px);
// 导航菜单下拉框外上边距
--ti-nav-menu-popmenu-node-item-padding-top: var(--ti-common-space-base, 4px);
// 导航菜单下拉框外下边距
--ti-nav-menu-popmenu-node-item-padding-button: var(--ti-common-space-base, 4px);
}