Skip to content

Commit

Permalink
fix(pro:layout): style error when theme style not injected (#1769)
Browse files Browse the repository at this point in the history
  • Loading branch information
sallerli1 committed Dec 11, 2023
1 parent 65a1aca commit f7bbf20
Show file tree
Hide file tree
Showing 10 changed files with 212 additions and 198 deletions.
66 changes: 0 additions & 66 deletions packages/components/menu/style/dark.less

This file was deleted.

42 changes: 40 additions & 2 deletions packages/components/menu/style/index.less
Expand Up @@ -7,8 +7,7 @@
@import './mode.less';
@import './collapsed.less';
@import './level.less';
@import './light.less';
@import './dark.less';
@import './mixins.less';

.@{menu-prefix} {
box-sizing: border-box;
Expand Down Expand Up @@ -86,3 +85,42 @@
}
}
}

.menuThemeStyle({
itemColor: var(--ix-menu-item-color);
itemColorHover: var(--ix-menu-item-color-hover);
itemColorActive: var(--ix-menu-item-color-active);
itemColorDisabled: var(--ix-menu-item-color-disabled);
itemGroupColor: var(--ix-menu-item-group-color);

itemBg: var(--ix-menu-item-bg);
itemBgHover: var(--ix-menu-item-bg-hover);
itemBgActive: var(--ix-menu-item-bg-active);
itemBgDisabled: var(--ix-menu-item-bg-disabled);
itemGroupBg: var(--ix-menu-item-group-bg);

horizontalItemColorHover: var(--ix-menu-horizontal-item-color-hover);
horizontalItemColorActive: var(--ix-menu-horizontal-item-color-active);
horizontalItemBgHover: var(--ix-menu-horizontal-item-bg-hover);
horizontalItemBgActive: var(--ix-menu-horizontal-item-bg-active);
});

.darkMenuThemeStyle({
darkItemColor: var(--ix-menu-dark-item-color);
darkItemColorHover: var(--ix-menu-dark-item-color-hover);
darkItemColorActive: var(--ix-menu-dark-item-color-active);
darkItemColorDisabled: var(--ix-menu-dark-item-color-disabled);
darkItemGroupColor: var(--ix-menu-dark-item-group-color);
darkItemFontWeightActive: var(--ix-menu-dark-item-font-weight-active);

darkItemBg: var(--ix-menu-dark-item-bg);
darkItemBgHover: var(--ix-menu-dark-item-bg-hover);
darkItemBgActive: var(--ix-menu-dark-item-bg-active);
darkItemBgDisabled: var(--ix-menu-dark-item-bg-disabled);
darkItemGroupBg: var(--ix-menu-dark-item-group-bg);

darkHorizontalItemColorHover: var(--ix-menu-dark-horizontal-item-color-hover);
darkHorizontalItemColorActive: var(--ix-menu-dark-horizontal-item-color-active);
darkHorizontalItemBgHover: var(--ix-menu-dark-horizontal-item-bg-hover);
darkHorizontalItemBgActive: var(--ix-menu-dark-horizontal-item-bg-active);
});
59 changes: 0 additions & 59 deletions packages/components/menu/style/light.less

This file was deleted.

130 changes: 130 additions & 0 deletions packages/components/menu/style/mixins.less
@@ -0,0 +1,130 @@
.menuThemeStyle(@tokens) {
.@{menu-prefix} {
color: @tokens[itemColor];
background: @tokens[itemBg];

&-item-group-label {
color: @tokens[itemGroupColor];
background: @tokens[itemGroupBg];
}

&-item:hover,
&-sub-label:hover {
color: @tokens[itemColorHover];
}

&-item:hover,
&-sub-label:hover,
&:not(&-inline) &-sub-expanded > &-sub-label {
background: @tokens[itemBgHover];
}

&-item.@{menu-prefix}-item-selected,
&-vertical.@{menu-prefix}-collapsed &-sub-selected > &-sub-label {
background: @tokens[itemBgActive];
}

&-item.@{menu-prefix}-item-selected,
&-sub-selected > &-sub-label {
color: @tokens[itemColorActive];
}

& &-item.@{menu-prefix}-item-disabled,
& &-sub.@{menu-prefix}-sub-disabled > &-sub-label {
color: @tokens[itemColorDisabled];
background: @tokens[itemBgDisabled];
}

&-horizontal {
.@{menu-prefix}-item:hover,
.@{menu-prefix}-sub-label:hover {
color: @tokens[horizontalItemColorHover];
background: @tokens[horizontalItemBgHover];
border-bottom-color: @tokens[itemColorActive];
}

.@{menu-prefix}-item.@{menu-prefix}-item-selected,
.@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
.@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
color: @tokens[horizontalItemColorActive];
background: @tokens[horizontalItemBgActive];
border-bottom-color: @tokens[itemColorActive];
}

.@{menu-prefix}-item.@{menu-prefix}-item-disabled,
.@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
background: @tokens[itemBgDisabled];
border-bottom-color: transparent;
}
}
}
}

