Ebola-Chan/kd_discord_bot
1
0
Fork 0
forked from sh-edraft.de/sh_discord_bot
Code Issues Pull Requests Projects Releases Wiki Activity

Improved design of menu to handle servers #72

Browse Source
This commit is contained in:
Sven Heidemann
2022-10-18 13:44:13 +02:00
parent c094a3efae
commit 1055d5c2e1
8 changed files with 79 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
kdb-web/src/styles/primeng-fixes.scss
View File

@@ -6,14 +6,17 @@
}
}
.p-menu {
.p-menu,
.p-panelmenu {
background: none !important;
border: none !important;
width: auto !important;
border-radius: 0px !important;
padding: 0 !important;
.p-menuitem-link {
.p-menuitem-link,
.p-panelmenu-header > a,
.p-panelmenu-content .p-menuitem .p-menuitem-link {
$distance: 10px;
padding: $distance 0px $distance $distance !important;
margin: 4px 0px 4px 6px !important;
@@ -24,6 +27,31 @@
top: $headerHeight !important;
}
.p-panelmenu {
.p-panelmenu-icon {
order: 1; // to be the first item on right side.
}
.p-menuitem-text {
flex-grow: 1; // to fill the whole space and push the icon to the end
}
.p-panelmenu-header > a {
border: none !important;
border-radius: none !important;
font-weight: none !important;
transition: none !important;
}
.p-panelmenu-content {
border: none !important;
background: none !important;
}
.p-menuitem-text {
line-height: normal !important;
}
}
ui-menu .ui-menu-parent .ui-menu-child {
width: 400px; /* exagerated !! */
}

25
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
View File

@@ -252,28 +252,43 @@
stroke: $primaryHeaderColor !important;
}
.p-menu {
.p-menu,
.p-panelmenu {
color: $primaryTextColor !important;
.p-menuitem-link .p-menuitem-text,
.p-menuitem-link .p-menuitem-icon {
.p-menuitem-link .p-menuitem-icon,
.p-panelmenu-header > a {
color: $primaryTextColor !important;
background: transparent !important;
font-size: 1rem !important;
font-weight: normal !important;
}
.p-menuitem-link:focus {
.p-menuitem-link:focus,
.p-panelmenu-header > a:focus,
.p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
box-shadow: none !important;
}
.p-menuitem-link:hover {
.p-menuitem-link:hover,
.p-panelmenu-header > a:hover,
.p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
background-color: $secondaryBackgroundColor !important;
$border-radius: 20px;
border-radius: $border-radius 0px 0px $border-radius;
.p-menuitem-text,
.p-menuitem-icon {
.p-menuitem-icon,
.p-menuitem-text,
.p-panelmenu-icon {
color: $primaryHeaderColor !important;
}
}
.p-panelmenu-content {
margin: 5px 0px 5px 10px;
}
}
.p-menu-overlay {