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

Change Dashboard menu section in order to extend with nav-sub functionality

This commit is contained in:
Konstantinos Triantafyllou 2022-11-03 15:50:25 +02:00
parent 486c9c520d
commit e297366e40
1 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
less/dashboard.less
View File

@ -7,16 +7,27 @@
@dashboard-primary-inverse-color: @global-inverse-color;
@dashboard-sidebar-background: @global-inverse-color;
@dashboard-sidebar-border-width: @global-border-width;
@dashboard-sidebar-border: @global-border;
@dashboard-sidebar-width: 280px;
@dashboard-sidebar-mini-width: 125px;
@dashboard-sidebar-mini-width-s: 100px;
@dashboard-menu-section-margin: 10px;
@dashboard-menu-section-item-line-height: @global-control-height;
@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-horizontal: 20px;
@dashboard-menu-section-icon-padding: 10px;
@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-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-border-radius: @global-small-border-radius;
@dashboard-menu-section-sublist-item-background-active: @dashboard-page-content-background;
@dashboard-page-content-sticky-border-width: @global-border-width;
@dashboard-page-content-sticky-border: @global-border;
@ -29,6 +40,7 @@
@dashboard-elements: #page_content .message, bottom > div;
.sidebar_main_swipe {
#sidebar_main {
#sidebar_content {
width: @dashboard-sidebar-width;
@ -39,22 +51,23 @@
padding-top: @dashboard-header-height;
z-index: @dashboard-z-index;
background: @dashboard-sidebar-background;
border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border;
transition: 0.5s;
transition-property: width;
overflow-y: auto;
}
.menu_section {
margin-left: @dashboard-menu-section-margin;
position: relative;
font-size: @dashboard-menu-section-font-size;
& > ul > li {
background: none;
& > a {
position: relative;
padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
line-height: @dashboard-menu-section-item-line-height;
background-color: transparent;
transition: background-color 0.3s ease-out 0s;
&:not(.uk-flex) {
display: block;
@ -68,12 +81,49 @@
}
}
&.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;
&:not(.uk-flex)::after {
position: absolute;
right: (@dashboard-menu-section-item-padding-horizontal/2);
top: 50%;
transform: translate(-50%, -50%);
line-height: (@dashboard-menu-section-item-line-height - 10px);
}
}
& .uk-nav-sub {
margin-right: @dashboard-menu-section-sublist-margin;
padding-left: @dashboard-menu-section-sublist-padding-left;
position: relative;
& a {
border-radius: @dashboard-menu-section-sublist-item-border-radius;
padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
}
& > li.uk-active > a {
background-color: @dashboard-menu-section-sublist-item-background-active;
}
&:before {
content: "";
left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
position: absolute;
height: 95%;
border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
}
}
}
&:hover:not(.uk-active) > a {
background-color: fade(@dashboard-page-content-background, 80%);
}
&.uk-active > a {
background-color: @dashboard-page-content-background;
& .menu-icon {
background-color: @dashboard-primary-background;
@ -91,7 +141,7 @@
}
#page_content {
.set-blur-background(@dashboard-page-content-background);
.set-blur-background(@dashboard-page-content-background, 80%);
.message {
top: 50%;