.nav-sub{ opacity: 0; height: 0; overflow: hidden; margin-left: -20px; .transition(all .2s ease-in-out 0s); .active &, .app-aside-folded li:hover &, .app-aside-folded li:focus &, .app-aside-folded li:active &{ opacity: 1; margin-left: 0; height: auto !important; overflow: auto; } } .nav-sub-header { display: none !important; a{ padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px; } } .navi { ul.nav { li { display: block; position: relative; li { a { padding-left: @app-aside-nav-height + 15px; } } a { font-weight: normal; text-transform: none; display: block; padding: floor((@app-aside-nav-height - @line-height-computed)/2) 20px; position: relative; .transition(background-color .2s ease-in-out 0s); .badge, .label { font-size: 11px; padding: 2px 5px; margin-top: 2px; } > i { margin: floor(-(@app-aside-nav-height - @line-height-computed)/2) -10px; line-height: @app-aside-nav-height; width: @app-aside-nav-height; float: left; margin-right: 5px; text-align: center; position: relative; overflow: hidden; &:before { position: relative; z-index: 2; } } } } } } @media (min-width: 768px) { .app-aside-folded{ .nav-sub-header{ display: block !important; a{ padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px !important; } } .navi{ > ul { > li { > a { position: relative; padding: 0; text-align: center; height: @app-aside-folded-nav-height; border: none; span { display: none; &.pull-right{ display: none !important; } } i{ width: auto; float: none; display: block; font-size: 16px; margin: 0; line-height: @app-aside-folded-nav-height; border: none !important; b{ left: 0 !important; } } .badge, .label{ position: absolute; right: 12px; top: 8px; z-index: 3; } } } ul{ height: 0 !important; position: absolute; left: 100%; top: 0 !important; z-index: 1050; width: @app-aside-width; .box-shadow(0 2px 6px rgba(0,0,0,0.1)); } } li { li{ a{ padding-left: 20px !important; } } } } } .app-aside-folded.app-aside-fixed .app-aside{ > ul.nav { &:before{ content:""; width: @app-aside-folded-width; height: @app-aside-folded-nav-height; position: absolute; left: -@app-aside-folded-width; top: 0; } z-index: 1010; opacity: 1; height: auto; overflow: visible; overflow-y: auto; display: block; width: @app-aside-width + @app-aside-folded-width; left: @app-aside-folded-width + 20; position: fixed; -webkit-overflow-scrolling: touch; a{ padding-left: 20px !important; padding-right: 20px !important; } } } }