You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
4.1 KiB
218 lines
4.1 KiB
@hover-submenu-background-active: #F5F5F5;
|
|
@hover-submenu-item-background-hover: #EEF3F7;
|
|
@hover-submenu-item-color-hover: #2E7DB4;
|
|
|
|
|
|
.enable_submen_hover() when (@enable-submenu-hover = true) {
|
|
.nav-list li.hover {
|
|
> .submenu {
|
|
position: absolute;
|
|
left: 100%;
|
|
margin-left: -2px;
|
|
|
|
top: -10px;
|
|
bottom: auto;
|
|
z-index: @zindex-submenu;
|
|
|
|
width: @sidebar-width;
|
|
border: 1px solid;
|
|
|
|
display: none !important;
|
|
|
|
//.transition(~"max-height 0s linear 0.4s, z-index 0s linear 0.4s, opacity 0.1s linear 0.3s");
|
|
}
|
|
&:hover > .submenu {
|
|
display: block !important;
|
|
}
|
|
|
|
//hide the tree like lines
|
|
> .submenu {
|
|
&:before , > li:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
&.active > a:after {
|
|
display: block;
|
|
}
|
|
//hide the active caret when hovered, li > .arrow is show instead
|
|
&.active:hover > a.dropdown-toggle:after {
|
|
display: none;
|
|
}
|
|
|
|
//hide the submenu active caret
|
|
.submenu > li.active > a:after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//the submenu shown from bottom not top, i.e. when we want to move the submenu up so that it doesn't go out of the window
|
|
.nav-list li.hover > .submenu.bottom {
|
|
top: auto;
|
|
bottom: -10px;
|
|
|
|
&:before , &:after {
|
|
top: auto;
|
|
bottom: 18px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-list li.hover > .submenu {
|
|
padding: 0 2px;
|
|
> li > a {
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
padding-left: 18px;
|
|
|
|
border-top-width: 0;
|
|
}
|
|
}
|
|
.nav-list > li.hover > .submenu > li.active > a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-list > li > .submenu li.hover > .submenu {
|
|
> li > a {
|
|
padding-left: 12px !important;
|
|
margin-left: auto !important;
|
|
> .menu-icon {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.nav-list > li .submenu > li.hover > a {
|
|
padding-left: 22px;
|
|
> .menu-icon {
|
|
left: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.enable_collapsible_responsive_menu_hover() when (@enable-collapsible-responsive-menu = true) {
|
|
//reset .hover styles for small screens with .navbar-collapse
|
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
|
.sidebar.navbar-collapse {
|
|
.nav-list li.hover > .submenu {
|
|
position: relative;
|
|
left: auto;
|
|
top: auto;
|
|
z-index: auto;
|
|
|
|
margin: auto;
|
|
padding: 0;
|
|
|
|
width: auto;
|
|
|
|
.box-shadow(none);
|
|
border-width: 0;
|
|
|
|
> li:before , &:before {
|
|
display: block;
|
|
}
|
|
li > a {
|
|
padding-left: 37px;
|
|
}
|
|
}
|
|
.nav-list > li.hover > .submenu {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.nav-list li.hover > .submenu > li > a > .menu-icon {
|
|
background-color: inherit;
|
|
margin-right: auto;
|
|
width: @submenu-item-icon-size;
|
|
position: absolute;
|
|
}
|
|
.nav-list > li .submenu > li.hover > a > .menu-icon {
|
|
left: 10px;
|
|
}
|
|
|
|
.nav-list li.hover > .submenu > li.active > a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.nav-list li.hover > .submenu > li {
|
|
&:hover, &.active {
|
|
> a > .menu-icon {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.nav-list > li > .submenu li.hover > .submenu {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.nav-list > li > .submenu li.hover > .submenu > li > a {
|
|
padding-left: 22px !important;
|
|
margin-left: 20px !important;
|
|
> .menu-icon {
|
|
.3rd_level_icon();
|
|
}
|
|
}
|
|
.nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a {
|
|
margin-left: 20px !important;
|
|
padding-left: 38px !important;
|
|
}
|
|
|
|
.nav-list li.hover > .submenu > li > a {
|
|
border-top-width: 1px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.nav-list > li.hover > .submenu > li:first-child > a {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
|
|
//.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a > .menu-icon {
|
|
//display: none;
|
|
//}
|
|
|
|
//-li > .arrow
|
|
.nav-list li.hover > .submenu, .nav-list li.hover:hover > .submenu , .nav-list li.hover > .arrow {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.nav-list li.hover.active > .submenu {
|
|
display: block !important;
|
|
}
|
|
.nav-list li.hover > .submenu.nav-hide {
|
|
display: none !important;
|
|
}
|
|
.nav-list li.hover > .submenu.nav-show {
|
|
display: block !important;
|
|
}
|
|
|
|
&.compact {
|
|
.nav-list > li.hover.active > a:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}//@enable-collapsible-responsive-menu
|
|
.enable_collapsible_responsive_menu_hover();
|
|
|
|
}//@enable-submenu-hover
|
|
.enable_submen_hover();
|
|
|
|
|
|
|
|
|