| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | @sidebar-menu-min-text-height: (@nav-item-height + 2); |
| A | 2 | |
| 3 | .menu_min() { | |
| 4 | & , &.compact, &.navbar-collapse { | |
| 5 | width: @sidebar-min-width; | |
| 6 | } | |
| 7 | ||
| 8 | + .main-content { | |
| 9 | margin-left: (@sidebar-min-width); | |
| 10 | } | |
| 11 | ||
| 12 | ||
| 13 | .nav-list a { | |
| 14 | .badge , .label { | |
| 15 | position: relative; | |
| 16 | top: -1px; | |
| 17 | right: auto; | |
| 18 | left: 4px; | |
| 19 | } | |
| 20 | } | |
| 21 | ||
| 22 | .nav-list .submenu .submenu a { | |
| 23 | .badge , .label { | |
| 24 | top: 0; | |
| 25 | } | |
| 26 | } | |
| 27 | ||
| 28 | ||
| 29 | .nav-list > li { | |
| 30 | > a { | |
| 31 | position:relative; | |
| 32 | ||
| 33 | //first reset back to normal, to override things like .compact | |
| 34 | height: @nav-item-height; | |
| 35 | line-height: (@nav-item-height - 2); | |
| 36 | padding: 0; | |
| 37 | > .menu-icon { | |
| 38 | font-size: @nav-item-icon-size; | |
| 39 | height: auto; | |
| 40 | line-height: inherit; | |
| 41 | display: inline-block; | |
| 42 | vertical-align: sub; | |
| 43 | margin-right: 0; | |
| 44 | width: 44px; | |
| 45 | } | |
| 46 | ||
| 47 | ||
| 48 | > .menu-text { | |
| 49 | display: none; | |
| 50 | text-align: left; | |
| 51 | ||
| 52 | position: absolute; | |
| 53 | top: -1px; | |
| 54 | left: (@sidebar-min-width - 1); | |
| 55 | z-index: @zindex-submenu - 1; | |
| 56 | ||
| 57 | width: (@sidebar-width - 14); | |
| 58 | height: @sidebar-menu-min-text-height; | |
| 59 | line-height: (@nav-item-height - 1); | |
| 60 | ||
| 61 | padding-left: 12px; | |
| 62 | border: 1px solid; | |
| 63 | } | |
| 64 | &.dropdown-toggle > .menu-text { | |
| 65 | top:-1px; | |
| 66 | border-width: 1px 1px 0; | |
| 67 | } | |
| 68 | ||
| 69 | .arrow { | |
| 70 | display: none; | |
| 71 | } | |
| 72 | } | |
| 73 | ||
| 74 | &:hover > a > .menu-text, | |
| 75 | &.hover-show > a > .menu-text { | |
| 76 | display: block; | |
| 77 | } | |
| 78 | ||
| 79 | &.active > a:after { | |
| 80 | border-width: 10px 6px; | |
| 81 | top: 8px; | |
| 82 | } | |
| 83 | &.active.open > a:after { | |
| 84 | display: block; | |
| 85 | } | |
| 86 | &.active.open li.active > a:after { | |
| 87 | display: none; | |
| 88 | } | |
| 89 | ||
| 90 | ||
| 91 | ||
| 92 | > .submenu { | |
| 93 | position: absolute; | |
| 94 | z-index: @zindex-submenu; | |
| 95 | left: (@sidebar-min-width - 1); | |
| 96 | top: -1px; | |
| 97 | ||
| 98 | margin-top: 40px; | |
| 99 | padding-bottom: 2px; | |
| 100 | ||
| 101 | width: (@sidebar-width - 14); | |
| 102 | display: none !important; | |
| 103 | ||
| 104 | ||
| 105 | //to override bootstrap "collapse" applied to submenus in angular version | |
| 106 | height: auto !important; | |
| 107 | visibility: visible !important; | |
| 108 | ||
| 109 | ||
| 110 | &:before { | |
| 111 | //hide the tree like submenu in minimized mode | |
| 112 | display: none; | |
| 113 | } | |
| 114 | &:after { | |
| 115 | //extra pixel | |
| 116 | //.submenu's border-top-color overlaps .submenu's border-right-color | |
| 117 | //so we add an extra pixel to change that point to border-right-color | |
| 118 | content: ""; | |
| 119 | display: block; | |
| 120 | height: 1px; | |
| 121 | width: 1px; | |
| 122 | ||
| 123 | position: absolute; | |
| 124 | right: -1px; | |
| 125 | top: -1px; | |
| 126 | ||
| 127 | border-right: 1px solid; | |
| 128 | border-right-color: inherit; | |
| 129 | } | |
| 130 | ||
| 131 | li { | |
| 132 | &:before { | |
| 133 | display: none; | |
| 134 | } | |
| 135 | ||
| 136 | > a { | |
| 137 | margin-left: 0; | |
| 138 | padding-left: 22px; | |
| 139 | > .menu-icon { | |
| 140 | left: 4px; | |
| 141 | } | |
| 142 | } | |
| 143 | } | |
| 144 | } | |
| 145 | ||
| 146 | &.hover > .submenu { | |
| 147 | padding-bottom: 0; | |
| 148 | } | |
| 149 | ||
| 150 | ||
| 151 | &.open > .submenu {//submenu is shown in non-minimized mode | |
| 152 | display: none; | |
| 153 | } | |
| 154 | ||
| 155 | ||
| 156 | &:hover > .submenu, | |
| 157 | &.hover-show > .submenu { | |
| 158 | display: block !important; | |
| 159 | } | |
| 160 | } | |
| 161 | ||
| 162 | ||
| 163 | //-li > .arrow | |
| 164 | .nav-list > li > .arrow { | |
| 165 | top: 10px; | |
| 166 | &:after , &:before { | |
| 167 | border-width: 8px; | |
| 168 | left: -16px; | |
| 169 | } | |
| 170 | &:before { | |
| 171 | left: -17px; | |
| 172 | } | |
| 173 | } | |
| 174 | .nav-list li > .arrow { | |
| 175 | right: -1px; | |
| 176 | } | |
| 177 | .nav-list > li:hover > .arrow, | |
| 178 | .nav-list > li.hover-show > .arrow { | |
| 179 | display: block; | |
| 180 | } | |
| 181 | ||
| 182 | .nav-list > li.pull_up > .arrow { | |
| 183 | z-index: @zindex-submenu + 1; | |
| 184 | &:after , &:before { | |
| 185 | border-width: 10px; | |
| 186 | left: -20px; | |
| 187 | } | |
| 188 | &:before { | |
| 189 | left: -21px; | |
| 190 | } | |
| 191 | } | |
| 192 | ||
| 193 | ||
| 194 | //sidebar shortcuts | |
| 195 | .sidebar-shortcuts { | |
| 196 | position: relative; | |
| 197 | overflow: visible; | |
| 198 | z-index: 1;//to appear above breadcrumbs | |
| 199 | } | |
| 200 | .sidebar-shortcuts-mini { | |
| 201 | display: block; | |
| 202 | } | |
| 203 | .sidebar-shortcuts-large { | |
| 204 | display: none; | |
| 205 | position: absolute; | |
| 206 | top: 0; | |
| 207 | left: @sidebar-min-width - 1; | |
| 208 | ||
| 209 | width: (@sidebar-width - 8); | |
| 210 | ||
| 211 | padding: 0 2px 3px; | |
| 212 | ||
| 213 | border: 1px solid; | |
| 214 | border-top-width: 0; | |
| 215 | } | |
| 216 | .sidebar-shortcuts:hover .sidebar-shortcuts-large, | |
| 217 | .sidebar-shortcuts.hover-show .sidebar-shortcuts-large { | |
| 218 | display: block; | |
| 219 | } | |
| 220 | ||
| 221 | .sidebar-toggle { //minimized collapse button | |
| 222 | &:before { | |
| 223 | left: 5px; | |
| 224 | right: 5px; | |
| 225 | } | |
| 226 | > .@{icon} { | |
| 227 | font-size: @font-size-sidebar-toggle; | |
| 228 | padding: 0 4px; | |
| 229 | line-height: 15px; | |
| 230 | ||
| 231 | border-width: 1px; | |
| 232 | } | |
| 233 | } | |
| 234 | ||
| 235 | ||
| 236 | ||
| 237 | ||
| 238 | .nav-list > li > .submenu { | |
| 239 | li > .submenu > li { | |
| 240 | > a { | |
| 241 | //3rd level | |
| 242 | margin-left: 2px;// !important; | |
| 243 | padding-left: 30px; | |
| 244 | } | |
| 245 | > .submenu > li > a { | |
| 246 | //4th level | |
| 247 | margin-left: 2px;// !important; | |
| 248 | padding-left: 45px; | |
| 249 | } | |
| 250 | } | |
| 251 | ||
| 252 | li.active > a:after { | |
| 253 | display: none; | |
| 254 | } | |
| 255 | } | |
| 256 | ||
| 257 | ||
| 258 | ||
| 259 | ||
| 260 | ||
| 261 | .nav-list li.active.open > .submenu > li.active > a:after { | |
| 262 | display: none; | |
| 263 | } | |
| 264 | //hide the active menu indicator on hover (it goes behind the li > .arrow) | |
| 265 | .nav-list > li.active:hover > a:after, | |
| 266 | .nav-list > li.active.hover-show > a:after, | |
| 267 | .nav-list > li.active.open:hover > a:after { | |
| 268 | display: none; | |
| 269 | } | |
| 270 | .nav-list > li.active:hover:after { | |
| 271 | display: none; | |
| 272 | } | |
| 273 | ||
| 274 | ||
| 275 | ||
| 276 | } | |
| 277 | ||
| 278 | ||
| 279 | .enable_sidebar_collapse() when(@enable-sidebar-collapse = true) { | |
| 280 | .sidebar.menu-min { | |
| 281 | .menu_min(); | |
| 282 | ||
| 283 | .enable_submenu_hover_min() when(@enable-submenu-hover = true) { | |
| 284 | @media (min-width: @screen-hover-menu) { | |
| 285 | .nav-list li.hover > .submenu { | |
| 286 | margin-left: 0; | |
| 287 | } | |
| 288 | .nav-list > li > .submenu li.hover > .submenu > li > a, | |
| 289 | .nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a { | |
| 290 | margin-left: 0 !important; | |
| 291 | } | |
| 292 | } | |
| 293 | } | |
| 294 | .enable_submenu_hover_min(); | |
| 295 | ||
| 296 | ||
| 297 | ||
| 298 | .enable_compact_menu_min() when(@enable-compact-menu = true) { | |
| 299 | @media (min-width: @screen-compact-menu) { | |
| 300 | &.compact .nav-list > li > a { | |
| 301 | height: 39px; | |
| 302 | line-height: 37px; | |
| 303 | padding: 0 16px 0 7px; | |
| 304 | position: relative; | |
| 305 | } | |
| 306 | &.compact .nav-list > li > a > .menu-icon { | |
| 307 | font-size: @nav-item-icon-size; | |
| 308 | height: auto; | |
| 309 | line-height: inherit; | |
| 310 | display: inline-block; | |
| 311 | vertical-align: sub; | |
| 312 | width: auto; | |
| 313 | } | |
| 314 | } | |
| 315 | } | |
| 316 | .enable_compact_menu_min(); | |
| 317 | ||
| 318 | } | |
| 319 | } | |
| 320 | .enable_sidebar_collapse(); | |
