Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix menu styling
Browse files Browse the repository at this point in the history
flxdot committed Apr 14, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent df42aeb commit beec731
Showing 2 changed files with 187 additions and 23 deletions.
9 changes: 7 additions & 2 deletions services/frontend/src/components/main-layout/header.vue
Original file line number Diff line number Diff line change
@@ -180,12 +180,17 @@ const menuItems = ref<MenuItem[]>([]);
authStore.$subscribe(() => {
if (authStore.isAuthenticated) {
devicesStore.fetchDevicesList().then((devices) => {
menuItems.value = devices.map((device) => {
const devicesMenu = devices.map((device) => {
return {
label: device.displayName,
icon: 'pi pi-sitemap',
};
});
menuItems.value = [
{
label: i18n.global.t('navigation.devices'),
items: devicesMenu,
},
];
});
}
});
201 changes: 180 additions & 21 deletions services/frontend/src/styles/primetheme.scss
Original file line number Diff line number Diff line change
@@ -9,11 +9,6 @@
}

.carlos-nav {
&.p-menu {
background-color: var(--carlos-primary-color--dark);
color: var(--carlos-primary-color-text);
border: 1px solid var(--carlos-primary-color);
}

a {
color: var(--carlos-primary-color-text);
@@ -23,30 +18,194 @@
background-color: #fff3;
}

.p-menuitem.p-focus {
background-color: var(--carlos-primary-color--dark);
.p-menuitem-link {
padding: 0.5rem 1rem;
font-weight: 600;
}

.p-menuitem-separator {
margin: .25rem 0;
}

&.p-menu {
background: var(--carlos-primary-color);
color: var(--carlos-primary-color-text);
border: 1px solid var(--carlos-primary-color--light);
}
&.p-menu .p-menuitem > .p-menuitem-content {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem.p-highlight > .p-menuitem-content {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color);
}
&.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
background: var(--carlos-primary-color--light);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menu.p-menu-overlay {
background: var(--carlos-primary-color);
border: 1px solid var(--carlos-primary-color--light);
}
&.p-menu .p-submenu-header {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color);
}
&.p-menu .p-menuitem-separator {
border-top: 1px solid var(--carlos-primary-color--light);
}
&.p-menubar {
background: var(--carlos-primary-color);
color: var(--carlos-primary-color-text);
border: 1px solid var(--carlos-primary-color--light);
}
&.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}
&.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem > .p-menuitem-content {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color);
}
&.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
background: var(--carlos-primary-color--light);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: var(--carlos-primary-color-text);
background-color: var(--carlos-primary-color--dark);
}

.p-menuitem .p-menuitem-icon, .p-menuitem .p-menuitem-text {
background: var(--carlos-primary-color--light);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}

.p-menuitem-content:hover {
background-color: var(--carlos-primary-color--light);
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}

.p-menuitem-link {
padding: 0.5rem 1rem;
font-weight: 600;
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}

.p-menuitem-separator {
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--light);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
color: var(--carlos-primary-color-text);
}
&.p-menubar .p-submenu-list {
background: var(--carlos-primary-color);
border: 1px solid var(--carlos-primary-color--light);
}
&.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid var(--carlos-primary-color--light);
margin: .25rem 0;
}
&.p-menubar.p-menubar-mobile .p-menubar-button {
color: var(--carlos-primary-color-text);
}
&.p-menubar.p-menubar-mobile .p-menubar-button:hover {
color: var(--carlos-primary-color-text);
background: var(--carlos-primary-color--dark);
}
&.p-menubar.p-menubar-mobile .p-menubar-button:focus {
outline: 1px solid var(--carlos-primary-color--dark);
}
&.p-menubar.p-menubar-mobile .p-menubar-root-list {
background: var(--carlos-primary-color);
border: 1px solid var(--carlos-primary-color--dark);
}

}

0 comments on commit beec731

Please sign in to comment.