mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-13 13:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): item-height theme variable

Browse Source
This commit is contained in:
07akioni 2021-10-06 13:16:56 +08:00
parent 3ea326e7a2
commit 56fb18e9d1
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/menu/src/Menu.tsx
View File

@ -292,12 +292,14 @@ export default defineComponent({
common: { cubicBezierEaseInOut }, common: { cubicBezierEaseInOut },
self self
} = themeRef.value } = themeRef.value
const { borderRadius, borderColorHorizontal, fontSize } = self const { borderRadius, borderColorHorizontal, fontSize, itemHeight } =
self
const vars: any = { const vars: any = {
'--bezier': cubicBezierEaseInOut, '--bezier': cubicBezierEaseInOut,
'--font-size': fontSize, '--font-size': fontSize,
'--border-color-horizontal': borderColorHorizontal, '--border-color-horizontal': borderColorHorizontal,
'--border-radius': borderRadius '--border-radius': borderRadius,
'--item-height': itemHeight
} }
if (inverted) { if (inverted) {
vars['--group-text-color'] = self.groupTextColorInverted vars['--group-text-color'] = self.groupTextColorInverted

19
src/menu/src/styles/index.cssr.ts
View File

@ -24,6 +24,7 @@ import fadeInHeightExpandTransition from '../../../_styles/transitions/fade-in-h
// --item-icon-color-active // --item-icon-color-active
// --item-icon-color-collapsed // --item-icon-color-collapsed
// --item-icon-color-child-active // --item-icon-color-child-active
// --item-height
export default c([ export default c([
cB('menu', ` cB('menu', `
background-color: var(--color); background-color: var(--color);
@ -91,12 +92,12 @@ export default c([
}) })
]) ])
]), ]),
cB('menu-item', { cB('menu-item', `
transition: 'background-color .3s var(--bezier)', transition: background-color .3s var(--bezier);
height: '42px', height: var(--item-height);
marginTop: '6px', margin-top: 6px;
position: 'relative' position: relative;
}, [ `, [
c('&::before', ` c('&::before', `
z-index: auto; z-index: auto;
content: ""; content: "";
@ -253,9 +254,9 @@ export default c([
position: 'relative', position: 'relative',
marginTop: '6px' marginTop: '6px'
}, [ }, [
cB('menu-item-content', { cB('menu-item-content', `
height: '42px' height: var(--item-height);
}), `),
cB('submenu-children', { cB('submenu-children', {
overflow: 'hidden', overflow: 'hidden',
padding: 0 padding: 0

1
src/menu/styles/light.ts
View File

@ -52,6 +52,7 @@ export const self = (vars: ThemeCommonVars) => {
itemIconColorActive: primaryColor, itemIconColorActive: primaryColor,
itemIconColorChildActive: primaryColor, itemIconColorChildActive: primaryColor,
itemIconColorCollapsed: textColor1, itemIconColorCollapsed: textColor1,
itemHeight: '42px',
arrowColor: primaryColor, arrowColor: primaryColor,
arrowColorHover: primaryColorHover, arrowColorHover: primaryColorHover,
arrowColorChildActive: primaryColor, arrowColorChildActive: primaryColor,