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

Menu cosmetics and demo update

pull/4789/head
Cagatay Civici 2023-11-09 18:21:13 +03:00
parent 6a89e7c17a
commit f02240cbfc
5 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/datatable/ContextMenuDoc.vue
View File

@ -5,7 +5,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem"> <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
@ -34,7 +34,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
@row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem"> @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -49,8 +49,8 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div> <div class="card">
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
@rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem"> @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -105,8 +105,8 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div> <div class="card">
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
@rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem"> @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>

20
public/themes/lara-light-blue/theme.css
View File

@ -4176,7 +4176,7 @@
} }
.p-contextmenu { .p-contextmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 0 none; border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none; outline: 0 none;
} }
.p-contextmenu .p-submenu-list { .p-contextmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-megamenu .p-submenu-list { .p-megamenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
width: 12.5rem; width: 12.5rem;
} }
.p-megamenu .p-submenu-list .p-menuitem-separator { .p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
} }
.p-megamenu.p-megamenu-vertical { .p-megamenu.p-megamenu-vertical {
width: 12.5rem; width: 12.5rem;
padding: 0.25rem 0; padding: 0.5rem 0;
} }
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563; color: #4b5563;
@ -4450,7 +4450,7 @@
} }
.p-menu { .p-menu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280; color: #6b7280;
} }
.p-menubar .p-submenu-list { .p-menubar .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list { .p-menubar .p-menubar-root-list {
position: absolute; position: absolute;
display: none; display: none;
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151; color: #374151;
} }
.p-panelmenu .p-panelmenu-content { .p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0; padding: 0.5rem 0;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
@ -4936,7 +4936,7 @@
} }
.p-tieredmenu { .p-tieredmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none; outline: 0 none;
} }
.p-tieredmenu .p-submenu-list { .p-tieredmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

20
public/themes/lara-light-indigo/theme.css
View File

@ -4176,7 +4176,7 @@
} }
.p-contextmenu { .p-contextmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 0 none; border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none; outline: 0 none;
} }
.p-contextmenu .p-submenu-list { .p-contextmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-megamenu .p-submenu-list { .p-megamenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
width: 12.5rem; width: 12.5rem;
} }
.p-megamenu .p-submenu-list .p-menuitem-separator { .p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
} }
.p-megamenu.p-megamenu-vertical { .p-megamenu.p-megamenu-vertical {
width: 12.5rem; width: 12.5rem;
padding: 0.25rem 0; padding: 0.5rem 0;
} }
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563; color: #4b5563;
@ -4450,7 +4450,7 @@
} }
.p-menu { .p-menu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280; color: #6b7280;
} }
.p-menubar .p-submenu-list { .p-menubar .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list { .p-menubar .p-menubar-root-list {
position: absolute; position: absolute;
display: none; display: none;
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151; color: #374151;
} }
.p-panelmenu .p-panelmenu-content { .p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0; padding: 0.5rem 0;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
@ -4936,7 +4936,7 @@
} }
.p-tieredmenu { .p-tieredmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none; outline: 0 none;
} }
.p-tieredmenu .p-submenu-list { .p-tieredmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

20
public/themes/lara-light-purple/theme.css
View File

@ -4176,7 +4176,7 @@
} }
.p-contextmenu { .p-contextmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 0 none; border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none; outline: 0 none;
} }
.p-contextmenu .p-submenu-list { .p-contextmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-megamenu .p-submenu-list { .p-megamenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
width: 12.5rem; width: 12.5rem;
} }
.p-megamenu .p-submenu-list .p-menuitem-separator { .p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
} }
.p-megamenu.p-megamenu-vertical { .p-megamenu.p-megamenu-vertical {
width: 12.5rem; width: 12.5rem;
padding: 0.25rem 0; padding: 0.5rem 0;
} }
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563; color: #4b5563;
@ -4450,7 +4450,7 @@
} }
.p-menu { .p-menu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280; color: #6b7280;
} }
.p-menubar .p-submenu-list { .p-menubar .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list { .p-menubar .p-menubar-root-list {
position: absolute; position: absolute;
display: none; display: none;
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151; color: #374151;
} }
.p-panelmenu .p-panelmenu-content { .p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0; padding: 0.5rem 0;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
@ -4936,7 +4936,7 @@
} }
.p-tieredmenu { .p-tieredmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none; outline: 0 none;
} }
.p-tieredmenu .p-submenu-list { .p-tieredmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

20
public/themes/lara-light-teal/theme.css
View File

@ -4176,7 +4176,7 @@
} }
.p-contextmenu { .p-contextmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 0 none; border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none; outline: 0 none;
} }
.p-contextmenu .p-submenu-list { .p-contextmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-megamenu .p-submenu-list { .p-megamenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
width: 12.5rem; width: 12.5rem;
} }
.p-megamenu .p-submenu-list .p-menuitem-separator { .p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
} }
.p-megamenu.p-megamenu-vertical { .p-megamenu.p-megamenu-vertical {
width: 12.5rem; width: 12.5rem;
padding: 0.25rem 0; padding: 0.5rem 0;
} }
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563; color: #4b5563;
@ -4450,7 +4450,7 @@
} }
.p-menu { .p-menu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280; color: #6b7280;
} }
.p-menubar .p-submenu-list { .p-menubar .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list { .p-menubar .p-menubar-root-list {
position: absolute; position: absolute;
display: none; display: none;
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151; color: #374151;
} }
.p-panelmenu .p-panelmenu-content { .p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0; padding: 0.5rem 0;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
@ -4936,7 +4936,7 @@
} }
.p-tieredmenu { .p-tieredmenu {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
color: #4b5563; color: #4b5563;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none; outline: 0 none;
} }
.p-tieredmenu .p-submenu-list { .p-tieredmenu .p-submenu-list {
padding: 0.25rem 0; padding: 0.5rem 0;
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);