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