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

Initiated menu migration

pull/5507/head
Cagatay Civici 2024-02-15 01:07:31 +03:00
parent 130688ca81
commit 0ff84aa6cf
22 changed files with 1192 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
components/lib/theme/aura/breadcrumb/index.js Normal file
View File

@ -0,0 +1,96 @@
export default {
variables: {
colorScheme: {
root: {
background: '{surface.0}'
},
light: {
item: {
textColor: '{surface.500}',
textColorHover: '{surface.700}',
iconColor: '{surface.400}'
},
separator: {
color: '{surface.400}'
}
},
dark: {
root: {
background: '{surface.900}'
},
item: {
textColor: '{surface.400}',
textColorHover: '{surface.0}',
iconColor: '{surface.500}'
},
separator: {
color: '{surface.500}'
}
}
}
},
css: `
.p-breadcrumb {
background: var(-p-breadcrumb-background);
border: 0 none;
border-radius: 6px;
padding: 1rem;
overflow-x: auto;
}
.p-breadcrumb .p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb .p-menuitem-link {
text-decoration: none;
display: flex;
align-items: center;
}
.p-breadcrumb .p-menuitem-separator {
display: flex;
align-items: center;
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
.p-breadcrumb .p-menuitem-link {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
outline-color: transparent;
}
.p-breadcrumb .p-menuitem-link:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-breadcrumb .p-menuitem-text {
color: var(--p-breadcrumb-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
line-height: 1;
}
.p-breadcrumb .p-menuitem-text:hover {
color: var(--p-breadcrumb-item-text-color-hover);
line-height: 1;
}
.p-breadcrumb .p-menuitem-icon {
color: var(--p-breadcrumb-item-icon-color);
}
.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
margin: 0 0.5rem 0 0.5rem;
color: var(--p-breadcrumb-separator-color);
}
`
};

6
components/lib/theme/aura/breadcrumb/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

172
components/lib/theme/aura/contextmenu/index.js Normal file
View File

@ -0,0 +1,172 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
item: {
backgroundFocus: '{surface.100}',
text: {
color: '{surface.700}',
colorFocus: '{surface.800}'
},
icon: {
color: '{surface.400}',
colorFocus: '{surface.500}'
}
},
separator: {
borderColor: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
item: {
backgroundFocus: '{surface.800}',
text: {
color: '{surface.0}',
colorFocus: '{surface.0}'
},
icon: {
color: '{surface.500}',
colorFocus: '{surface.400}'
}
},
separator: {
borderColor: '{surface.700}'
}
}
}
},
css: `
.p-contextmenu {
padding: 0.25rem 0.25rem;
background: var(--p-contextmenu-background);
color: var(--p-contextmenu-text-color);
border: 1px solid var(--p-contextmenu-border-color);
border-radius: var(--p-rounded-base);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem;
}
.p-contextmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-contextmenu-root-list {
outline: 0 none;
}
.p-contextmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
padding: 0.25rem 0.25rem;
background: var(--p-contextmenu-background);
color: var(--p-contextmenu-text-color);
border: 1px solid var(--p-contextmenu-border-color);
border-radius: var(--p-rounded-base);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-contextmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-contextmenu .p-menuitem-text {
line-height: 1;
}
.p-contextmenu .p-menuitem {
position: relative;
margin: 2px 0;
}
.p-contextmenu .p-menuitem:first-child {
margin-top: 0;
}
.p-contextmenu .p-menuitem:last-child {
margin-bottom: 0;
}
.p-contextmenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
border-radius: var(--p-rounded-sm);
color: var(--p-contextmenu-item-text-color);
}
.p-contextmenu .p-menuitem-icon {
color: var(--p-contextmenu-item-icon-color);
margin-right: 0.5rem;
}
.p-contextmenu .p-submenu-icon {
color: var(--p-contextmenu-item-icon-color);
margin-left: auto;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content {
color: var(--p-contextmenu-item-text-color-focus);
background: var(--p-contextmenu-item-background-focus);
}
.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
color: var(--p-contextmenu-item-icon-color-focus);
}
.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
color: var(--p-contextmenu-item-text-color-focus);
background: var(--p-contextmenu-item-background-focus);
}
.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon,
.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
color: var(--p-contextmenu-item-icon-color-focus);
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
color: var(--p-contextmenu-item-text-color-focus);
background: var(--p-contextmenu-item-background-focus);
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon,
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon {
color: var(--p-contextmenu-item-icon-color-focus);
}
.p-contextmenu .p-menuitem-separator {
border-top: 1px solid var(--p-contextmenu-separator-border-color);
margin: 2px 0;
}
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
`
};

