MaDgIK
/
openaire-assets
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make some modifications regarding sidebar menu and submenu

This commit is contained in:
Konstantinos Triantafyllou 2022-11-04 16:33:24 +02:00
parent e297366e40
commit bcceb8367e
1 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
less/dashboard.less
View File

@ -16,18 +16,25 @@
@dashboard-menu-section-margin: 10px;
@dashboard-menu-section-font-size: @global-small-font-size;
@dashboard-menu-section-item-line-height: @global-control-small-height;
@dashboard-menu-section-item-padding-vertical: 10px;
@dashboard-menu-section-item-padding-vertical: 5px;
@dashboard-menu-section-item-padding-horizontal: 20px;
@dashboard-menu-section-item-parent-icon-color: @global-meta-color;
@dashboard-menu-section-item-color-hover: @dashboard-primary-background;
@dashboard-menu-section-icon-padding: 6px;
@dashboard-menu-section-icon-border-radius: @global-border-radius;
@dashboard-menu-section-sublist-padding-left: @nav-sublist-padding-left + 2*@dashboard-menu-section-icon-padding;
@dashboard-menu-section-sublist-margin: 10px;
@dashboard-menu-section-sublist-border-width: 2px;
@dashboard-menu-section-icon-color: @global-meta-color;
@dashboard-menu-section-sublist-padding-left: @nav-sublist-padding-left + @dashboard-menu-section-icon-padding;
@dashboard-menu-section-sublist-margin-right: @dashboard-menu-section-item-padding-horizontal;
@dashboard-menu-section-sublist-border-width: 3px;
@dashboard-menu-section-sublist-border-radius: 40px;
@dashboard-menu-section-sublist-border: fade(@dashboard-primary-background, 30%);
@dashboard-menu-section-sublist-item-padding-vertical: 5px;
@dashboard-menu-section-sublist-item-padding-horizontal: 10px;
@dashboard-menu-section-sublist-item-padding-horizontal: 15px;
@dashboard-menu-section-sublist-item-border-radius: @global-small-border-radius;
@dashboard-menu-section-sublist-item-background-active: @dashboard-page-content-background;
@dashboard-menu-section-sublist-item-background-hover: fade(@dashboard-primary-background, 10%);
@dashboard-menu-section-sublist-item-color-hover: @dashboard-primary-background;
@dashboard-menu-section-sublist-item-background-active: fade(@dashboard-primary-background, 10%);
@dashboard-menu-section-sublist-item-color-active: @dashboard-primary-background;
@dashboard-page-content-sticky-border-width: @global-border-width;
@dashboard-page-content-sticky-border: @global-border;
@ -78,12 +85,17 @@
padding: @dashboard-menu-section-icon-padding;
border-radius: @dashboard-menu-section-icon-border-radius;
background-color: transparent;
color: @dashboard-menu-section-icon-color;
}
}
&.uk-parent {
& > a {
padding: @dashboard-menu-section-item-padding-vertical (2*@dashboard-menu-section-item-padding-horizontal) @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
padding: @dashboard-menu-section-item-padding-vertical (3*@dashboard-menu-section-item-padding-horizontal) @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
&::after {
color: @dashboard-menu-section-item-parent-icon-color;
}
&:not(.uk-flex)::after {
position: absolute;
@ -95,7 +107,7 @@
}
& .uk-nav-sub {
margin-right: @dashboard-menu-section-sublist-margin;
margin-right: @dashboard-menu-section-sublist-margin-right;
padding-left: @dashboard-menu-section-sublist-padding-left;
position: relative;
@ -104,23 +116,35 @@
padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
}
& > li:hover > a {
background-color: @dashboard-menu-section-sublist-item-background-hover;
color: @dashboard-menu-section-sublist-item-color-active;
}
& > li.uk-active > a {
background-color: @dashboard-menu-section-sublist-item-background-active;
color: @dashboard-menu-section-sublist-item-color-hover;
}
&:before {
content: "";
left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
top: 0;
position: absolute;
height: 95%;
border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
border-radius: @dashboard-menu-section-sublist-border-radius;
}
}
}
&:hover:not(.uk-active) > a {
color: @dashboard-menu-section-item-color-hover;
& .menu-icon {
color: @dashboard-menu-section-item-color-hover;
}
}
&.uk-active > a {