123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- .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;
- }
- }
- }
- }
|