6
components/lib/theme/aura/contextmenu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

179
components/lib/theme/aura/dock/index.js Normal file
View File

@ -0,0 +1,179 @@
export default {
variables: {
colorScheme: {
light: {},
dark: {}
}
},
css: `
.p-dock {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.p-dock-list-container {
display: flex;
pointer-events: auto;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
outline: 0 none;
}
.p-dock-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
padding: 0.5rem;
border-radius: 6px;
}
p-dock-item.p-focus {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-dock-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
width: 3rem;
height: 3rem;
}
.p-dock-item-second-prev,
.p-dock-item-second-next {
transform: scale(1.2);
}
.p-dock-item-prev,
.p-dock-item-next {
transform: scale(1.4);
}
.p-dock-item-current {
transform: scale(1.6);
z-index: 1;
}
.p-dock-top {
left: 0;
top: 0;
width: 100%;
}
.p-dock-top .p-dock-item {
transform-origin: center top;
}
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-bottom .p-dock-item {
transform-origin: center bottom;
}
.p-dock-right {
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-item {
transform-origin: center right;
}
.p-dock-right .p-dock-list {
flex-direction: column;
}
.p-dock-left {
left: 0;
top: 0;
height: 100%;
}
.p-dock-left .p-dock-item {
transform-origin: center left;
}
.p-dock-left .p-dock-list {
flex-direction: column;
}
.p-dock-top .p-dock-item-second-prev,
.p-dock-top .p-dock-item-second-next,
.p-dock-bottom .p-dock-item-second-prev,
.p-dock-bottom .p-dock-item-second-next {
margin: 0 0.9rem;
}
.p-dock-top .p-dock-item-prev,
.p-dock-top .p-dock-item-next,
.p-dock-bottom .p-dock-item-prev,
.p-dock-bottom .p-dock-item-next {
margin: 0 1.3rem;
}
.p-dock-top .p-dock-item-current,
.p-dock-bottom .p-dock-item-current {
margin: 0 1.5rem;
}
.p-dock-left .p-dock-item-second-prev,
.p-dock-left .p-dock-item-second-next,
.p-dock-right .p-dock-item-second-prev,
.p-dock-right .p-dock-item-second-next {
margin: 0.9rem 0;
}
.p-dock-left .p-dock-item-prev,
.p-dock-left .p-dock-item-next,
.p-dock-right .p-dock-item-prev,
.p-dock-right .p-dock-item-next {
margin: 1.3rem 0;
}
.p-dock-left .p-dock-item-current,
.p-dock-right .p-dock-item-current {
margin: 1.5rem 0;
}
.p-dock-mobile.p-dock-top .p-dock-list-container,
.p-dock-mobile.p-dock-bottom .p-dock-list-container {
overflow-x: auto;
width: 100%;
}
.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
margin: 0 auto;
}
.p-dock-mobile.p-dock-left .p-dock-list-container,
.p-dock-mobile.p-dock-right .p-dock-list-container {
overflow-y: auto;
height: 100%;
}
.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
margin: auto 0;
}
.p-dock-mobile .p-dock-list .p-dock-item {
transform: none;
margin: 0;
}
`
};

6
components/lib/theme/aura/dock/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

8
components/lib/theme/aura/global.js
View File

@ -129,8 +129,8 @@ export default {
}
.p-component {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-family: var(--p-font-family);
font-feature-settings: var(--p-font-feature-settings, normal);
font-size: 1rem;
font-weight: normal;
}
@ -163,8 +163,8 @@ export default {
}
.p-link {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings, normal);
font-family: var(--p-font-family);
font-feature-settings: var(--p-font-feature-settings, normal);
font-size: 1rem;
border-radius: 6px;
outline-color: transparent;

20
components/lib/theme/aura/index.js
View File