.darkMenuThemeStyle(@tokens) {
.@{menu-prefix} {
&-dark {
color: @tokens[darkItemColor];
background: @tokens[darkItemBg];

.@{menu-prefix}-item-group-label {
color: @tokens[darkItemGroupColor];
background: @tokens[darkItemGroupBg];
}

.@{menu-prefix}-item:hover,
.@{menu-prefix}-sub-label:hover {
color: @tokens[darkItemColorHover];
}

.@{menu-prefix}-item:hover,
.@{menu-prefix}-sub-label:hover,
&:not(.@{menu-prefix}-inline) .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
background: @tokens[darkItemBgHover];
}

.@{menu-prefix}-item.@{menu-prefix}-item-selected,
&.@{menu-prefix}-vertical.@{menu-prefix}-collapsed .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
background: @tokens[darkItemBgActive];
}

.@{menu-prefix}-item.@{menu-prefix}-item-selected,
.@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
color: @tokens[darkItemColorActive];
font-weight: @tokens[darkItemFontWeightActive];
}

& .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
& .@{menu-prefix}-sub.@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
color: @tokens[darkItemColorDisabled];
background: @tokens[darkItemBgDisabled];
}
}

&-dark.@{menu-prefix}-horizontal {
.@{menu-prefix}-item:hover,
.@{menu-prefix}-sub-label:hover {
color: @tokens[darkHorizontalItemColorHover];
background: @tokens[darkHorizontalItemBgHover];
}

.@{menu-prefix}-item.@{menu-prefix}-item-selected,
.@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
.@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
color: @tokens[darkHorizontalItemColorActive];
background: @tokens[darkHorizontalItemBgActive];
}

.@{menu-prefix}-item.@{menu-prefix}-item-disabled,
.@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
background-color: @tokens[darkItemBgDisabled];
border-bottom-color: transparent;
}
}

&-dark.@{menu-prefix}-inline,
&-dark.@{menu-prefix}-vertical,
&-dark.@{menu-prefix}-horizontal {
box-shadow: none;
}
}
}
3 changes: 1 addition & 2 deletions packages/pro/layout/src/contents/Header.tsx
Expand Up @@ -14,7 +14,6 @@ import { IxLayoutHeader } from '@idux/components/layout'
import { IxMenu, type MenuClickOptions, type MenuProps } from '@idux/components/menu'

import Logo from './Logo'
import MenuThemeProvider from './MenuThemeProvider'
import { proLayoutToken } from '../token'
import { getDefaultPaths } from '../utils/menu'

Expand Down Expand Up @@ -75,7 +74,7 @@ export default defineComponent({
return (
<IxLayoutHeader class={classes.value}>
{<Logo v-slots={slots} />}
<MenuThemeProvider class={`${prefixCls}-content`}>{contentNode}</MenuThemeProvider>
<div class={`${prefixCls}-content`}>{contentNode}</div>
{slots.headerExtra && <div class={`${prefixCls}-extra`}>{slots.headerExtra()}</div>}
</IxLayoutHeader>
)
Expand Down
67 changes: 0 additions & 67 deletions packages/pro/layout/src/contents/MenuThemeProvider.tsx

This file was deleted.

0 comments on commit f7bbf20

Please sign in to comment.