| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | //side menu styling |
| A | 2 | |
| 3 | //some sidebar variables | |
| 4 | @sidebar-background: #F2F2F2; | |
| 5 | @sidebar-border: #CCC; | |
| 6 | ||
| 7 | ||
| 8 | @nav-item-color: #585858; | |
| 9 | @nav-item-background: #F8F8F8; | |
| 10 | @nav-item-border: #E5E5E5; | |
| 11 | ||
| 12 | @nav-item-color-hover: mix(#4B88B7 , @nav-item-color-focus , 25%); | |
| 13 | @nav-item-background-hover: #FFF; | |
| 14 | ||
| 15 | @nav-item-background-open: #FAFAFA; | |
| 16 | ||
| 17 | @nav-item-color-active: #2B7DBC;//#0B6CBC; | |
| 18 | @nav-item-background-active: #FFF; | |
| 19 | ||
| 20 | @nav-item-color-focus: #1963AA; | |
| 21 | ||
| 22 | ||
| 23 | @nav-item-icon-width: 30px; | |
| 24 | ||
| 25 | ||
| 26 | ||
| 27 | @nav-item-hover-indicator: #629CC9; | |
| 28 | @nav-item-arrow-color: #777; | |
| 29 | @nav-item-arrow-color-active: #4B88B7; | |
| 30 | ||
| 31 | ||
| 32 | @submenu-border: @nav-item-border; | |
| 33 | @submenu-background: #FFF; | |
| 34 | @submenu-item-background: #FFF; | |
| 35 | @submenu-item-color: #616161; | |
| 36 | @submenu-item-border: #E4E4E4; | |
| 37 | @submenu-item-icon-size: 18px; | |
| 38 | ||
| 39 | @submenu-item-color-hover: #4B88B7; | |
| 40 | @submenu-item-background-hover: #F1F5F9; | |
| 41 | @submenu-item-icon-active: #C86139; | |
| 42 | @submenu-item-background-active: #F5F7FA; | |
| 43 | @submenu-border-active: #83B6D1; | |
| 44 | ||
| 45 | ||
| 46 | @3rd-level-item-background-hover: @submenu-item-background-hover; | |
| 47 | @3rd-level-item-color-hover: @submenu-item-color-hover; | |
| 48 | ||
| 49 | @submenu-tree-line-style: dotted; | |
| 50 | @submenu-tree-line-color: mix(#BCCFE0 , #7EAACB); | |
| 51 | @submenu-tree-line-color-active: mix(mix(#BCCFE0 , #7EAACB) , #7EAACB); | |
| 52 | ||
| 53 | ||
| 54 | @menumin-text-background: #F5F5F5; | |
| 55 | @menumin-border: #CCC; | |
| 56 | @menumin-shadow1:~"2px 1px 2px 0 rgba(0,0,0,0.1)";//!ignore | |
| 57 | @menumin-shadow2:~"2px 2px 2px 0 rgba(0,0,0,0.1)";//!ignore | |
| 58 | ||
| 59 | ||
| 60 | @sidebar-toggle-background: #F3F3F3; | |
| 61 | @sidebar-toggle-border: #E0E0E0; | |
| 62 | @sidebar-toggle-icon-color: #AAA; | |
| 63 | @sidebar-toggle-icon-border: #BBB; | |
| 64 | @sidebar-toggle-icon-background: #FFF; | |
| 65 | ||
| 66 | @shortcuts-background: #FAFAFA; | |
| 67 | @shortcuts-border: #DDD; | |
| 68 | ||
| 69 | @hover-submenu-border: @menumin-border; | |
| 70 | ||
| 71 | ||
| 72 | @zindex-sidebar-fixed: @zindex-navbar-fixed - 3; | |
| 73 | @zindex-breadcrumbs-fixed: @zindex-sidebar-fixed - 3;//so that .sidebar-shortcuts appears above breadcrumbs. | |
| 74 | @zindex-submenu: @zindex-sidebar-fixed - 1; | |
| 75 | ||
| 76 | ||
| 77 | ||
| 78 | .sidebar { | |
| 79 | width: @sidebar-width; | |
| 80 | ||
| 81 | float: left; | |
| 82 | position: static; | |
| 83 | //why not simply position:absolute? | |
| 84 | //because we need the page height to be at least as high as the sidebar in case the page content is too small | |
| 85 | ||
| 86 | padding-left: 0;//override .nav-collapse | |
| 87 | padding-right: 0; | |
| 88 | ||
| 89 | ||
| 90 | //the grey background of sidebar | |
| 91 | &:before { | |
| 92 | content: ""; | |
| 93 | display: block; | |
| 94 | width: inherit; | |
| 95 | ||
| 96 | position: absolute;//the relative parent is "html" element | |
| 97 | top: 0; | |
| 98 | bottom: 0; | |
| 99 | z-index: -1; | |
| 100 | ||
| 101 | background-color: inherit; | |
| 102 | border-style: inherit; | |
| 103 | border-color: inherit; | |
| 104 | border-width: inherit; | |
| 105 | } | |
| 106 | ||
| 107 | } | |
| 108 | ||
| 109 | ||
| 110 | ||
| 111 | ||
| 112 | //side navigation | |
| 113 | /**li .@{icon} { | |
| 114 | & , .nav-list & { | |
| 115 | width: auto; | |
| 116 | } | |
| 117 | }*/ | |
| 118 | ||
| 119 | .nav-list { | |
| 120 | margin: 0; | |
| 121 | padding: 0; | |
| 122 | list-style: none; | |
| 123 | ||
| 124 | > li , > li > a , .nav-header { | |
| 125 | margin: 0; | |
| 126 | } | |
| 127 | li > a:focus { | |
| 128 | outline: none; | |
| 129 | } | |
| 130 | } | |
| 131 | ||
| 132 | .nav-list > li { | |
| 133 | display: block; | |
| 134 | position: relative; | |
| 135 | float: none; | |
| 136 | ||
| 137 | padding: 0; | |
| 138 | border-style: solid; | |
| 139 | border-width: 1px 0 0; | |
| 140 | ||
| 141 | &:last-child { | |
| 142 | border-bottom-width: 1px; | |
| 143 | } | |
| 144 | ||
| 145 | &.active > a { | |
| 146 | font-weight: bold; | |
| 147 | } | |
| 148 | ||
| 149 | ///////// | |
| 150 | > a { | |
| 151 | display: block; | |
| 152 | height: @nav-item-height; | |
| 153 | line-height: floor(@nav-item-height / 2) - 2; | |
| 154 | ||
| 155 | padding-left: 7px; | |
| 156 | ||
| 157 | text-shadow: none !important; | |
| 158 | ||
| 159 | font-size: @nav-item-font-size; | |
| 160 | text-decoration: none; | |
| 161 | ||
| 162 | > .menu-icon { | |
| 163 | display: inline-block; | |
| 164 | min-width: @nav-item-icon-width; | |
| 165 | margin-right: 2px; | |
| 166 | ||
| 167 | vertical-align: sub; | |
| 168 | ||
| 169 | text-align: center; | |
| 170 | font-size: @nav-item-icon-size; | |
| 171 | font-weight: normal; | |
| 172 | } | |
| 173 | } | |
| 174 | ||
| 175 | ||
| 176 | //the blue hover border on left | |
| 177 | &:before { | |
| 178 | display: none; | |
| 179 | content: ""; | |
| 180 | position: absolute; | |
| 181 | top: -1px; | |
| 182 | left: 0; | |
| 183 | z-index: 1; | |
| 184 | height: @nav-item-height + 2; | |
| 185 | ||
| 186 | width: 3px; | |
| 187 | max-width: 3px; | |
| 188 | ||
| 189 | overflow: hidden; | |
| 190 | ||
| 191 | background-color: @nav-item-hover-indicator; | |
| 192 | ||
| 193 | @media only screen and (min-width: @grid-float-breakpoint) { | |
| 194 | .main-container.container .sidebar:not(.h-sidebar) & { | |
| 195 | left: -2px; | |
| 196 | } | |
| 197 | } | |
| 198 | .main-container.container .sidebar.sidebar-fixed:not(.h-sidebar) & { | |
| 199 | //.main-container.container .sidebar.sidebar-scroll:not(.h-sidebar) & { | |
| 200 | left: 0; | |
| 201 | } | |
| 202 | } | |
| 203 | &:hover:before { | |
| 204 | display: block; | |
| 205 | } | |
| 206 | ||
| 207 | ||
| 208 | // the submenu indicator arrow | |
| 209 | a > .arrow { | |
| 210 | display: block; | |
| 211 | ||
| 212 | width: 14px !important; | |
| 213 | height: 14px; | |
| 214 | line-height: 14px; | |
| 215 | ||
| 216 | text-shadow: none; | |
| 217 | font-size: @nav-item-arrow-size; | |
| 218 | ||
| 219 | ||
| 220 | position: absolute; | |
| 221 | right: 10px; | |
| 222 | top: floor(@nav-item-height / 3) - 1; | |
| 223 | ||
| 224 | padding: 0; | |
| 225 | text-align: center; | |
| 226 | } | |
| 227 | ||
| 228 | &.separator { | |
| 229 | height: 3px; | |
| 230 | background-color: transparent; | |
| 231 | position: static; | |
| 232 | margin: 1px 0; | |
| 233 | ||
| 234 | .box-shadow(none); | |
| 235 | } | |
| 236 | ||
| 237 | ||
| 238 | //submenu | |
| 239 | &.active .submenu { | |
| 240 | display: block; | |
| 241 | } | |
| 242 | ||
| 243 | ||
| 244 | .submenu { | |
| 245 | display: none; | |
| 246 | list-style: none; | |
| 247 | margin: 0; | |
| 248 | padding: 0; | |
| 249 | line-height: 1.5; | |
| 250 | ||
| 251 | position: relative; | |
| 252 | ||
| 253 | > li { | |
| 254 | margin-left: 0; | |
| 255 | position: relative; | |
| 256 | ||
| 257 | > a { | |
| 258 | display: block; | |
| 259 | position: relative; | |
| 260 | padding: 7px 0 9px 37px; | |
| 261 | margin: 0; | |
| 262 | ||
| 263 | border-top-width: 1px; | |
| 264 | border-top-style: dotted; | |
| 265 | ||
| 266 | &:hover { | |
| 267 | text-decoration: none; | |
| 268 | } | |
| 269 | } | |
| 270 | ||
| 271 | //optional icon before each item | |
| 272 | a > .menu-icon { | |
| 273 | display: none; | |
| 274 | ||
| 275 | font-size: @font-size-submenu-item-icon; | |
| 276 | font-weight: normal; | |
| 277 | ||
| 278 | width: @submenu-item-icon-size; | |
| 279 | height: auto; | |
| 280 | line-height: 12px; | |
| 281 | text-align: center; | |
| 282 | ||
| 283 | position: absolute; | |
| 284 | left: 10px; | |
| 285 | top: 11px; | |
| 286 | z-index: 1; | |
| 287 | ||
| 288 | background-color: inherit; | |
| 289 | } | |
| 290 | &.active, &:hover { | |
| 291 | > a > .menu-icon { | |
| 292 | //show the icon on hover or when active | |
| 293 | display: inline-block; | |
| 294 | } | |
| 295 | } | |
| 296 | }// > li | |
| 297 | }//end of submenu | |
| 298 | ||
| 299 | ||
| 300 | //first level submenu | |
| 301 | > .submenu { | |
| 302 | border-top: 1px solid; | |
| 303 | ||
| 304 | > li { | |
| 305 | //tree like menu | |
| 306 | &:before { | |
| 307 | //the horizontal line | |
| 308 | content: ""; | |
| 309 | display: block; | |
| 310 | width: 7px; | |
| 311 | ||
| 312 | position: absolute; | |
| 313 | z-index: 1; | |
| 314 | left: 20px; | |
| 315 | top: 17px; | |
| 316 | ||
| 317 | border: 1px @submenu-tree-line-style; | |
| 318 | border-width: 1px 0 0; | |
| 319 | } | |
| 320 | } | |
| 321 | ||
| 322 | //the vertical tree line | |
| 323 | &:before { | |
| 324 | content: ""; | |
| 325 | display: block; | |
| 326 | position: absolute; | |
| 327 | z-index: 1; | |
| 328 | left: 18px; | |
| 329 | top: 0; | |
| 330 | bottom: 0; | |
| 331 | ||
| 332 | border: 1px @submenu-tree-line-style; | |
| 333 | border-width: 0 0 0 1px; | |
| 334 | } | |
| 335 | } | |
| 336 | ||
| 337 | }//end of .nav-list > li | |
| 338 | ||
| 339 | ||
| 340 | ||
| 341 | .nav-list li { | |
| 342 | &:hover > a > .arrow , &.active > a > .arrow , &.open > a > .arrow { | |
| 343 | color: inherit; | |
| 344 | } | |
| 345 | } | |
| 346 | ||
| 347 | .nav-list li.open > .submenu, | |
| 348 | .nav-list > li > .submenu li.open > .submenu { | |
| 349 | display: block; | |
| 350 | } | |
| 351 | ||
| 352 | ||
| 353 | //override opera only | |
| 354 | no_such_element:-o-prefocus, .nav-list > li > a > .menu-icon { | |
| 355 | vertical-align: middle; | |
| 356 | } | |
| 357 | ||
| 358 | ||
| 359 | ||
| 360 | .3rd_level_icon() { | |
| 361 | display: inline-block; | |
| 362 | //font-size: @font-size-submenu-3rd-level-icon; | |
| 363 | //color: inherit; | |
| 364 | ||
| 365 | width: auto; | |
| 366 | position: static; | |
| 367 | background-color: transparent; | |
| 368 | margin-right: 4px; | |
| 369 | } | |
| 370 | ||
| 371 | //3rd & 4th level menu | |
| 372 | .nav-list > li > .submenu { | |
| 373 | li > .submenu { | |
| 374 | display: none; | |
| 375 | } | |
| 376 | li.active > .submenu { | |
| 377 | display: block; | |
| 378 | } | |
| 379 | ||
| 380 | a > .arrow { | |
| 381 | right: 10px; | |
| 382 | top: 10px; | |
| 383 | font-size: floor(@nav-item-arrow-size * 0.9); | |
| 384 | } | |
| 385 | ||
| 386 | > li:first-child > a { | |
| 387 | border-top-width: 0; | |
| 388 | } | |
| 389 | ||
| 390 | ||
| 391 | li > .submenu > li { | |
| 392 | line-height: 18px; | |
| 393 | &:before { | |
| 394 | //hide the tree like menu | |
| 395 | display: none; | |
| 396 | } | |
| 397 | ||
| 398 | > a { | |
| 399 | //3rd level | |
| 400 | margin-left: 20px; | |
| 401 | padding-left: 22px; | |
| 402 | } | |
| 403 | > .submenu > li > a { | |
| 404 | //4th level | |
| 405 | margin-left: 20px; | |
| 406 | padding-left: 38px; | |
| 407 | } | |
| 408 | ||
| 409 | a > .menu-icon { | |
| 410 | .3rd_level_icon(); | |
| 411 | color: inherit; | |
| 412 | } | |
| 413 | ||
| 414 | a { | |
| 415 | //font-size: @base-font-size; | |
| 416 | .menu-icon , .arrow { | |
| 417 | color: inherit; | |
| 418 | } | |
| 419 | } | |
| 420 | ||
| 421 | } | |
| 422 | ||
| 423 | li.open:not(.hover) > a { | |
| 424 | > .menu-icon { | |
| 425 | display: inline-block; | |
| 426 | } | |
| 427 | } | |
| 428 | }//.nav-list > li > .submenu | |
| 429 | ||
| 430 | ||
| 431 | ||
| 432 | ||
| 433 | ||
| 434 | //labels and badges inside nav item | |
| 435 | .nav-list a { | |
| 436 | .badge , .label { | |
| 437 | position: absolute; | |
| 438 | top: 9px; | |
| 439 | right: 10px; | |
| 440 | ||
| 441 | opacity: 0.88; | |
| 442 | font-size: @base-font-size - 1; | |
| 443 | ||
| 444 | padding-left: 6px; | |
| 445 | padding-right: 6px; | |
| 446 | ||
| 447 | .@{icon} { | |
| 448 | vertical-align: middle; | |
| 449 | margin: 0; | |
| 450 | } | |
| 451 | } | |
| 452 | &.dropdown-toggle { | |
| 453 | .badge , .label { | |
| 454 | right: 26px;//move lefter because of .arrow | |
| 455 | } | |
| 456 | } | |
| 457 | } | |
| 458 | .nav-list li:hover > a { | |
| 459 | .badge , .label { | |
| 460 | opacity: 1; | |
| 461 | } | |
| 462 | } | |
| 463 | ||
| 464 | ||
| 465 | .nav-list .submenu .submenu a { | |
| 466 | .badge , .label { | |
| 467 | top: 6px; | |
| 468 | } | |
| 469 | } | |
| 470 | ||
| 471 | ||
| 472 | ||
| 473 | ||
| 474 | ||
| 475 | ||
| 476 | //shortcut buttons and sidebar toggle | |
| 477 | @import "sidebar/sidebar-fixed.less"; | |
| 478 | ||
| 479 | //shortcut buttons and sidebar toggle | |
| 480 | @import "sidebar/shortcuts-toggle.less"; | |
| 481 | ||
| 482 | //sidebar active state arrows , etc | |
| 483 | @import "sidebar/active.less"; | |
| 484 | ||
| 485 | //submenu compact | |
| 486 | @import "sidebar/compact.less"; | |
| 487 | ||
| 488 | //submenu hover style | |
| 489 | @import "sidebar/hover.less"; | |
| 490 | @import "sidebar/sub-arrow.less"; | |
| 491 | ||
| 492 | //minimized sidebar mode | |
| 493 | @import "sidebar/min.less"; | |
| 494 | ||
| 495 | ||
| 496 | ||
| 497 | //horizontal sidebar style | |
| 498 | @import "sidebar/horizontal.less"; | |
| 499 | ||
| 500 | ||
| 501 | ||
| 502 | //sidebar responsive styles | |
| 503 | @import "sidebar/responsive-1.less";//default | |
| 504 | @import "sidebar/old-toggle-button.less";//old style toggle button | |
| 505 | ||
| 506 | @import "sidebar/responsive-2.less";//like minimized sidebar | |
| 507 | @import "sidebar/responsive-3.less";//bootstrap style | |
| 508 | ||
| 509 | @import "sidebar/multiple.less";//when 2 sidebars are used! | |
| 510 | ||
| 511 | ||
| 512 | ||
| 513 | .sidebar-scroll { | |
| 514 | .sidebar-shortcuts { | |
| 515 | min-height: @breadcrumb-height; | |
| 516 | border-bottom: 1px solid; | |
| 517 | } | |
| 518 | .sidebar-toggle { | |
| 519 | border-top: 1px solid; | |
| 520 | } | |
| 521 | .nav-list > li:first-child { | |
| 522 | border-top-width: 0; | |
| 523 | } | |
| 524 | .nav-list > li:last-child { | |
| 525 | border-bottom-width: 0; | |
| 526 | } | |
| 527 | ||
| 528 | ||
| 529 | ||
| 530 | .nav-wrap { | |
| 531 | .sidebar-shortcuts { | |
| 532 | min-height: @breadcrumb-height - 1; | |
| 533 | border-bottom-width: 0; | |
| 534 | ||
| 535 | + .nav-list > li:first-child , + .nav-wrap-up .nav-list > li:first-child { | |
| 536 | border-top-width: 1px; | |
| 537 | } | |
| 538 | } | |
| 539 | } | |
| 540 | .nav-wrap-t { | |
| 541 | .sidebar-toggle { | |
| 542 | border-top-width: 0; | |
| 543 | } | |
| 544 | .nav-list > li:last-child { | |
| 545 | border-bottom-width: 1px; | |
| 546 | } | |
| 547 | } | |
| 548 | } | |
| 549 | ||
| 550 | .sidebar { | |
| 551 | .nav-wrap + .ace-scroll { | |
| 552 | position: absolute; | |
| 553 | right: 0; | |
| 554 | top: 0; | |
| 555 | z-index: 1; | |
| 556 | } | |
| 557 | .nav-wrap + .scrollout { | |
| 558 | right: -8px; | |
| 559 | } | |
| 560 | } | |
| 561 | ||
| 562 | ||
| 563 | ||
| 564 | .sidebar .submenu.sub-scroll { | |
| 565 | overflow-y: scroll; | |
| 566 | overflow-x: hidden; | |
| 567 | -webkit-overflow-scrolling: touch; | |
| 568 | //-webkit-transform: translate3d(0,0,0); | |
| 569 | } | |