@ -2,23 +2,30 @@ import accordion from 'primevue/theme/aura/accordion';
import avatar from 'primevue/theme/aura/avatar';
import badge from 'primevue/theme/aura/badge';
import blockui from 'primevue/theme/aura/blockui';
import breadcrumb from 'primevue/theme/aura/breadcrumb';
import card from 'primevue/theme/aura/card';
import carousel from 'primevue/theme/aura/carousel';
import chip from 'primevue/theme/aura/chip';
import confirmdialog from 'primevue/theme/aura/confirmdialog';
import confirmpopup from 'primevue/theme/aura/confirmpopup';
import contextmenu from 'primevue/theme/aura/contextmenu';
import dialog from 'primevue/theme/aura/dialog';
import divider from 'primevue/theme/aura/divider';
import dock from 'primevue/theme/aura/dock';
import fieldset from 'primevue/theme/aura/fieldset';
import galleria from 'primevue/theme/aura/galleria';
import global from 'primevue/theme/aura/global';
import image from 'primevue/theme/aura/image';
import inlinemessage from 'primevue/theme/aura/inlinemessage';
import inplace from 'primevue/theme/aura/inplace';
import megamenu from 'primevue/theme/aura/megamenu';
import menu from 'primevue/theme/aura/menu';
import menubar from 'primevue/theme/aura/menubar';
import message from 'primevue/theme/aura/message';
import metergroup from 'primevue/theme/aura/metergroup';
import overlaypanel from 'primevue/theme/aura/overlaypanel';
import panel from 'primevue/theme/aura/panel';
import panelmenu from 'primevue/theme/aura/panelmenu';
import progressbar from 'primevue/theme/aura/progressbar';
import progressspinner from 'primevue/theme/aura/progressspinner';
import scrollpanel from 'primevue/theme/aura/scrollpanel';
@ -26,9 +33,12 @@ import scrolltop from 'primevue/theme/aura/scrolltop';
import sidebar from 'primevue/theme/aura/sidebar';
import skeleton from 'primevue/theme/aura/skeleton';
import splitter from 'primevue/theme/aura/splitter';
import steps from 'primevue/theme/aura/steps';
import tabmenu from 'primevue/theme/aura/tabmenu';
import tabview from 'primevue/theme/aura/tabview';
import tag from 'primevue/theme/aura/tag';
import terminal from 'primevue/theme/aura/terminal';
import tieredmenu from 'primevue/theme/aura/tieredmenu';
import toast from 'primevue/theme/aura/toast';
import toolbar from 'primevue/theme/aura/toolbar';
import tooltip from 'primevue/theme/aura/tooltip';
@ -147,15 +157,21 @@ export default {
avatar,
badge,
blockui,
breadcrumb,
card,
carousel,
chip,
confirmdialog,
confirmpopup,
contextmenu,
dialog,
divider,
dock,
fieldset,
galleria,
megamenu,
menu,
menubar,
message,
metergroup,
image,
@ -163,6 +179,7 @@ export default {
inplace,
overlaypanel,
panel,
panelmenu,
progressbar,
progressspinner,
scrollpanel,
@ -170,7 +187,10 @@ export default {
skeleton,
sidebar,
splitter,
steps,
tabmenu,
tabview,
tieredmenu,
tag,
terminal,
toast,

11
components/lib/theme/aura/megamenu/index.js Normal file
View File

@ -0,0 +1,11 @@
export default {
variables: {
colorScheme: {
light: {},
dark: {},
},
},
css: `
`,
};

6
components/lib/theme/aura/megamenu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

144
components/lib/theme/aura/menu/index.js Normal file
View File

@ -0,0 +1,144 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
item: {
backgroundFocus: '{surface.100}',
text: {
color: '{surface.700}',
colorFocus: '{surface.800}'
},
icon: {
color: '{surface.400}',
colorFocus: '{surface.500}'
}
},
submenuHeader: {
textColor: '{surface.400}'
},
separator: {
borderColor: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
item: {
backgroundFocus: '{surface.800}',
text: {
color: '{surface.0}',
colorFocus: '{surface.0}'
},
icon: {
color: '{surface.500}',
colorFocus: '{surface.400}'
}
},
submenuHeader: {
textColor: '{surface.500}'
},
separator: {
borderColor: '{surface.700}'
}
}
}
},
css: `
.p-menu {
padding: 0.25rem 0.25rem;
background: var(--p-menu-background);
color: var(--p-menu-text-color);
border: 1px solid var(--p-menu-border-color);
border-radius: var(--p-rounded-base);
min-width: 12.5rem;
}
.p-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menu .p-menuitem {
margin: 2px 0;
}
.p-menu .p-menuitem:first-child {
margin-top: 0;
}
.p-menu .p-menuitem:last-child {
margin-bottom: 0;
}
.p-menu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-menu .p-menuitem-text {
line-height: 1;
}
.p-menu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
border-radius: var(--p-rounded-sm);
color: var(--p-menu-item-text-color);
}
.p-menu .p-menuitem-icon {
color: var(--p-menu-item-icon-color);
margin-right: 0.5rem;
}
.p-menu .p-menuitem.p-focus .p-menuitem-content {
color: var(--p-menu-item-text-color-focus);
background: var(--p-menu-item-background-focus);
}
.p-menu .p-menuitem.p-focus .p-menuitem-icon {
color: var(--p-menu-item-icon-color-focus);
}
.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover {
color: var(--p-menu-item-text-color-focus);
background: var(--p-menu-item-background-focus);
}
.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-menuitem-icon,
.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-submenu-icon {
color: var(--p-menu-item-icon-color-focus);
}
.p-menu.p-menu-overlay {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menu .p-submenu-header {
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--p-menu-submenu-header-text-color);
font-weight: 600;
}
.p-menu .p-menuitem-separator {
border-top: 1px solid var(--p-menu-separator-border-color);
margin: 2px 0;
}
`
};

