app.nav.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. .nav-sub{
  2. opacity: 0;
  3. height: 0;
  4. overflow: hidden;
  5. margin-left: -20px;
  6. .transition(all .2s ease-in-out 0s);
  7. .active &,
  8. .app-aside-folded li:hover &,
  9. .app-aside-folded li:focus &,
  10. .app-aside-folded li:active &{
  11. opacity: 1;
  12. margin-left: 0;
  13. height: auto !important;
  14. overflow: auto;
  15. }
  16. }
  17. .nav-sub-header {
  18. display: none !important;
  19. a{
  20. padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px;
  21. }
  22. }
  23. .navi {
  24. ul.nav {
  25. li {
  26. display: block;
  27. position: relative;
  28. li {
  29. a {
  30. padding-left: @app-aside-nav-height + 15px;
  31. }
  32. }
  33. a {
  34. font-weight: normal;
  35. text-transform: none;
  36. display: block;
  37. padding: floor((@app-aside-nav-height - @line-height-computed)/2) 20px;
  38. position: relative;
  39. .transition(background-color .2s ease-in-out 0s);
  40. .badge,
  41. .label {
  42. font-size: 11px;
  43. padding: 2px 5px;
  44. margin-top: 2px;
  45. }
  46. > i {
  47. margin: floor(-(@app-aside-nav-height - @line-height-computed)/2) -10px;
  48. line-height: @app-aside-nav-height;
  49. width: @app-aside-nav-height;
  50. float: left;
  51. margin-right: 5px;
  52. text-align: center;
  53. position: relative;
  54. overflow: hidden;
  55. &:before {
  56. position: relative;
  57. z-index: 2;
  58. }
  59. }
  60. }
  61. }
  62. }
  63. }
  64. @media (min-width: 768px) {
  65. .app-aside-folded{
  66. .nav-sub-header{
  67. display: block !important;
  68. a{
  69. padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px !important;
  70. }
  71. }
  72. .navi{
  73. > ul {
  74. > li {
  75. > a {
  76. position: relative;
  77. padding: 0;
  78. text-align: center;
  79. height: @app-aside-folded-nav-height;
  80. border: none;
  81. span {
  82. display: none;
  83. &.pull-right{
  84. display: none !important;
  85. }
  86. }
  87. i{
  88. width: auto;
  89. float: none;
  90. display: block;
  91. font-size: 16px;
  92. margin: 0;
  93. line-height: @app-aside-folded-nav-height;
  94. border: none !important;
  95. b{
  96. left: 0 !important;
  97. }
  98. }
  99. .badge,
  100. .label{
  101. position: absolute;
  102. right: 12px;
  103. top: 8px;
  104. z-index: 3;
  105. }
  106. }
  107. }
  108. ul{
  109. height: 0 !important;
  110. position: absolute;
  111. left: 100%;
  112. top: 0 !important;
  113. z-index: 1050;
  114. width: @app-aside-width;
  115. .box-shadow(0 2px 6px rgba(0,0,0,0.1));
  116. }
  117. }
  118. li {
  119. li{
  120. a{
  121. padding-left: 20px !important;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. .app-aside-folded.app-aside-fixed .app-aside{
  128. > ul.nav {
  129. &:before{
  130. content:"";
  131. width: @app-aside-folded-width;
  132. height: @app-aside-folded-nav-height;
  133. position: absolute;
  134. left: -@app-aside-folded-width;
  135. top: 0;
  136. }
  137. z-index: 1010;
  138. opacity: 1;
  139. height: auto;
  140. overflow: visible;
  141. overflow-y: auto;
  142. display: block;
  143. width: @app-aside-width + @app-aside-folded-width;
  144. left: @app-aside-folded-width + 20;
  145. position: fixed;
  146. -webkit-overflow-scrolling: touch;
  147. a{
  148. padding-left: 20px !important;
  149. padding-right: 20px !important;
  150. }
  151. }
  152. }
  153. }