| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | @h-sidebar-background: @nav-item-background; |
| A | 2 | @h-sidebar-preground: #E4E4E4; |
| 3 | @h-sidebar-preshadow: ~"0 -1px 1px 0 rgba(0, 0, 0, 0.05) inset"; | |
| 4 | ||
| 5 | @h-nav-item-border-active: #79B0CE; | |
| 6 | @h-nav-item-border-hover: #CEDDE5; | |
| 7 | ||
| 8 | @h-navbar-shadow: ~"0 2px 4px 0 rgba(0, 0, 0, 0.25)"; | |
| 9 | ||
| 10 | ||
| 11 | .enable_horizontal_menu() when (@enable-horizontal-menu = true) { | |
| 12 | @media only screen and (min-width: @grid-float-breakpoint) { | |
| 13 | .navbar.h-navbar { | |
| 14 | .box-shadow(@h-navbar-shadow); | |
| 15 | } | |
| 16 | ||
| 17 | .sidebar.h-sidebar { | |
| 18 | position: relative; | |
| 19 | float: none !important; | |
| 20 | width: auto;// !important; | |
| 21 | margin-top: 17px; | |
| 22 | ||
| 23 | border-width: 0 !important; | |
| 24 | box-shadow: none; | |
| 25 | ||
| 26 | &.menu-min, &.compact { | |
| 27 | width: auto; | |
| 28 | } | |
| 29 | ||
| 30 | &.sidebar-fixed { | |
| 31 | position: fixed; | |
| 32 | } | |
| 33 | &.no-gap { | |
| 34 | margin-top: auto; | |
| 35 | .nav-list { | |
| 36 | padding-top: 3px; | |
| 37 | } | |
| 38 | } | |
| 39 | ||
| 40 | &:before { | |
| 41 | display: block; | |
| 42 | position: absolute; | |
| 43 | z-index: -1; | |
| 44 | ||
| 45 | left:0 !important; | |
| 46 | right: 0 !important; | |
| 47 | top: -17px; | |
| 48 | bottom: auto; | |
| 49 | ||
| 50 | height: 17px; | |
| 51 | width: auto; | |
| 52 | ||
| 53 | border-width: 0; | |
| 54 | border-bottom: 1px solid; | |
| 55 | border-bottom-color: inherit; | |
| 56 | } | |
| 57 | ||
| 58 | &.lower-highlight .nav-list > li:before { | |
| 59 | top: 0; | |
| 60 | } | |
| 61 | .main-content & .nav-list > li:before { | |
| 62 | top: 0; | |
| 63 | } | |
| 64 | ||
| 65 | .nav-list { | |
| 66 | border-width: 0; | |
| 67 | border-bottom: 2px solid @h-nav-item-border-active; | |
| 68 | } | |
| 69 | .nav-list > li { | |
| 70 | float: left; | |
| 71 | ||
| 72 | border-width: 0 0 0 1px; | |
| 73 | margin-left: 0; | |
| 74 | ||
| 75 | &:last-child { | |
| 76 | border-right-width: 1px; | |
| 77 | } | |
| 78 | ||
| 79 | //the hover highlight line | |
| 80 | &:before { | |
| 81 | left: -1px; | |
| 82 | right: -1px; | |
| 83 | bottom: auto; | |
| 84 | top: -2px; | |
| 85 | ||
| 86 | max-width: none; | |
| 87 | width: auto; | |
| 88 | height: 2px; | |
| 89 | ||
| 90 | border-width: 0; | |
| 91 | } | |
| 92 | &.active:before { | |
| 93 | display: block; | |
| 94 | } | |
| 95 | &.active:after { | |
| 96 | display: none; | |
| 97 | } | |
| 98 | ||
| 99 | //&:hover, &.hover-show { | |
| 100 | //z-index: @zindex-submenu; | |
| 101 | //} | |
| 102 | //&.active { | |
| 103 | //z-index: @zindex-submenu + 1; | |
| 104 | //} | |
| 105 | } | |
| 106 | ||
| 107 | .nav-list > li:first-child { | |
| 108 | border-left-width: 0; | |
| 109 | margin-left: 0 | |
| 110 | } | |
| 111 | .sidebar-shortcuts + .nav-list > li:first-child { | |
| 112 | border-left-width: 1px; | |
| 113 | margin-left: -1px; | |
| 114 | } | |
| 115 | ||
| 116 | //!importants are for overriding .menu-min and .compact | |
| 117 | .nav-list > li > a { | |
| 118 | line-height: 22px; | |
| 119 | height: auto; | |
| 120 | ||
| 121 | padding: 10px 14px; | |
| 122 | ||
| 123 | > .menu-icon { | |
| 124 | display: block; | |
| 125 | margin: 1px 0 4px; | |
| 126 | line-height: inherit; | |
| 127 | width: auto; | |
| 128 | } | |
| 129 | ||
| 130 | > .arrow { | |
| 131 | display: none; | |
| 132 | } | |
| 133 | } | |
| 134 | ||
| 135 | ||
| 136 | ||
| 137 | ||
| 138 | //hover submenu | |
| 139 | .nav-list > li.hover { | |
| 140 | &.pull_right { | |
| 141 | float: none !important; | |
| 142 | } | |
| 143 | > .submenu { | |
| 144 | top: 100%; | |
| 145 | left: 1px; | |
| 146 | margin-top: auto; | |
| 147 | margin-left: -2px; | |
| 148 | width: @sidebar-width; | |
| 149 | z-index: @zindex-submenu; | |
| 150 | } | |
| 151 | &.pull_right > .submenu { | |
| 152 | left: auto; | |
| 153 | right: 1px; | |
| 154 | } | |
| 155 | ||
| 156 | //-li > .arrow | |
| 157 | > .arrow { | |
| 158 | right: auto; | |
| 159 | top: auto; | |
| 160 | left: 24px; | |
| 161 | bottom: 7px; | |
| 162 | } | |
| 163 | &.pull_right > .arrow { | |
| 164 | left: auto; | |
| 165 | right: 24px; | |
| 166 | } | |
| 167 | ||
| 168 | ||
| 169 | > .arrow:before, > .arrow:after { | |
| 170 | border-width: 0 8px 8px !important; | |
| 171 | } | |
| 172 | > .arrow:after { | |
| 173 | border-color: transparent; | |
| 174 | //!importants are for overriding .menu-min+.rtl | |
| 175 | border-left-color: transparent !important; | |
| 176 | border-right-color: transparent !important; | |
| 177 | ||
| 178 | -moz-border-right-colors: none !important; | |
| 179 | -moz-border-left-colors: none !important; | |
| 180 | -moz-border-top-colors: none; | |
| 181 | -moz-border-bottom-colors: none; | |
| 182 | ||
| 183 | left: -10px !important; | |
| 184 | right: auto !important; | |
| 185 | } | |
| 186 | > .arrow:before { | |
| 187 | border-color: transparent; | |
| 188 | //!importants are for overriding .menu-min+.rtl | |
| 189 | border-left-color: transparent !important; | |
| 190 | border-right-color: transparent !important; | |
| 191 | ||
| 192 | -moz-border-right-colors: none !important; | |
| 193 | -moz-border-left-colors: none !important; | |
| 194 | -moz-border-top-colors: none; | |
| 195 | -moz-border-bottom-colors: none; | |
| 196 | ||
| 197 | right: auto !important; | |
| 198 | left: -10px !important; | |
| 199 | top: -1px !important; | |
| 200 | } | |
| 201 | ||
| 202 | ||
| 203 | &:hover > a ~ .arrow , &.hover-show > a ~ .arrow { | |
| 204 | display: none; | |
| 205 | } | |
| 206 | &:hover > a.dropdown-toggle ~ .arrow , &.hover-show > a.dropdown-toggle ~ .arrow { | |
| 207 | display: block; | |
| 208 | } | |
| 209 | } | |
| 210 | ||
| 211 | ||
| 212 | //hover flip is when horizontal menu is shown on opposite direction so that it doesn't go out of window! | |
| 213 | .nav-list > li.hover-flip > .submenu { | |
| 214 | left: auto; | |
| 215 | right: 1px; | |
| 216 | ||
| 217 | margin-left: auto; | |
| 218 | margin-right: -2px; | |
| 219 | } | |
| 220 | .nav-list > li.hover-flip > .arrow { | |
| 221 | left: auto; | |
| 222 | right: 24px; | |
| 223 | } | |
| 224 | ||
| 225 | .nav-list li li.hover-flip > .submenu { | |
| 226 | left: auto; | |
| 227 | right: 100%; | |
| 228 | ||
| 229 | margin-left: auto; | |
| 230 | margin-right: -2px; | |
| 231 | } | |
| 232 | .nav-list li li.hover-flip > .arrow { | |
| 233 | filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; | |
| 234 | .transform(~"scale(-1, 1)"); | |
| 235 | left: 0; | |
| 236 | right: auto; | |
| 237 | } | |
| 238 | ||
| 239 | ||
| 240 | ||
| 241 | ||
| 242 | //add an arrow to shortcuts dropdown like //-li > .arrow | |
| 243 | .sidebar-shortcuts-large { | |
| 244 | &:before, &:after { | |
| 245 | display: block; | |
| 246 | content: ""; | |
| 247 | position: absolute; | |
| 248 | ||
| 249 | left: 50%; | |
| 250 | margin-left: -8px; | |
| 251 | ||
| 252 | border: 1px solid transparent; | |
| 253 | border-width: 0 8px 8px; | |
| 254 | } | |
| 255 | } | |
| 256 | .sidebar-shortcuts-large:after { | |
| 257 | //border-bottom-color: #FFF; | |
| 258 | border-right-color: transparent; | |
| 259 | ||
| 260 | //-moz-border-bottom-colors: #FFF; | |
| 261 | -moz-border-right-colors: none; | |
| 262 | ||
| 263 | top: -8px; | |
| 264 | } | |
| 265 | .sidebar-shortcuts-large:before { | |
| 266 | -moz-border-bottom-colors: #CCC; | |
| 267 | border-bottom-color: #CCC; | |
| 268 | ||
| 269 | top: -9px; | |
| 270 | } | |
| 271 | ||
| 272 | ||
| 273 | ||
| 274 | .sidebar-toggle { | |
| 275 | position: absolute; | |
| 276 | top: 12px; | |
| 277 | right: 6px; | |
| 278 | background-color: transparent; | |
| 279 | border-width: 0; | |
| 280 | } | |
| 281 | .sidebar-shortcuts { | |
| 282 | float: left; | |
| 283 | display: block; | |
| 284 | overflow: visible; | |
| 285 | position: relative; | |
| 286 | ||
| 287 | margin: 0; | |
| 288 | padding: 12px 8px 9px; | |
| 289 | max-height: none !important; | |
| 290 | ||
| 291 | background-color: transparent; | |
| 292 | ||
| 293 | &:hover .sidebar-shortcuts-large, &.hover-show .sidebar-shortcuts-large { | |
| 294 | display: block; | |
| 295 | } | |
| 296 | } | |
| 297 | .sidebar-shortcuts-large { | |
| 298 | display: none; | |
| 299 | width: 52px; | |
| 300 | height: auto; | |
| 301 | ||
| 302 | position: absolute; | |
| 303 | z-index: @zindex-submenu - 1; | |
| 304 | top: 100%; | |
| 305 | margin-top: -5px; | |
| 306 | left: 10px; | |
| 307 | ||
| 308 | padding: 3px 2px; | |
| 309 | border: 1px solid; | |
| 310 | } | |
| 311 | ||
| 312 | .sidebar-shortcuts-mini { | |
| 313 | width:auto; | |
| 314 | max-width: 52px; | |
| 315 | ||
| 316 | display: block; | |
| 317 | background-color: transparent; | |
| 318 | padding-top: 3px; | |
| 319 | 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 | |
| 320 | ||
| 321 | > .btn { | |
| 322 | padding: 9px; | |
| 323 | } | |
| 324 | } | |
| 325 | ||
| 326 | ||
| 327 | ||
| 328 | .nav-list a .badge, .nav-list a .label { | |
| 329 | position: absolute; | |
| 330 | top: 11px; | |
| 331 | right: auto !important; | |
| 332 | left: 50%; | |
| 333 | margin-left: 10px; | |
| 334 | } | |
| 335 | ||
| 336 | ||
| 337 | ||
| 338 | + .main-content { | |
| 339 | margin-left: 0; | |
| 340 | .breadcrumbs { | |
| 341 | margin: 6px 9px; | |
| 342 | border: 1px solid; | |
| 343 | //.no-skin & { | |
| 344 | border-color: #E5E5E5; | |
| 345 | //} | |
| 346 | ||
| 347 | @media (max-width: @grid-float-breakpoint-max) { | |
| 348 | & { | |
| 349 | margin: 0; | |
| 350 | border-width: 0 0 1px; | |
| 351 | } | |
| 352 | } | |
| 353 | } | |
| 354 | } | |
| 355 | ||
| 356 | ||
| 357 | }//.h-sidebar | |
| 358 | ||
| 359 | ||
| 360 | ||
| 361 | .h-sidebar.sidebar-fixed { | |
| 362 | //z-index: 1000; | |
| 363 | top: auto; | |
| 364 | width: 100%; | |
| 365 | left:0; | |
| 366 | right: 0; | |
| 367 | &:before { | |
| 368 | z-index: auto; | |
| 369 | } | |
| 370 | ||
| 371 | & , .nav-list { | |
| 372 | border-right-width: 0; | |
| 373 | border-left-width: 0; | |
| 374 | } | |
| 375 | .sidebar-shortcuts { | |
| 376 | border-width: 0; | |
| 377 | } | |
| 378 | } | |
| 379 | ||
| 380 | .h-sidebar.sidebar-fixed { | |
| 381 | + .main-content { | |
| 382 | padding-top: 88px; | |
| 383 | } | |
| 384 | &.no-gap + .main-content { | |
| 385 | padding-top: 74px; | |
| 386 | } | |
| 387 | ||
| 388 | &.menu-min + .main-content { | |
| 389 | padding-top: 63px; | |
| 390 | } | |
| 391 | &.menu-min.no-gap + .main-content { | |
| 392 | padding-top: 49px; | |
| 393 | } | |
| 394 | } | |
| 395 | }//@media | |
| 396 | ||
| 397 | ||
| 398 | ||
| 399 | ||
| 400 | .enable_container_horizontal_menu() when(@enable-container = true) { | |
| 401 | //inside .container | |
| 402 | .main-container.container .h-sidebar.sidebar-fixed { | |
| 403 | left: 0;// !important; | |
| 404 | right: 0;// !important; | |
| 405 | width: auto;// !important; | |
| 406 | } | |
| 407 | ||
| 408 | @media (min-width: @screen-sm-min) { | |
| 409 | .main-container.container .h-sidebar.sidebar-fixed { | |
| 410 | left: auto !important; | |
| 411 | right: auto !important; | |
| 412 | width: @container-sm;// !important; | |
| 413 | } | |
| 414 | } | |
| 415 | @media (min-width: @screen-md-min) { | |
| 416 | .main-container.container .h-sidebar.sidebar-fixed { | |
| 417 | width: @container-md;// !important; | |
| 418 | } | |
| 419 | } | |
| 420 | @media (min-width: @screen-lg-min) { | |
| 421 | .main-container.container .h-sidebar.sidebar-fixed { | |
| 422 | width: @container-lg;// !important; | |
| 423 | } | |
| 424 | } | |
| 425 | ||
| 426 | /** | |
| 427 | @media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) { | |
| 428 | .main-container.container .sidebar.sidebar-fixed | |
| 429 | { | |
| 430 | left: auto;// !important; | |
| 431 | right: auto;// !important; | |
| 432 | width: @container-sm;// !important; | |
| 433 | } | |
| 434 | } | |
| 435 | ||
| 436 | ||
| 437 | @media (max-width: @grid-float-breakpoint-max) { | |
| 438 | .main-container.container .sidebar.sidebar-fixed { | |
| 439 | .sidebar-shortcuts { | |
| 440 | max-height: none; | |
| 441 | border-bottom-width: 0; | |
| 442 | } | |
| 443 | } | |
| 444 | } | |
| 445 | */ | |
| 446 | } | |
| 447 | .enable_container_horizontal_menu(); | |
| 448 | ||
| 449 | ||
| 450 | ||
| 451 | ||
| 452 | @media (min-width: @grid-float-breakpoint) { | |
| 453 | ||
| 454 | .sidebar.h-sidebar { | |
| 455 | ||
| 456 | &.menu-min { | |
| 457 | &, &.compact {//compact here to override RTL's | |
| 458 | .nav.nav-list > li > a { | |
| 459 | padding: 9px 12px; | |
| 460 | } | |
| 461 | } | |
| 462 | .nav-list > li > a > .menu-text { | |
| 463 | left: -1px; | |
| 464 | top: 100%; | |
| 465 | width: @hover-submenu-width; | |
| 466 | } | |
| 467 | .nav-list > li > a > .menu-icon { | |
| 468 | margin: 2px 0; | |
| 469 | } | |
| 470 | .nav-list > li.hover > .submenu { | |
| 471 | top: 100%; | |
| 472 | margin-top: @sidebar-menu-min-text-height; | |
| 473 | } | |
| 474 | .nav-list > li.hover { | |
| 475 | &:hover > a ~ .arrow , &.hover-show > a ~ .arrow { | |
| 476 | display: block; | |
| 477 | } | |
| 478 | } | |
| 479 | ||
| 480 | .sidebar-toggle { | |
| 481 | top: 6px; | |
| 482 | } | |
| 483 | .sidebar-shortcuts { | |
| 484 | padding: 0; | |
| 485 | } | |
| 486 | .sidebar-shortcuts-mini { | |
| 487 | padding-bottom: 4px; | |
| 488 | padding-top: 4px; | |
| 489 | > .btn { | |
| 490 | padding: 8px; | |
| 491 | } | |
| 492 | } | |
| 493 | .sidebar-shortcuts-large { | |
| 494 | left: 1px; | |
| 495 | margin-top: 4px; | |
| 496 | } | |
| 497 | } | |
| 498 | ||
| 499 | &.compact { | |
| 500 | .nav-list > li > a > .menu-icon { | |
| 501 | font-size: @nav-item-icon-size; | |
| 502 | height: auto; | |
| 503 | } | |
| 504 | &.menu-min .nav-list > li > a { | |
| 505 | height: auto; | |
| 506 | line-height: 22px; | |
| 507 | } | |
| 508 | } | |
| 509 | } | |
| 510 | } | |
| 511 | ||
| 512 | } | |
| 513 | .enable_horizontal_menu(); | |
| 514 | ||
| 515 | ||
| 516 | ||
| 517 | ||
| 518 | /** | |
| 519 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 520 | .menu-toggler + .sidebar.h-sidebar { | |
| 521 | margin-top: (@breadcrumb-height - 1) !important; | |
| 522 | } | |
| 523 | .sidebar.h-sidebar.responsive-min , .sidebar.h-sidebar.navbar-collapse { | |
| 524 | margin-top: auto !important; | |
| 525 | } | |
| 526 | } | |
| 527 | */ | |
| 528 | ||