6
components/lib/theme/aura/menu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

298
components/lib/theme/aura/menubar/index.js Normal file
View File

@ -0,0 +1,298 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
item: {
backgroundFocus: '{surface.100}',
text: {
color: '{surface.700}',
colorFocus: '{surface.800}'
},
icon: {
color: '{surface.400}',
colorFocus: '{surface.500}'
}
},
separator: {
borderColor: '{surface.200}'
},
toggleIcon: {
color: '{surface.500}',
colorHover: '{surface.600}',
backgroundHover: '{surface.100}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
item: {
backgroundFocus: '{surface.800}',
text: {
color: '{surface.0}',
colorFocus: '{surface.0}'
},
icon: {
color: '{surface.500}',
colorFocus: '{surface.400}'
}
},
separator: {
borderColor: '{surface.700}'
},
toggleIcon: {
color: '{surface.400}',
colorHover: '{surface.300}',
backgroundHover: '{surface.800}'
}
}
}
},
css: `
.p-menubar {
display: flex;
align-items: center;
padding: 0.5rem 0.5rem;
background: var(--p-menubar-background);
color: var(--p-menubar-text-color);
border: 1px solid var(--p-menubar-border-color);
border-radius: var(--p-rounded-base);
}
.p-menubar ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menubar .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-menubar .p-menuitem-text {
line-height: 1;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
outline: 0 none;
}
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
display: block;
}
.p-menubar .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
border-radius: var(--p-rounded-sm);
color: var(--p-menubar-item-text-color);
}
.p-menubar .p-menuitem-icon {
color: var(--p-menubar-item-icon-color);
margin-right: 0.5rem;
}
.p-menubar .p-menuitem.p-focus > .p-menuitem-content {
color: var(--p-menubar-item-text-color-focus);
background: var(--p-menubar-item-background-focus);
}
.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
color: var(--p-menubar-item-icon-color-focus);
}
.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
color: var(--p-menubar-item-text-color-focus);
background: var(--p-menubar-item-background-focus);
}
.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon,
.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
color: var(--p-menubar-item-icon-color-focus);
}
.p-menubar .p-menuitem-active > .p-menuitem-content {
color: var(--p-menubar-item-text-color-focus);
background: var(--p-menubar-item-background-focus);
}
.p-menubar .p-menuitem-active > .p-menuitem-content .p-menuitem-icon,
.p-menubar .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
color: var(--p-menubar-item-icon-color-focus);
}
.p-menubar .p-submenu-icon {
color: var(--p-menubar-item-icon-color);
margin-left: auto;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon {
margin-left: 0.5rem;
}
.p-menubar .p-submenu-list {
display: none;
position: absolute;
min-width: 12.5rem;
z-index: 1;
padding: 0.25rem 0.25rem;
background: var(--p-menubar-background);
color: var(--p-menubar-text-color);
border: 1px solid var(--p-menubar-border-color);
border-radius: var(--p-rounded-base);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid var(--p-menubar-separator-border-color);
margin: 2px 0;
}
.p-menubar .p-submenu-list .p-menuitem {
position: relative;
margin: 2px 0;
}
.p-menubar .p-submenu-list .p-menuitem:first-child {
margin-top: 0;
}
.p-menubar .p-submenu-list .p-menuitem:last-child {
margin-bottom: 0;
}
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
.p-menubar .p-menubar-end {
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
position: relative;
color: var(--p-menubar-toggle-icon-color);
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
}
.p-menubar-button:hover {
color: var(--p-menubar-toggle-icon-color-hover);
background: var(--p-menubar-toggle-icon-background-hover);
}
.p-menubar-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-menubar-mobile {
position: relative;
}
.p-menubar-mobile .p-menubar-button {
display: flex;
}
.p-menubar-mobile .p-menubar-root-list {
position: absolute;
display: none;
width: 100%;
padding: 0.25rem 0.25rem;
background: var(--p-menubar-background);
border: 1px solid var(--p-menubar-border-color);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-menubar-mobile .p-menubar-root-list .p-menuitem {
width: 100%;
position: static;
}
.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
border-top: 1px solid #e2e8f0;
margin: 2px 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menuitem {
position: relative;
margin: 2px 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menuitem:first-child {
margin-top: 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menuitem:last-child {
margin-bottom: 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon {
margin-left: auto;
transition: transform 0.2s;
}
.p-menubar-mobile .p-menubar-root-list > .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
transform: rotate(-180deg);
}
.p-menubar-mobile .p-submenu-list .p-submenu-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-menubar-mobile .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
transform: rotate(-90deg);
}
.p-menubar-mobile .p-submenu-list {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
padding-left: 1rem;
}
`
};

