update
This commit is contained in:
hanjian
@@ -0,0 +1,42 @@
|
||||
//.nav-list li
|
||||
.nav-list li {
|
||||
.active_state_caret() {
|
||||
display: block;
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
|
||||
border: 8px solid transparent;
|
||||
border-width: 14px 10px;
|
||||
}
|
||||
|
||||
&.active > a:after {
|
||||
.active_state_caret();
|
||||
}
|
||||
&.open > a:after {
|
||||
//no caret for open menu item
|
||||
display: none;
|
||||
}
|
||||
&.active.no-active-child {
|
||||
> a:after {
|
||||
//show caret for active menu item with childs which is not open(i.e. no submenu item is active)
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-list > li {
|
||||
li.active > a:after {
|
||||
top: 2px;
|
||||
border-width: 14px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list li.active:not(.open) li.active > a:after {
|
||||
//hide the active caret when parent submenu is being closed (not open)
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
.enable_compact_menu() when (@enable-compact-menu = true) {
|
||||
|
||||
@media (min-width: @screen-hover-menu) {
|
||||
.sidebar.compact {
|
||||
&, &.navbar-collapse {
|
||||
width: @sidebar-compact-width;
|
||||
}
|
||||
|
||||
.sidebar-shortcuts {
|
||||
max-height: @breadcrumb-height - 1;//40px
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
&:before {
|
||||
height: auto;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
.nav-list > li > a {
|
||||
height: auto;
|
||||
line-height: 16px;
|
||||
padding: 2px 0 8px;
|
||||
text-align: center;
|
||||
|
||||
> .menu-icon {
|
||||
display: block;
|
||||
margin : 0;
|
||||
vertical-align: inherit;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
|
||||
font-size: @nav-item-icon-size + 2;
|
||||
}
|
||||
> .arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list a {
|
||||
.badge , .label {
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
.nav-list > li.active > .submenu , .nav-list > li.open > .submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: @sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//reset .compact styles for small screens with .navbar-collapse
|
||||
.enable_collapsible_responsive_compact_menu() when (@enable-collapsible-responsive-menu = true) {
|
||||
@media (min-width: @screen-compact-menu) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.compact + .main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
.sidebar.navbar-collapse {
|
||||
&.compact {
|
||||
.nav-list > li > a {
|
||||
text-align: left;
|
||||
height: @nav-item-height;
|
||||
line-height: (@nav-item-height - 2);
|
||||
|
||||
padding: 0 16px 0 7px;
|
||||
|
||||
> .menu-icon {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
margin: 0 2px 0 0;
|
||||
font-size: @nav-item-icon-size;
|
||||
}
|
||||
> .menu-text {
|
||||
display: inline;
|
||||
}
|
||||
> .arrow {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//@media
|
||||
}
|
||||
.enable_collapsible_responsive_compact_menu();
|
||||
|
||||
|
||||
}
|
||||
|
||||
.enable_compact_menu();
|
||||
@@ -0,0 +1,14 @@
|
||||
//FF_fix
|
||||
|
||||
@media only screen and (min--moz-device-pixel-ratio:0) {
|
||||
.navbar.navbar-fixed-top {
|
||||
border-radius: 0.05em;
|
||||
& , > .navbar-container , .ace-nav > li .dropdown-menu {
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
// ".ace-nav > li .dropdown-menu" becomes fuzzy if it has scrollbars
|
||||
}
|
||||
.sidebar.sidebar-fixed {
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
@highlight-menu-border-color: #C8D8E2;
|
||||
@highlight-menu-active-bg: #F2F6F9;
|
||||
@highlight-h-sidebar-color: lighten(#4D96CB, 10%);
|
||||
|
||||
|
||||
.enable_highlight_active_no_skin() when(@enable-highlight-active = true) {
|
||||
//hide submenu active item caret
|
||||
.nav-list li.highlight li.active > a,
|
||||
.nav-list li li.highlight.active > a {
|
||||
&:after , &:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
//show first-level active item caret
|
||||
.nav-list > li.highlight.active > a {
|
||||
&:after, &:before {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
//hide active item caret inside scrollbars
|
||||
.sidebar-scroll {
|
||||
.nav-list > li.active.highlight > a {
|
||||
&:after, &:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//only for default body.no-skin
|
||||
.no-skin {
|
||||
|
||||
.nav-list > li.highlight {
|
||||
&:hover , &.active {
|
||||
border-color: @highlight-menu-border-color;
|
||||
+ li {
|
||||
border-top-color: @highlight-menu-border-color;
|
||||
}
|
||||
> a {
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
&:before {
|
||||
display: block;
|
||||
background-color: darken(@nav-item-hover-indicator , 5%);
|
||||
}
|
||||
|
||||
> a {
|
||||
background-color: @highlight-menu-active-bg !important;
|
||||
&:before, &:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
top: -1px;
|
||||
right: -1*ceil(@nav-item-height / 4);
|
||||
bottom: auto;
|
||||
z-index: 1;
|
||||
|
||||
border-style: solid;
|
||||
border-width: ceil(@nav-item-height / 2) 0 ceil(@nav-item-height / 2)+1 ceil(@nav-item-height / 4);
|
||||
border-color: transparent;
|
||||
}
|
||||
&:before {
|
||||
border-left-color: darken(@highlight-menu-border-color, 12%);
|
||||
-moz-border-left-colors: darken(@highlight-menu-border-color, 12%);
|
||||
|
||||
right: -1*ceil(@nav-item-height / 4) - 1;
|
||||
}
|
||||
&:after {
|
||||
border-left-color: @highlight-menu-active-bg;
|
||||
-moz-border-left-colors: @highlight-menu-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//don't display the active item caret for submenu items, show just for the parent .nav-list > li item
|
||||
.nav-list li li.highlight.active > a {
|
||||
background-color: @highlight-menu-active-bg;
|
||||
}
|
||||
.nav-list li li.highlight.active.open > a {
|
||||
background-color: #FFF;
|
||||
&:hover {
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.enable_horizontal_menu_highlight_no_skin() when(@enable-horizontal-menu = true) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.sidebar.h-sidebar {
|
||||
.nav-list > li.highlight.active > a:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
left: 0;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -2px;
|
||||
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
|
||||
border-width: 8px 7px;
|
||||
border-bottom-color: #FFF;
|
||||
-moz-border-bottom-colors: #FFF;
|
||||
}
|
||||
.nav-list > li.highlight.active > a:before {
|
||||
display: block;
|
||||
content:"";
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
left: 0;
|
||||
top: auto;
|
||||
right: auto;
|
||||
|
||||
bottom: -1px;
|
||||
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
|
||||
border-width: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
|
||||
border-bottom-color: @highlight-h-sidebar-color;
|
||||
-moz-border-bottom-colors: @highlight-h-sidebar-color;
|
||||
}
|
||||
|
||||
.nav-list > li.highlight.active:hover > a {
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.enable_horizontal_menu_highlight_no_skin();
|
||||
|
||||
}
|
||||
|
||||
|
||||
.enable_compact_menu_highlight_no_skin() when (@enable-compact-menu = true) {
|
||||
@media (min-width: @screen-compact-menu) {
|
||||
.sidebar.compact .nav-list li.highlight.active > a {
|
||||
&:after , &:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enable_horizontal_menu_highlight_compact() when(@enable-horizontal-menu = true) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.sidebar.h-sidebar {
|
||||
.nav-list li.highlight.active > a {
|
||||
&:after , &:before {
|
||||
display: block !important;
|
||||
border-width: 8px !important;//to override .rtl .menu-min
|
||||
|
||||
-moz-border-left-colors: none !important;//~
|
||||
-moz-border-right-colors: none !important;
|
||||
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.nav-list > li.highlight.active:hover > a {
|
||||
&:after, &:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_horizontal_menu_highlight_compact();
|
||||
|
||||
|
||||
}
|
||||
.enable_compact_menu_highlight_no_skin();
|
||||
|
||||
|
||||
.menu_min_highlight_no_skin() {
|
||||
.nav-list > li.highlight.active > a {
|
||||
&:after , &:before {
|
||||
display: block !important;//to override .compact
|
||||
top: -1px;
|
||||
border-width: ceil(@nav-item-height / 2) 0 ceil(@nav-item-height / 2)+1 ceil(@nav-item-height / 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_sidebar_collapse_highlight_no_skin() when (@enable-sidebar-collapse = true) {
|
||||
.sidebar.menu-min {
|
||||
.menu_min_highlight_no_skin();
|
||||
}
|
||||
}
|
||||
.enable_sidebar_collapse_highlight_no_skin();
|
||||
|
||||
.enable_minimized_responsive_menu_highlight_no_skin() when (@enable-minimized-responsive-menu = true) {
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive-min {
|
||||
.menu_min_highlight_no_skin();
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_minimized_responsive_menu_highlight_no_skin();
|
||||
|
||||
}
|
||||
|
||||
.enable_highlight_active_no_skin();
|
||||
@@ -0,0 +1,491 @@
|
||||
@h-sidebar-background: @nav-item-background;
|
||||
@h-sidebar-preground: #E4E4E4;
|
||||
@h-sidebar-preshadow: ~"0 -1px 1px 0 rgba(0, 0, 0, 0.05) inset";
|
||||
|
||||
@h-nav-item-border-active: #79B0CE;
|
||||
@h-nav-item-border-hover: #CEDDE5;
|
||||
|
||||
@h-navbar-shadow: ~"0 2px 4px 0 rgba(0, 0, 0, 0.25)";
|
||||
|
||||
|
||||
.enable_horizontal_menu() when (@enable-horizontal-menu = true) {
|
||||
@media only screen and (min-width: @grid-float-breakpoint) {
|
||||
.navbar.h-navbar {
|
||||
.box-shadow(@h-navbar-shadow);
|
||||
}
|
||||
|
||||
.sidebar.h-sidebar {
|
||||
position: relative;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
margin-top: 17px;
|
||||
|
||||
border-width: 0 !important;
|
||||
box-shadow: none;
|
||||
|
||||
&.sidebar-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
left:0 !important;
|
||||
right: 0 !important;
|
||||
top: -17px;
|
||||
bottom: auto;
|
||||
|
||||
height: 17px;
|
||||
width: auto;
|
||||
|
||||
border-width: 0;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
&.hide-before .nav-list > li:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
border-width: 0;
|
||||
border-bottom: 2px solid @h-nav-item-border-active;
|
||||
}
|
||||
.nav-list > li {
|
||||
float: left;
|
||||
|
||||
border-width: 0 1px;
|
||||
margin-left: -1px;
|
||||
|
||||
//the hover highlight line
|
||||
&:before {
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: auto;
|
||||
top: -2px;
|
||||
|
||||
max-width: none;
|
||||
width: auto;
|
||||
height: 2px;
|
||||
|
||||
border-width: 0;
|
||||
}
|
||||
&.active:before {
|
||||
display: block;
|
||||
}
|
||||
&.active:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: @zindex-submenu;
|
||||
}
|
||||
&.active {
|
||||
z-index: @zindex-submenu + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list > li:first-child {
|
||||
border-left-width: 0;
|
||||
margin-left: 0
|
||||
}
|
||||
.sidebar-shortcuts + .nav-list > li:first-child {
|
||||
border-left-width: 1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
//!importants are for overriding .menu-min and .compact
|
||||
.nav-list > li > a {
|
||||
line-height: 22px !important;
|
||||
height: auto !important;
|
||||
|
||||
padding: 10px 14px !important;
|
||||
|
||||
> .menu-icon {
|
||||
display: block !important;;
|
||||
margin: 1px 0 4px;
|
||||
line-height: inherit;
|
||||
width: auto;
|
||||
}
|
||||
> .arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//hover submenu
|
||||
.nav-list > li.hover {
|
||||
&.pull_right {
|
||||
float: none !important;
|
||||
}
|
||||
> .submenu {
|
||||
top: 100%;
|
||||
left: 1px;
|
||||
margin-top: auto;
|
||||
margin-left: -2px;
|
||||
width: @sidebar-width;
|
||||
z-index: @zindex-submenu;
|
||||
}
|
||||
&.pull_right > .submenu {
|
||||
left: auto;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
//-li > .arrow
|
||||
> .arrow {
|
||||
right: auto;
|
||||
top: auto;
|
||||
left: 24px;
|
||||
bottom: 7px;
|
||||
}
|
||||
&.pull_right > .arrow {
|
||||
left: auto;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
|
||||
> .arrow:before, > .arrow:after {
|
||||
border-width: 0 8px 8px !important;
|
||||
}
|
||||
> .arrow:after {
|
||||
border-color: transparent;
|
||||
//!importants are for overriding .menu-min+.rtl
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
|
||||
-moz-border-right-colors: none !important;
|
||||
-moz-border-left-colors: none !important;
|
||||
-moz-border-top-colors: none;
|
||||
-moz-border-bottom-colors: none;
|
||||
|
||||
left: -10px !important;
|
||||
right: auto !important;
|
||||
}
|
||||
> .arrow:before {
|
||||
border-color: transparent;
|
||||
//!importants are for overriding .menu-min+.rtl
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
|
||||
-moz-border-right-colors: none !important;
|
||||
-moz-border-left-colors: none !important;
|
||||
-moz-border-top-colors: none;
|
||||
-moz-border-bottom-colors: none;
|
||||
|
||||
right: auto !important;
|
||||
left: -10px !important;
|
||||
top: -1px !important;
|
||||
}
|
||||
|
||||
|
||||
&:hover > a ~ .arrow {
|
||||
display: none;
|
||||
}
|
||||
&:hover > a.dropdown-toggle ~ .arrow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
//add an arrow to shortcuts dropdown like //-li > .arrow
|
||||
.sidebar-shortcuts-large {
|
||||
&:before, &:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-width: 0 8px 8px;
|
||||
}
|
||||
}
|
||||
.sidebar-shortcuts-large:after {
|
||||
//border-bottom-color: #FFF;
|
||||
border-right-color: transparent;
|
||||
|
||||
//-moz-border-bottom-colors: #FFF;
|
||||
-moz-border-right-colors: none;
|
||||
|
||||
top: -8px;
|
||||
}
|
||||
.sidebar-shortcuts-large:before {
|
||||
-moz-border-bottom-colors: #CCC;
|
||||
border-bottom-color: #CCC;
|
||||
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
float: left;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
|
||||
margin: 0;
|
||||
padding: 12px 8px 9px;
|
||||
max-height: none !important;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
&:hover .sidebar-shortcuts-large {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sidebar-shortcuts-large {
|
||||
display: none;
|
||||
width: 52px;
|
||||
height: auto;
|
||||
|
||||
position: absolute;
|
||||
z-index: 15;
|
||||
top: 100%;
|
||||
margin-top: -5px;
|
||||
left: 10px;
|
||||
|
||||
padding: 3px 2px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.sidebar-shortcuts-mini {
|
||||
width:auto;
|
||||
max-width: 52px;
|
||||
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px; // for .sidebar-shortcuts-large:"margin-top: -5px" to work, so that as soon as mouse is inside .sidebar-shortcuts, ".sidebar-shortcuts-large" is displayed
|
||||
|
||||
> .btn {
|
||||
margin: 1px;
|
||||
padding: 9px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list a .badge, .nav-list a .label {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: auto !important;
|
||||
left: 50%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
+ .main-content {
|
||||
margin-left: 0;
|
||||
.breadcrumbs {
|
||||
margin: 6px 9px;
|
||||
border: 1px solid;
|
||||
//.no-skin & {
|
||||
border-color: #E5E5E5;
|
||||
//}
|
||||
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
& {
|
||||
margin: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}//.h-sidebar
|
||||
|
||||
|
||||
|
||||
.h-sidebar.sidebar-fixed {
|
||||
//z-index: 1000;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
left:0;
|
||||
right: 0;
|
||||
&:before {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
& , .nav-list {
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
.h-sidebar.sidebar-fixed + .main-content {
|
||||
padding-top: 88px;
|
||||
}
|
||||
}//@media
|
||||
|
||||
|
||||
|
||||
|
||||
.enable_container_horizontal_menu() when(@enable-container = true) {
|
||||
//inside .container
|
||||
.main-container.container .h-sidebar.sidebar-fixed.navbar-collapse {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.main-container.container .h-sidebar.sidebar-fixed.navbar-collapse {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: @container-sm !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
.main-container.container .h-sidebar.sidebar-fixed.navbar-collapse {
|
||||
width: @container-md !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.main-container.container .h-sidebar.sidebar-fixed.navbar-collapse {
|
||||
width: @container-lg !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
|
||||
.main-container.container .sidebar.sidebar-fixed.navbar-collapse
|
||||
{
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: @container-sm !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.main-container.container .sidebar.sidebar-fixed.navbar-collapse {
|
||||
.sidebar-shortcuts {
|
||||
max-height: none;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
.enable_container_horizontal_menu();
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
|
||||
.sidebar.h-sidebar {
|
||||
//reset .compact & .menu-min
|
||||
.nav-list > li > a > .menu-text {
|
||||
background-color: transparent !important;
|
||||
border-width: 0 !important;
|
||||
.box-shadow(none) !important;
|
||||
display: inline !important;
|
||||
|
||||
margin: auto !important;
|
||||
padding: 0 !important;
|
||||
|
||||
position: static !important;
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
text-align: inherit;
|
||||
}
|
||||
.nav-list > li > a > .menu-icon {
|
||||
height: auto;
|
||||
font-size: @nav-item-icon-size;
|
||||
}
|
||||
/**
|
||||
&.compact {
|
||||
margin-top: 0 !important;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
padding-top: 9px;
|
||||
}
|
||||
.sidebar-shortcuts-large {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.sidebar-shortcuts-mini {
|
||||
max-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-list > li:before {
|
||||
top: 0;
|
||||
}
|
||||
.nav-list > li > a .badge, .nav-list > li > a .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: auto;
|
||||
margin: auto;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav-list > li > a > .menu-text {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-width: 120%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
border-right: 1px solid #79B0CE;
|
||||
|
||||
line-height: 42px;
|
||||
background-color: #FFFFFF !important;
|
||||
white-space: nowrap;
|
||||
|
||||
.opacity(0);
|
||||
.transition(~"opacity 0.2s");
|
||||
z-index: -1;
|
||||
}
|
||||
.nav-list > li:hover > a > .menu-text {
|
||||
.opacity(1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nav-list > li > a > .menu-icon {
|
||||
position: static;
|
||||
height: 18px;
|
||||
|
||||
.opacity(1);
|
||||
.transition(~"opacity 0.2s");
|
||||
}
|
||||
|
||||
.nav-list > li:hover > a > .menu-icon {
|
||||
.opacity(0);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.enable_horizontal_menu();
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.menu-toggler + .sidebar.h-sidebar {
|
||||
margin-top: (@breadcrumb-height - 1) !important;
|
||||
}
|
||||
.sidebar.h-sidebar.responsive-min , .sidebar.h-sidebar.navbar-collapse {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
@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) {
|
||||
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}//@media
|
||||
|
||||
|
||||
|
||||
.enable_collapsible_responsive_menu_hover() when (@enable-collapsible-responsive-menu = true) {
|
||||
//reset .hover styles for small screens with .navbar-collapse
|
||||
@media (min-width: @screen-hover-menu) 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: max(@screen-compact-menu, @screen-hover-menu)) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
&.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();
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,304 @@
|
||||
.menu_min() {
|
||||
& , &.compact, &.navbar-collapse {
|
||||
width: @sidebar-min-width;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: (@sidebar-min-width);
|
||||
}
|
||||
|
||||
|
||||
.nav-list a {
|
||||
.badge , .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list .submenu .submenu a {
|
||||
.badge , .label {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li {
|
||||
> a {
|
||||
position:relative;
|
||||
|
||||
//first reset back to normal, to override things like .compact
|
||||
height: @nav-item-height;
|
||||
line-height: (@nav-item-height - 2);
|
||||
padding: 0;
|
||||
> .menu-icon {
|
||||
font-size: @nav-item-icon-size;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-right: 0;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
|
||||
> .menu-text {
|
||||
display: none;
|
||||
text-align: left;
|
||||
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: (@sidebar-min-width - 1);
|
||||
z-index: @zindex-submenu - 1;
|
||||
|
||||
width: (@sidebar-width - 14);
|
||||
height: (@nav-item-height + 2);
|
||||
line-height: (@nav-item-height - 1);
|
||||
|
||||
padding-left: 12px;
|
||||
border: 1px solid;
|
||||
}
|
||||
&.dropdown-toggle > .menu-text {
|
||||
top:-1px;
|
||||
border-width: 1px 1px 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > a > .menu-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.active > a:after {
|
||||
border-width: 10px 6px;
|
||||
top: 8px;
|
||||
}
|
||||
&.active.open > a:after {
|
||||
display: block;
|
||||
}
|
||||
&.active.open li.active > a:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
> .submenu {
|
||||
position: absolute;
|
||||
z-index: @zindex-sidebar-fixed + 1;
|
||||
left: (@sidebar-min-width - 1);
|
||||
top: -1px;
|
||||
|
||||
margin-top: 40px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
width: (@sidebar-width - 14);
|
||||
display: none !important;
|
||||
|
||||
|
||||
&:before {
|
||||
//hide the tree like submenu in minimized mode
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
//extra pixel
|
||||
//.submenu's border-top-color overlaps .submenu's border-right-color
|
||||
//so we add an extra pixel to change that point to border-right-color
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
|
||||
border-right: 1px solid;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
|
||||
li {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
margin-left: 0;
|
||||
padding-left: 22px;
|
||||
> .menu-icon {
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hover > .submenu {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
&.open > .submenu {//submenu is shown in non-minimized mode
|
||||
display: none;
|
||||
}
|
||||
&:hover > .submenu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//-li > .arrow
|
||||
.nav-list > li > .arrow {
|
||||
top: 10px;
|
||||
&:after , &:before {
|
||||
border-width: 8px;
|
||||
left: -16px;
|
||||
}
|
||||
&:before {
|
||||
left: -17px;
|
||||
}
|
||||
}
|
||||
.nav-list li > .arrow {
|
||||
right: -1px;
|
||||
}
|
||||
.nav-list > li:hover > .arrow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list > li.pull_up > .arrow {
|
||||
z-index: @zindex-sidebar-fixed + 2;
|
||||
&:after , &:before {
|
||||
border-width: 10px;
|
||||
left: -20px;
|
||||
}
|
||||
&:before {
|
||||
left: -21px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//sidebar shortcuts
|
||||
.sidebar-shortcuts {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
z-index: 1;//to appear above breadcrumbs
|
||||
}
|
||||
.sidebar-shortcuts-mini {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-shortcuts-large {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: @sidebar-min-width - 1;
|
||||
|
||||
width: (@sidebar-width - 8);
|
||||
|
||||
padding: 0 2px 3px;
|
||||
|
||||
border: 1px solid;
|
||||
border-top-width: 0;
|
||||
}
|
||||
.sidebar-shortcuts:hover .sidebar-shortcuts-large{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-toggle { //minimized collapse button
|
||||
&:before {
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
> .@{icon} {
|
||||
font-size: 13px;
|
||||
padding: 0 4px;
|
||||
line-height: 15px;
|
||||
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.nav-list > li > .submenu {
|
||||
li > .submenu > li {
|
||||
> a {
|
||||
//3rd level
|
||||
margin-left: 2px !important;
|
||||
padding-left: 30px;
|
||||
}
|
||||
> .submenu > li > a {
|
||||
//4th level
|
||||
margin-left: 2px !important;
|
||||
padding-left: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
li.active > a:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_submenu_hover_min() when(@enable-submenu-hover = true) {
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.nav-list li.hover > .submenu {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-list > li > .submenu li.hover > .submenu > li > a,
|
||||
.nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_submenu_hover_min();
|
||||
|
||||
|
||||
|
||||
.nav-list li.active.open > .submenu > li.active > a:after {
|
||||
display: none;
|
||||
}
|
||||
//hide the active menu indicator on hover (it goes behind the li > .arrow)
|
||||
.nav-list > li.active:hover > a:after,
|
||||
.nav-list > li.active.open:hover > a:after {
|
||||
display: none;
|
||||
}
|
||||
.nav-list > li.active:hover:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.enable_compact_menu_min() when(@enable-compact-menu = true) {
|
||||
@media (min-width: @screen-compact-menu) {
|
||||
&.compact .nav-list > li > a {
|
||||
height: 39px;
|
||||
line-height: 37px;
|
||||
padding: 0 16px 0 7px;
|
||||
position: relative;
|
||||
}
|
||||
&.compact .nav-list > li > a > .menu-icon {
|
||||
font-size: @nav-item-icon-size;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_compact_menu_min();
|
||||
|
||||
}
|
||||
|
||||
|
||||
.enable_sidebar_collapse() when(@enable-sidebar-collapse = true) {
|
||||
.sidebar.menu-min {
|
||||
.menu_min();
|
||||
}
|
||||
}
|
||||
.enable_sidebar_collapse();
|
||||
@@ -0,0 +1,162 @@
|
||||
.enable_old_menu_toggle_button() when(@enable-old-menu-toggle-button = true) {
|
||||
.enable_responsive_menu_otb() when(@enable-responsive-menu = true) {
|
||||
|
||||
|
||||
@toggler-text: "MENU";
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.menu-toggler + .sidebar.responsive {
|
||||
margin-top: @breadcrumb-height - 1;
|
||||
}
|
||||
.main-container .menu-toggler {
|
||||
display: block;
|
||||
position: absolute;
|
||||
//left: auto;
|
||||
z-index: @zindex-sidebar-fixed - 1;
|
||||
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
margin-right: 2px;
|
||||
|
||||
line-height: normal;
|
||||
padding-left: 33px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 1px;
|
||||
|
||||
font-size: @font-size-old-toggle-button;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
|
||||
.box-sizing(content-box);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid @sidebar-toggler-line-1;
|
||||
border-bottom: 1px solid @sidebar-toggler-line-2;
|
||||
height: 2px;
|
||||
width: 24px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 13px;
|
||||
left: 4px;
|
||||
|
||||
.transition(~"all 0.1s ease");
|
||||
-o-transition: none;
|
||||
|
||||
.box-sizing(content-box);
|
||||
}
|
||||
|
||||
|
||||
&:after {
|
||||
border-top: 1px solid @sidebar-toggler-line-3;
|
||||
border-bottom: 1px solid @sidebar-toggler-line-4;
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 24px;
|
||||
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 4px;
|
||||
|
||||
.transition(~"all 0.1s ease");
|
||||
-o-transition: none;
|
||||
|
||||
.box-sizing(content-box);
|
||||
}
|
||||
|
||||
&.display {
|
||||
&:before {
|
||||
height: 4px;
|
||||
top: 8px;
|
||||
border-width: 2px;
|
||||
}
|
||||
&:after {
|
||||
height: 4px;
|
||||
top: 20px;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .toggler-text {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -9px;
|
||||
left: 0;
|
||||
border: 1px solid transparent;
|
||||
border-width: 9px 42px 0;
|
||||
|
||||
border-top-color: @sidebar-toggler-background;
|
||||
-moz-border-top-colors: @sidebar-toggler-background;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: @toggler-text;
|
||||
|
||||
color: @sidebar-toggler-color;
|
||||
|
||||
position: absolute;
|
||||
left: -8px;//change these to adjust text placement
|
||||
top: -41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//hide the .nav-list when moving up, otherwise it will move over .menu-toggler!
|
||||
.menu-toggler + .responsive.sidebar-scroll .nav-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-tiny) {
|
||||
.main-container .menu-toggler {
|
||||
width: 0;
|
||||
> .toggler-text {
|
||||
border-width: 7px 16px;
|
||||
bottom: -14px;
|
||||
|
||||
&:after {
|
||||
font-size: floor(@font-size-old-toggle-button * 0.75);
|
||||
font-weight: normal;
|
||||
color: #FFF;
|
||||
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
top: -42px;
|
||||
}
|
||||
}
|
||||
|
||||
&:before , &:after {
|
||||
margin-top: 8px;
|
||||
}
|
||||
&.display {
|
||||
&:before , &:after {
|
||||
height: 2px;
|
||||
border-width: 1px;
|
||||
}
|
||||
&:before {
|
||||
top: 13px;
|
||||
}
|
||||
&:after {
|
||||
top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.enable_responsive_menu_otb();
|
||||
}
|
||||
.enable_old_menu_toggle_button();
|
||||
@@ -0,0 +1,197 @@
|
||||
//side menu toggler in mobile view
|
||||
@sidebar-toggler-background: #444;
|
||||
@sidebar-toggler-color: #FFF;
|
||||
|
||||
|
||||
.main-container .menu-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.enable_responsive_menu() when(@enable-responsive-menu = true) {
|
||||
@duration : 0.2s;
|
||||
|
||||
//responsive sidebar
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.responsive {
|
||||
.box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.15)");
|
||||
|
||||
z-index: @zindex-sidebar-fixed;
|
||||
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
|
||||
.transform(translateX(-@sidebar-width - 10));
|
||||
//"left" or "margin-left" transition is slow on Chrome, so we use translateX
|
||||
-webkit-transition: -webkit-transform @duration linear 0s, max-height 0s linear @duration;
|
||||
-moz-transition: -moz-transform @duration linear 0s, max-height 0s linear @duration;
|
||||
-o-transition: -o-transform @duration linear 0s, max-height 0s linear @duration;
|
||||
transition: transform @duration linear 0s, max-height 0s linear @duration;
|
||||
|
||||
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
//top: auto has a problem with android default browser if sidebar is fixed
|
||||
|
||||
left: @sidebar-width;
|
||||
margin-left: -(@sidebar-width);
|
||||
//why are we doing this?
|
||||
//we don't use "position: absolute" so that our page's height is at least as tall as .sidebar
|
||||
//and therefore our page background is white when sidebar is expanded (whitened by .main-container:before) (it won't happen on position: absolute)
|
||||
//but "position: relative" will push ".main-content" to left
|
||||
//so we use negative "margin-left" on .sidebar to get more space and bring back .main-content
|
||||
//and then we move .sidebar again back to its place using "left" property
|
||||
//so it will look like the "position: absolute" alternative, but it's not
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-compact-menu) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive.compact {
|
||||
.transform(translateX(-@sidebar-compact-width - 10));
|
||||
|
||||
&.push_away.display + .main-content {
|
||||
.transform(translateX(@sidebar-compact-width));
|
||||
}
|
||||
.navbar.navbar-fixed-top + .main-container & {
|
||||
&.push_away.display ~ .footer .footer-inner {
|
||||
.transform(translateX(@sidebar-compact-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive {
|
||||
&.menu-min {
|
||||
.transform(translateX(-@sidebar-min-width - 10));
|
||||
}
|
||||
|
||||
&.display {
|
||||
.transform(none) !important;//to override .rtl's
|
||||
overflow: visible;
|
||||
max-height: 2000px;
|
||||
|
||||
-webkit-transition-delay: 0s;
|
||||
-moz-transition-delay: 0s;
|
||||
-o-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
//push .main-content to left
|
||||
&.push_away {
|
||||
.box-shadow(none) !important;//to override .RTL's
|
||||
&:before {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
-webkit-transition: -webkit-transform @duration linear 0s;
|
||||
-moz-transition: -moz-transform @duration linear 0s;
|
||||
-o-transition: -o-transform @duration linear 0s;
|
||||
transition: transform @duration linear 0s;
|
||||
}
|
||||
&.display + .main-content {
|
||||
.transform(translateX(@sidebar-width));
|
||||
}
|
||||
&.display.menu-min + .main-content {
|
||||
.transform(translateX(@sidebar-min-width));
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-fixed-top + .main-container & {
|
||||
&.push_away {
|
||||
&:before {
|
||||
height: 5000px;
|
||||
}
|
||||
|
||||
.enable_footer_responsive_menu_push() when (@enable-footer = true) {
|
||||
~ .footer .footer-inner {
|
||||
-webkit-transition: -webkit-transform @duration linear 0s;
|
||||
-moz-transition: -moz-transform @duration linear 0s;
|
||||
-o-transition: -o-transform @duration linear 0s;
|
||||
transition: transform @duration linear 0s;
|
||||
}
|
||||
&.display ~ .footer .footer-inner {
|
||||
.transform(translateX(@sidebar-width));
|
||||
}
|
||||
&.display.menu-min ~ .footer .footer-inner {
|
||||
.transform(translateX(@sidebar-min-width));
|
||||
}
|
||||
}
|
||||
.enable_footer_responsive_menu_push();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.nav-list > li.active:after {
|
||||
height: @nav-item-height + 2;
|
||||
}
|
||||
.nav-list li li.active > a:after {
|
||||
display: none;
|
||||
}
|
||||
&.menu-min .nav-list > li.active:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.enable_container_responsive_1() when(@enable-container = true) {
|
||||
//maybe disable transition when it is not good enough!
|
||||
@media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
|
||||
.main-container.container .sidebar.responsive {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
|
||||
display: none;
|
||||
&.display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.push_away {
|
||||
+ .main-content, ~ .footer .footer-inner {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
|
||||
.transform(none) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_container_responsive_1();
|
||||
|
||||
}
|
||||
.enable_responsive_menu();
|
||||
|
||||
|
||||
|
||||
//************************************************************************************
|
||||
//remove the following to disable fixed sidebar (style1 - default) on smaller devices
|
||||
//if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.responsive.sidebar-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.main-container .menu-toggler.fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
z-index: @zindex-sidebar-fixed - 1;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
//sidebar is automatically minimized in smaller views
|
||||
|
||||
|
||||
.enable_minimized_responsive_menu() when(@enable-minimized-responsive-menu = true) {
|
||||
|
||||
.sidebar-toggle.sidebar-expand {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.menu-toggler.invisible {
|
||||
position: fixed;
|
||||
z-index: -999;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.sidebar.responsive-min {
|
||||
.menu_min();
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-toggle.sidebar-collapse {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-toggle.sidebar-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: @sidebar-min-width !important;
|
||||
.breadcrumb {
|
||||
margin-left: @breadcrumb-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.responsive-max {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: @sidebar-width;
|
||||
margin-left: -(@sidebar-width);
|
||||
|
||||
z-index: @zindex-sidebar-fixed;
|
||||
|
||||
.sidebar-toggle {
|
||||
&.sidebar-collapse {
|
||||
display: none;
|
||||
}
|
||||
&.sidebar-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: (@sidebar-min-width) !important;
|
||||
.breadcrumb {
|
||||
margin-left: @breadcrumb-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.enable_minimized_responsive_menu();
|
||||
@@ -0,0 +1,225 @@
|
||||
.enable_collapsible_responsive_menu() when(@enable-collapsible-responsive-menu = true) {
|
||||
|
||||
//3rd style responsive menu (the collapsible menu)
|
||||
|
||||
@media only screen and (min-width: @grid-float-breakpoint) {
|
||||
.sidebar.navbar-collapse {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
position: relative;
|
||||
float: none !important;//to override .rtl's
|
||||
margin-top: auto;
|
||||
z-index: 1;//for box-shadow to be visible
|
||||
|
||||
width: 100% !important;
|
||||
max-height: @pre-scrollable-max-height;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-list > li:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.nav-list > li > a {
|
||||
padding-top: 10px !important;//to override .compact, etc
|
||||
padding-bottom: 10px !important;
|
||||
|
||||
line-height: 20px !important;
|
||||
height: @nav-item-height + 2 !important;
|
||||
}
|
||||
.nav-list > li:before {
|
||||
height: @nav-item-height + 4 !important;
|
||||
}
|
||||
.nav-list > li.active:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//-li > .arrow
|
||||
li > .arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-list li > .submenu {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
padding: 3px 0 6px !important;
|
||||
max-height: none !important;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
+ .main-content {
|
||||
margin-left: 0 !important;
|
||||
.breadcrumb {
|
||||
margin-left: @breadcrumb-margin-left;
|
||||
}
|
||||
}
|
||||
|
||||
//first sidebar scroll style
|
||||
.nav-wrap + .ace-scroll {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.menu-min {
|
||||
.nav-list > li > .submenu {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: auto;
|
||||
z-index: auto;
|
||||
|
||||
margin-top: auto !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
border-width: 1px 0 0 0;
|
||||
.box-shadow(none) !important;//to override .rtl's
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
> li:before {
|
||||
display: block;
|
||||
}
|
||||
li > a {
|
||||
padding-left: 37px !important;
|
||||
> .menu-icon {
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//hide the extra pixel
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list > li > a:hover:before {// the left side border on hover
|
||||
width:3px;
|
||||
}
|
||||
|
||||
.nav-list > li > a {
|
||||
text-align: left;
|
||||
padding-left: 7px;
|
||||
}
|
||||
.nav-list > li > a > .menu-icon {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.nav-list > li > a > .menu-text {
|
||||
position: relative;
|
||||
display: inline !important;
|
||||
line-height: normal;
|
||||
padding-left: 0;
|
||||
height: auto;
|
||||
|
||||
top: auto;
|
||||
left: auto;
|
||||
z-index: auto;
|
||||
width: auto;
|
||||
|
||||
border-width: 0 !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
.box-shadow(none) !important;
|
||||
}
|
||||
.nav-list a > .arrow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list > li:hover > .submenu {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-list > li.active > .submenu {
|
||||
display: block !important;
|
||||
}
|
||||
.nav-list > li > .submenu.nav-show {
|
||||
display: block !important;
|
||||
}
|
||||
.nav-list > li > .submenu.nav-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-shortcuts-large {
|
||||
display: block;
|
||||
position: static;
|
||||
.box-shadow(none) !important;//to override .rtl's;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
|
||||
padding: 0 !important;//override that of .menu-min
|
||||
}
|
||||
.sidebar-shortcuts-mini {
|
||||
display: none;
|
||||
}
|
||||
}//menu-min
|
||||
|
||||
|
||||
.nav-list a {
|
||||
.badge , .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list > li.active:after,
|
||||
.nav-list li.active > a:before,
|
||||
.nav-list li.active > a:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
//.highlight
|
||||
.nav-list > li.highlight.active > a {
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enable_hover_submenu_responsive_style_3() when(@enable-submenu-hover = true) {
|
||||
@media (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
.nav-list > li > .submenu li.hover > .submenu > li > a,
|
||||
.nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_hover_submenu_responsive_style_3();
|
||||
|
||||
|
||||
//if .sidebar is .navbar-collapse, and .navbar is fixed, make .sidebar fixed as well
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-fixed-top + .main-container .sidebar.navbar-collapse {
|
||||
position: fixed;
|
||||
z-index: @zindex-sidebar-fixed;
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-fixed-top + .main-container.container .sidebar.navbar-collapse {
|
||||
width: @container-sm !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.enable_collapsible_responsive_menu();
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
//sidebar toggle
|
||||
.sidebar {
|
||||
|
||||
.sidebar-toggle {
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
> .@{icon} {
|
||||
padding: 0 5px;
|
||||
line-height: 18px;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: @font-size-sidebar-minimize-icon;
|
||||
|
||||
border-radius: 100%;
|
||||
border: 1px solid;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
height: 0;
|
||||
border-top: 1px solid;
|
||||
border-color: inherit;
|
||||
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//sidebar shortcuts icon
|
||||
.sidebar-shortcuts {
|
||||
text-align: center;
|
||||
|
||||
min-height: @breadcrumb-height - 1;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
border: 0 solid;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-shortcuts-large {
|
||||
line-height: @breadcrumb-height - 4;
|
||||
|
||||
> .btn {
|
||||
text-align:center;
|
||||
width: 41px;
|
||||
line-height: 24px;
|
||||
|
||||
padding: 0;
|
||||
border-width: 4px;
|
||||
|
||||
> .@{icon} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-shortcuts-mini {
|
||||
display: none;
|
||||
font-size: 0;
|
||||
width: 42px;
|
||||
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
|
||||
> .btn {
|
||||
border-width: 0 !important;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
padding: 8px !important;
|
||||
margin: 1px;
|
||||
|
||||
border-radius: 0 !important;
|
||||
.opacity(0.85);
|
||||
}
|
||||
}
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
::safari-only, .sidebar-shortcuts-mini > .btn {
|
||||
//safari only
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
.sidebar.sidebar-fixed {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
float: none !important;
|
||||
|
||||
z-index: @zindex-sidebar-fixed;//???!
|
||||
|
||||
&:before {
|
||||
height: 5000px;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//android's default browser has a problem with "top: auto" when fixed
|
||||
body.mob-safari {
|
||||
.sidebar.sidebar-fixed {
|
||||
top: @navbar-min-height;
|
||||
}
|
||||
@media (max-width: @screen-topbar-down) {
|
||||
.navbar-fixed-top:not(.navbar-collapse) + .main-container .sidebar-fixed {
|
||||
top: (@navbar-min-height * 2);
|
||||
}
|
||||
}
|
||||
//also when .navbar is fixed, .responsive sidebar becomes automatically fixed
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-fixed-top + .main-container .sidebar.responsive {
|
||||
top: @navbar-min-height;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-topbar-down) {
|
||||
.navbar-fixed-top + .main-container .sidebar.responsive {
|
||||
top: (@navbar-min-height * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
//http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
|
||||
//webkit & Chrome22+ special case
|
||||
//webkit is not following the standard specs as of Chrome22+
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
//like it happens in Firefox&IE, we expect when we set "z-index:auto" for fixed position .sidebar,
|
||||
//the child .submenu elements "z-index" is independent
|
||||
//and for example a "z-index:1031" .submenu appears on top of a fixed .navbar with "z-index:1030"
|
||||
//and a "z-index:1010" .popover appears on top of ".sidebar" but below ".submenu"
|
||||
//but webkit defines a new stacking context on "fixed" position elements(.sidebar here)
|
||||
//and the above doesn't happen, in fact .submenu inside fixed .sidebar with "z-index:auto" will appear below everything
|
||||
//so we set a good(?) "z-index" for .sidebar, but still it's not as good as standard specs (such as in Firefox)
|
||||
//and we may need other workarounds!
|
||||
//and you may change it based on your needs
|
||||
|
||||
//it's possible have standard functionality in Chrome by going to:
|
||||
//chrome://flags/#fixed-position-creates-stacking-context
|
||||
//changing "Fixed position elements create stacking contexts" to "Disabled"
|
||||
//and removing the following rules
|
||||
//and assignning a higher "@submenu-zindex"
|
||||
|
||||
.sidebar.sidebar-fixed {
|
||||
z-index: @zindex-sidebar-fixed;//???!
|
||||
|
||||
&::before {
|
||||
height: 5000px;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
//************************************************************************************
|
||||
//remove the following to disable fixed sidebar (style1 - default) on smaller devices
|
||||
//if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.responsive.sidebar-fixed {
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
//if `.menu-toggler` button is inside `fixed .navbar` let sidebar become fixed as well
|
||||
.navbar-fixed-top + .main-container > .responsive {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
//but if `.menu-toggler` button is inside .main-container, then `fixed .navbar` should have no effect
|
||||
.navbar-fixed-top + .main-container > .menu-toggler + .responsive {
|
||||
position: absolute;
|
||||
left: (@sidebar-width);
|
||||
margin-left: -(@sidebar-width);
|
||||
-moz-backface-visibility: visible;
|
||||
}
|
||||
//unless specified as fixed
|
||||
.navbar-fixed-top + .main-container > .menu-toggler + .responsive.sidebar-fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive.sidebar-fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.main-container .menu-toggler.fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
z-index: @zindex-sidebar-fixed - 1;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
//for responsive style # 2
|
||||
//becuase ".sidebar.responsive-max" is "position: relative" & "margin-left: -190px"
|
||||
.sidebar.sidebar-fixed.responsive-max {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
//the arrow connecting "LI" to ".SUBMENU"
|
||||
//-li > .arrow
|
||||
.nav-list li {
|
||||
> .arrow {
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 1px;
|
||||
|
||||
z-index: @zindex-submenu + 1;
|
||||
|
||||
&:before, &:after {
|
||||
border: 1px solid transparent;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
|
||||
content: "";
|
||||
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
z-index: 1;//above .submenu
|
||||
left: -21px;
|
||||
}
|
||||
&:after {
|
||||
z-index: 2;//above .arrow:before
|
||||
}
|
||||
}
|
||||
|
||||
//don't display when there's no submenu
|
||||
&:hover > a + .arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
&.hover:hover > a.dropdown-toggle + .arrow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user