vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Menubar & MegaMenu hover updates

pull/4239/head
Tuğçe Küçükoğlu 2023-08-03 10:25:08 +03:00
parent 4a025bdfdf
commit 2e42f65061
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/lib/tailwind/Tailwind.js
View File

@ -1832,19 +1832,17 @@ export default {
class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
}
},
menubar: {
root: {
class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
},
menu: ({ props, context }) => ({
menu: ({ props }) => ({
class: [
'm-0 sm:p-0 list-none',
'outline-none',
'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
'flex-col top-full left-0',
'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
{ 'hidden ': !props?.mobileActive, 'flex ': props?.mobileActive }
]
}),
@ -1854,24 +1852,36 @@ export default {
content: ({ props, context }) => ({
class: [
' transition-shadow duration-200',
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80',
'',
{ 'rounded-md': props.root, '': !props.root },
{
'text-gray-700 dark:text-white/80': !context.focused && !context.active,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
},
{
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
}
]
}),
action: ({ props, context }) => ({
class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
action: ({ context }) => ({
class: [
'select-none',
'cursor-pointer flex items-center no-underline overflow-hidden relative',
'py-3 px-5 select-none',
{
'max-[960px]:pl-9': context.level === 1,
'max-[960px]:pl-14': context.level === 2
}
]
}),
icon: {
class: 'mr-2'
},
submenuicon: ({ props, context }) => ({
class: [{ 'ml-2': props.root, 'ml-auto': !props.root }]
class: ['max-[960px]:ml-auto', { 'ml-2': props.root, 'ml-auto': !props.root }]
}),
submenu: ({ props, context }) => ({
class: ['py-1 bg-white dark:bg-gray-900 border-0 sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }]
@ -1901,13 +1911,16 @@ export default {
content: ({ props, context }) => ({
class: [
'transition-shadow duration-200',
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', //Hover
{ 'rounded-md': props.level < 1 && props.horizontal },
{
'text-gray-700 dark:text-white/80': !context.focused && !context.active,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
},
{
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
}
]
}),