6
components/lib/theme/aura/menubar/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

11
components/lib/theme/aura/panelmenu/index.js Normal file
View File

@ -0,0 +1,11 @@
export default {
variables: {
colorScheme: {
light: {},
dark: {},
},
},
css: `
`,
};

6
components/lib/theme/aura/panelmenu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

11
components/lib/theme/aura/steps/index.js Normal file
View File

@ -0,0 +1,11 @@
export default {
variables: {
colorScheme: {
light: {},
dark: {},
},
},
css: `
`,
};

6
components/lib/theme/aura/steps/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

11
components/lib/theme/aura/tabmenu/index.js Normal file
View File

@ -0,0 +1,11 @@
export default {
variables: {
colorScheme: {
light: {},
dark: {},
},
},
css: `
`,
};

6
components/lib/theme/aura/tabmenu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

175
components/lib/theme/aura/tieredmenu/index.js Normal file
View File

@ -0,0 +1,175 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
item: {
backgroundFocus: '{surface.100}',
text: {
color: '{surface.700}',
colorFocus: '{surface.800}'
},
icon: {
color: '{surface.400}',
colorFocus: '{surface.500}'
}
},
separator: {
borderColor: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
item: {
backgroundFocus: '{surface.800}',
text: {
color: '{surface.0}',
colorFocus: '{surface.0}'
},
icon: {
color: '{surface.500}',
colorFocus: '{surface.400}'
}
},
separator: {
borderColor: '{surface.700}'
}
}
}
},
css: `
.p-tieredmenu {
padding: 0.25rem 0.25rem;
background: var(--p-tieredmenu-background);
color: var(--p-tieredmenu-text-color);
border: 1px solid var(--p-tieredmenu-border-color);
border-radius: var(--p-rounded-base);
min-width: 12.5rem;
}
.p-tieredmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-tieredmenu-root-list {
outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
padding: 0.25rem 0.25rem;
background: var(--p-tieredmenu-background);
color: var(--p-tieredmenu-text-color);
border: 1px solid var(--p-tieredmenu-border-color);
border-radius: var(--p-rounded-base);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-tieredmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-tieredmenu .p-menuitem-text {
line-height: 1;
}
.p-tieredmenu .p-menuitem {
position: relative;
margin: 2px 0;
}
.p-tieredmenu .p-menuitem:first-child {
margin-top: 0;
}
.p-tieredmenu .p-menuitem:last-child {
margin-bottom: 0;
}
.p-tieredmenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
border-radius: var(--p-rounded-sm);
color: var(--p-tieredmenu-item-text-color);
}
.p-tieredmenu .p-menuitem-icon {
color: var(--p-tieredmenu-item-icon-color);
margin-right: 0.5rem;
}
.p-tieredmenu .p-submenu-icon {
color: var(--p-tieredmenu-item-icon-color);
margin-left: auto;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content {
color: var(--p-tieredmenu-item-text-color-focus);
background: var(--p-tieredmenu-item-background-focus);
}
.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
color: var(--p-tieredmenu-item-icon-color-focus);
}
.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
color: var(--p-tieredmenu-item-text-color-focus);
background: var(--p-tieredmenu-item-background-focus);
}
.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon,
.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
color: var(--p-tieredmenu-item-icon-color-focus);
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
color: var(--p-tieredmenu-item-text-color-focus);
background: var(--p-tieredmenu-item-background-focus);
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon,
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon {
color: var(--p-tieredmenu-item-icon-color-focus);
}
.p-tieredmenu .p-menuitem-separator {
border-top: 1px solid var(--p-tieredmenu-separator-border-color);
margin: 2px 0;
}
.p-tieredmenu.p-tieredmenu-overlay {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-tieredmenu-enter-from,
.p-tieredmenu-leave-active {
opacity: 0;
}
.p-tieredmenu-enter-active {
transition: opacity 250ms;
}
`
};

6
components/lib/theme/aura/tieredmenu/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}