| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | |
| A | 2 | /* skin 1 */ |
| 3 | .skin-1 { | |
| 4 | @body-background: #4A4F56; | |
| 5 | @navbar-background: #2C6AA0; | |
| 6 | @sidebar-background: #222A2D; | |
| 7 | ||
| 8 | @nav-item-background: @sidebar-background; | |
| 9 | @nav-item-color: lighten(#B1BAC1, 3%); | |
| 10 | @nav-item-border: #3F4E54; | |
| 11 | ||
| 12 | //different states | |
| 13 | @nav-item-background-hover: #414B51; | |
| 14 | @nav-item-color-hover: #E1EAF1; | |
| 15 | ||
| 16 | @nav-item-color-open: #85C0EC; | |
| 17 | @nav-item-background-open: @nav-item-background; | |
| 18 | ||
| 19 | @nav-item-background-active: #141A1B; | |
| 20 | @nav-item-color-active: #7BB7E5;//#55A0DC | |
| 21 | ||
| 22 | ||
| 23 | //submenu colors | |
| 24 | @submenu-background: #333D3F; | |
| 25 | @submenu-border: #505A5B; | |
| 26 | ||
| 27 | @submenu-background-active: #181E20; //darken(@submenu-background-active , 2.5%); | |
| 28 | @submenu-border-active: #2F3E44; | |
| 29 | ||
| 30 | @submenu-item-color: #D9DFE6; | |
| 31 | @submenu-item-border: #454D4E; | |
| 32 | ||
| 33 | @submenu-item-hover: #8AB4DE; | |
| 34 | @submenu-item-hover-background: #2D3638; //!darken(@submenu-background, 2.5%); | |
| 35 | ||
| 36 | @submenu-item-background: #333D3F; | |
| 37 | @submenu-item-background-hover: #333D3F; | |
| 38 | ||
| 39 | @submenu-item-active: @nav-item-color-active; | |
| 40 | @submenu-item-background-active: #181E20; //darken(@submenu-background-active , 2.5%); | |
| 41 | @submenu-item-border-active: #222526; | |
| 42 | @submenu-item-icon-active: #4088D8; //darken(spin(@submenu-item-active , 5%), 5%); | |
| 43 | ||
| 44 | @submenu-item-background-active-hover: #14191a; | |
| 45 | ||
| 46 | @3rd-submenu-item: #61A8DD; | |
| 47 | @3rd-submenu-item-open: @nav-item-color-open; | |
| 48 | ||
| 49 | @active-border-highlight: #305675; | |
| 50 | ||
| 51 | ||
| 52 | @submenu-dotline-border: #646C70; | |
| 53 | @submenu-active-dotline-border: @nav-item-border; | |
| 54 | ||
| 55 | ||
| 56 | @breadcrumbs-background: #F0F0F0; | |
| 57 | ||
| 58 | @sidebar-toggle-background: lighten(spin(@nav-item-background-active , 10%) , 2%); | |
| 59 | @sidebar-toggle-border: @nav-item-border; | |
| 60 | @sidebar-toggle-icon-background: @sidebar-background; | |
| 61 | @sidebar-toggle-icon-color: #AAA; | |
| 62 | @sidebar-toggle-icon-border: #AAA; | |
| 63 | ||
| 64 | @shortcuts-background: @sidebar-background; | |
| 65 | @shortcuts-border: @nav-item-border; | |
| 66 | ||
| 67 | ||
| 68 | @menumin-item-active-background: #242A2B; | |
| 69 | @menumin-submenu-border-left: #181D1F; | |
| 70 | @menumin-submenu-border: #242A2B; | |
| 71 | @menumin-submenu-border-top: #5A606A; | |
| 72 | @menumin-active-submenu-border-top: #3B4547; | |
| 73 | ||
| 74 | @hover-submenu-border: #232828; | |
| 75 | @hover-active-submenu-border: #475561; | |
| 76 | ||
| 77 | @hover-submenu-arrow: #353C3D; | |
| 78 | @hover-submenu-active-background: #171E1F; | |
| 79 | @hover-submenu2-active-arrow: #5E83A0; | |
| 80 | ||
| 81 | @nav-item-hover-indicator: #629CC9; | |
| 82 | @nav-item-active-indicator: mix(@nav-item-hover-indicator , lighten(#3382AF , 5%)); | |
| 83 | ||
| 84 | ||
| 85 | @h-nav-item-border-hover: desaturate(darken(@nav-item-hover-indicator , 20%) , 30%); | |
| 86 | @h-nav-item-border-active: desaturate(darken(@nav-item-hover-indicator , 15%) , 25%); | |
| 87 | ||
| 88 | @highlight-nav-item-border: #506B7F; | |
| 89 | ||
| 90 | @sidebar-toggler-background: #444; | |
| 91 | ||
| 92 | ||
| 93 | ||
| 94 | background-color: @body-background; | |
| 95 | .navbar { | |
| 96 | background: @navbar-background; | |
| 97 | } | |
| 98 | .sidebar { | |
| 99 | background-color: @sidebar-background; | |
| 100 | border-right-width: 0; | |
| 101 | } | |
| 102 | ||
| 103 | ||
| 104 | .nav-list > li { | |
| 105 | border-color: @nav-item-border; | |
| 106 | > a { | |
| 107 | background-color: @nav-item-background; | |
| 108 | color: @nav-item-color; | |
| 109 | } | |
| 110 | &:hover > a { | |
| 111 | background-color: @nav-item-background-hover; | |
| 112 | color: @nav-item-color-hover; | |
| 113 | } | |
| 114 | ||
| 115 | &.open > a , &.open:hover > a { | |
| 116 | color: @nav-item-color-open; | |
| 117 | background-color: @nav-item-background-open; | |
| 118 | } | |
| 119 | ||
| 120 | &.active > a , &.active:hover > a { | |
| 121 | background-color: @nav-item-background-active; | |
| 122 | color: @nav-item-color-active; | |
| 123 | } | |
| 124 | } | |
| 125 | ||
| 126 | //the hover/active menu blue line highlight | |
| 127 | .nav-list > li:hover:before { | |
| 128 | background-color: @nav-item-hover-indicator; | |
| 129 | } | |
| 130 | .nav-list > li.active:before { | |
| 131 | display: block; | |
| 132 | background-color: @nav-item-active-indicator; | |
| 133 | } | |
| 134 | ||
| 135 | .nav-list li.active > a:after { | |
| 136 | border-right-color: #FFF; | |
| 137 | -moz-border-right-colors: #FFF; | |
| 138 | ||
| 139 | //border-width: 16px 10px; | |
| 140 | //top: 3px; | |
| 141 | ||
| 142 | border-width: 11px 7px; | |
| 143 | top: 8px; | |
| 144 | right: 0; | |
| 145 | } | |
| 146 | .nav-list > li.active > .submenu li.active > a { | |
| 147 | &:after { | |
| 148 | //top: 1px; | |
| 149 | top: 5px; | |
| 150 | } | |
| 151 | } | |
| 152 | ||
| 153 | ||
| 154 | ||
| 155 | ||
| 156 | //submenu | |
| 157 | .nav-list > li { | |
| 158 | .submenu { | |
| 159 | background-color: @submenu-background; | |
| 160 | } | |
| 161 | &.active .submenu { | |
| 162 | background-color: @submenu-background-active; | |
| 163 | } | |
| 164 | ||
| 165 | .submenu > li > a { | |
| 166 | border-top-style: solid; | |
| 167 | border-top-color: @submenu-item-border; | |
| 168 | ||
| 169 | background-color: @submenu-item-background; | |
| 170 | &:hover { | |
| 171 | background-color: @submenu-item-hover-background; | |
| 172 | } | |
| 173 | } | |
| 174 | ||
| 175 | &.active .submenu > li > a { | |
| 176 | border-top-color: @submenu-item-border-active; | |
| 177 | background-color: @submenu-item-background-active; | |
| 178 | ||
| 179 | &:hover { | |
| 180 | background-color: @submenu-item-background-active-hover; | |
| 181 | } | |
| 182 | } | |
| 183 | } | |
| 184 | ||
| 185 | ||
| 186 | .nav-list > li { | |
| 187 | > .submenu { | |
| 188 | border-top-color: @submenu-border; | |
| 189 | } | |
| 190 | &.active > .submenu { | |
| 191 | border-top-color: @submenu-border-active; | |
| 192 | } | |
| 193 | ||
| 194 | > .submenu > li { | |
| 195 | > a { | |
| 196 | color: @submenu-item-color; | |
| 197 | } | |
| 198 | &:hover > a { | |
| 199 | color: @submenu-item-hover; | |
| 200 | } | |
| 201 | ||
| 202 | &.active > a { | |
| 203 | color: @submenu-item-active; | |
| 204 | background-color: darken(@submenu-item-background-active, 1%); | |
| 205 | } | |
| 206 | } | |
| 207 | } | |
| 208 | ||
| 209 | //submenu dotted tree menu | |
| 210 | .nav-list > li > .submenu { | |
| 211 | &:before , & > li:before { | |
| 212 | border-color: @submenu-dotline-border; | |
| 213 | } | |
| 214 | } | |
| 215 | .nav-list > li.active > .submenu { | |
| 216 | &:before , & > li:before { | |
| 217 | border-color: @submenu-active-dotline-border; | |
| 218 | } | |
| 219 | } | |
| 220 | ||
| 221 | ||
| 222 | //3rd & 4th level menu | |
| 223 | .nav-list > li .submenu li > .submenu li > a { | |
| 224 | color: @submenu-item-color; | |
| 225 | } | |
| 226 | .nav-list > li .submenu li > .submenu li:hover > a { | |
| 227 | color: @submenu-item-hover; | |
| 228 | } | |
| 229 | .nav-list > li .submenu li.open > a , | |
| 230 | .nav-list > li .submenu li > .submenu > li.open > a { | |
| 231 | color: @nav-item-color-open; | |
| 232 | } | |
| 233 | .nav-list > li .submenu li > .submenu li.active { | |
| 234 | > a { | |
| 235 | color: @3rd-submenu-item; | |
| 236 | } | |
| 237 | &:hover > a { | |
| 238 | color: @3rd-submenu-item-open; | |
| 239 | } | |
| 240 | } | |
| 241 | ||
| 242 | ||
| 243 | ||
| 244 | //////////// | |
| 245 | //.active.highlight state | |
| 246 | .enable_highlight_active_skin_1() when(@enable-highlight-active = true) { | |
| 247 | .sidebar { | |
| 248 | .nav-list > li.active.highlight { | |
| 249 | & , & + li { | |
| 250 | border-color: @highlight-nav-item-border; | |
| 251 | } | |
| 252 | & + li:last-child { | |
| 253 | border-bottom-color: @nav-item-border; | |
| 254 | } | |
| 255 | } | |
| 256 | .nav-list > li.active.highlight > a:after { | |
| 257 | border-right-color: transparent; | |
| 258 | -moz-border-right-colors: none; | |
| 259 | ||
| 260 | border-left-color: @nav-item-background-active; | |
| 261 | -moz-border-left-colors: @nav-item-background-active; | |
| 262 | border-width: 20px 0 20px 10px; | |
| 263 | ||
| 264 | z-index: 1; | |
| 265 | top: 0; | |
| 266 | right: -10px; | |
| 267 | ||
| 268 | //display: block; | |
| 269 | } | |
| 270 | ||
| 271 | .nav-list > li.active.highlight > a:before { | |
| 272 | border-left-color: @highlight-nav-item-border; | |
| 273 | -moz-border-left-colors: @highlight-nav-item-border; | |
| 274 | ||
| 275 | border-style: solid; | |
| 276 | border-color: transparent; | |
| 277 | //border-width: 21px 0 21px 11px; | |
| 278 | border-width: 20px 0 20px 10px; | |
| 279 | ||
| 280 | content: ""; | |
| 281 | //display: block; | |
| 282 | ||
| 283 | position: absolute; | |
| 284 | right: -11px; | |
| 285 | //top: -1px; | |
| 286 | top: 0; | |
| 287 | z-index: 1; | |
| 288 | } | |
| 289 | } | |
| 290 | } | |
| 291 | .enable_highlight_active_skin_1(); | |
| 292 | //////////// | |
| 293 | ||
| 294 | ||
| 295 | //extra | |
| 296 | .sidebar-shortcuts , .sidebar-shortcuts-mini { | |
| 297 | background-color: @shortcuts-background; | |
| 298 | border-color: @shortcuts-border; | |
| 299 | } | |
| 300 | .sidebar > .nav-search { | |
| 301 | background-color: @shortcuts-background; | |
| 302 | border-color: @shortcuts-border; | |
| 303 | } | |
| 304 | .sidebar-toggle { | |
| 305 | background-color: @sidebar-toggle-background; | |
| 306 | border-color: @sidebar-toggle-border; | |
| 307 | ||
| 308 | > .@{icon} { | |
| 309 | background-color: @sidebar-toggle-icon-background; | |
| 310 | color: @sidebar-toggle-icon-color; | |
| 311 | border-color: @sidebar-toggle-icon-border; | |
| 312 | } | |
| 313 | } | |
| 314 | ||
| 315 | .enable_breadcrumbs_skin_1() when(@enable-breadcrumbs = true) { | |
| 316 | .breadcrumbs { | |
| 317 | border-width: 0; | |
| 318 | background-color: @breadcrumbs-background; | |
| 319 | @media (min-width: @screen-fixed-breadcrumbs) { | |
| 320 | &.breadcrumbs-fixed { | |
| 321 | border-bottom-width: 1px; | |
| 322 | } | |
| 323 | } | |
| 324 | } | |
| 325 | } | |
| 326 | .enable_breadcrumbs_skin_1(); | |
| 327 | ||
| 328 | ||
| 329 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 330 | .sidebar.responsive { | |
| 331 | border-width: 0; | |
| 332 | .box-shadow(none); | |
| 333 | .nav-list li.active > a:after { | |
| 334 | display: none; | |
| 335 | } | |
| 336 | .nav-list > li.active.highlight > a:after { | |
| 337 | display: block; | |
| 338 | } | |
| 339 | } | |
| 340 | } | |
| 341 | ||
| 342 | ||
| 343 | ||
| 344 | .menu_min_skin_1() { | |
| 345 | .nav-list > li.open > a { | |
| 346 | background-color: @nav-item-background; | |
| 347 | color: @nav-item-color; | |
| 348 | } | |
| 349 | ||
| 350 | .nav-list > li.active > a:after { | |
| 351 | border-width: 9px 6px; | |
| 352 | top: 10px; | |
| 353 | } | |
| 354 | .nav-list > li.active.highlight > a:after { | |
| 355 | border-width: 20px 0 20px 10px; | |
| 356 | top: 0; | |
| 357 | } | |
| 358 | ||
| 359 | .nav-list > li.active:hover > a:after { | |
| 360 | border-right-color: @menumin-item-active-background; | |
| 361 | } | |
| 362 | ||
| 363 | .nav-list > li.active > a , .nav-list > li.active > a:hover { | |
| 364 | background-color: @nav-item-background-active; | |
| 365 | color: @nav-item-color-active; | |
| 366 | } | |
| 367 | ||
| 368 | .nav-list > li:hover > a { | |
| 369 | color: @nav-item-color-hover; | |
| 370 | } | |
| 371 | .nav-list > li > a > .menu-text { | |
| 372 | background-color: @nav-item-background-hover; | |
| 373 | } | |
| 374 | .nav-list > li.active > a > .menu-text { | |
| 375 | background-color: @menumin-item-active-background; | |
| 376 | ||
| 377 | border: 0px solid @menumin-active-submenu-border-top;//for it to become visible when there are two menus and it overlaps the other | |
| 378 | border-width: 1px 1px 0; | |
| 379 | ||
| 380 | border-left-color: @active-border-highlight; | |
| 381 | } | |
| 382 | .nav-list > li.active > a:not(.dropdown-toggle) > .menu-text { | |
| 383 | border-width: 1px; | |
| 384 | border-top-color: lighten(@nav-item-border , 5%); | |
| 385 | border-bottom-color: lighten(@nav-item-border , 5%); | |
| 386 | border-right-color: lighten(@nav-item-border , 5%); | |
| 387 | } | |
| 388 | ||
| 389 | .nav-list > li.active:hover > a, | |
| 390 | .nav-list > li.active > a > .menu-text { | |
| 391 | color: @nav-item-color-active; | |
| 392 | } | |
| 393 | //.nav-list > li > a.active , | |
| 394 | .nav-list > li.open.active > a { | |
| 395 | background-color: @nav-item-background-active; | |
| 396 | } | |
| 397 | .nav-list > li > a > .menu-text, | |
| 398 | .nav-list > li > .submenu { | |
| 399 | border-width: 0; | |
| 400 | border-left: 1px solid @menumin-submenu-border-left; | |
| 401 | .box-shadow(none); | |
| 402 | } | |
| 403 | ||
| 404 | .nav-list > li > .submenu { | |
| 405 | border-top: 1px solid @nav-item-border; | |
| 406 | &:after { | |
| 407 | //the extra pixel @ min.less | |
| 408 | display: none; | |
| 409 | } | |
| 410 | } | |
| 411 | ||
| 412 | .nav-list > li > .submenu { | |
| 413 | background-color: @submenu-background; | |
| 414 | border-top-color: @menumin-submenu-border-top; | |
| 415 | border-top-width: 1px !important; | |
| 416 | } | |
| 417 | .nav-list > li.active > .submenu { | |
| 418 | background-color: @submenu-background-active; | |
| 419 | border-top-color: @menumin-active-submenu-border-top; | |
| 420 | border-left-color: @active-border-highlight; | |
| 421 | } | |
| 422 | ||
| 423 | ||
| 424 | //-li > .arrow | |
| 425 | .nav-list > li > .arrow { | |
| 426 | //right: 0; | |
| 427 | &:after { | |
| 428 | border-right-color: @nav-item-background-hover; | |
| 429 | -moz-border-right-colors: @nav-item-background-hover; | |
| 430 | } | |
| 431 | &:before { | |
| 432 | border-right-color: darken(@menumin-item-active-background , 8%); | |
| 433 | -moz-border-right-colors: @menumin-item-active-background; | |
| 434 | } | |
| 435 | } | |
| 436 | .nav-list > li.active > .arrow { | |
| 437 | &:after { | |
| 438 | border-right-color: @menumin-item-active-background; | |
| 439 | -moz-border-right-colors: @menumin-item-active-background; | |
| 440 | } | |
| 441 | &:before { | |
| 442 | border-right-color: darken(@nav-item-color-active, 10%); | |
| 443 | -moz-border-right-colors: darken(@nav-item-color-active, 10%); | |
| 444 | } | |
| 445 | } | |
| 446 | ||
| 447 | ||
| 448 | .sidebar-shortcuts-large { | |
| 449 | background-color: @shortcuts-background; | |
| 450 | .box-shadow(none); | |
| 451 | border: 1px solid lighten(@nav-item-border , 5%); | |
| 452 | border-width: 0 1px 1px 0; | |
| 453 | top: 0; | |
| 454 | } | |
| 455 | } | |
| 456 | ||
| 457 | .enable_sidebar_collapse_skin_1() when(@enable-sidebar-collapse = true) { | |
| 458 | .sidebar.menu-min { | |
| 459 | .menu_min_skin_1(); | |
| 460 | } | |
| 461 | } | |
| 462 | .enable_sidebar_collapse_skin_1(); | |
| 463 | ||
| 464 | .enable_minimized_responsive_menu_skin_1() when(@enable-minimized-responsive-menu = true) { | |
| 465 | @media (max-width: @grid-float-breakpoint-max) { | |
| 466 | .sidebar.responsive-min { | |
| 467 | .menu_min_skin_1(); | |
| 468 | ||
| 469 | .nav-list > li.active > a:after { | |
| 470 | display: block; | |
| 471 | } | |
| 472 | } | |
| 473 | .sidebar.responsive-max { | |
| 474 | .nav-list li.active > a:after { | |
| 475 | display: none; | |
| 476 | } | |
| 477 | .nav-list > li.highlight.active > a:after { | |
| 478 | display: block; | |
| 479 | } | |
| 480 | } | |
| 481 | } | |
| 482 | } | |
| 483 | .enable_minimized_responsive_menu_skin_1(); | |
| 484 | ||
| 485 | ||
| 486 | ||
| 487 | //highlight .hover menus when mouse is in submenus | |
| 488 | .hover_highlight_skin_1() { | |
| 489 | .nav-list > li { | |
| 490 | .submenu > li.hover:hover > a { | |
| 491 | background-color: @submenu-item-hover-background; | |
| 492 | } | |
| 493 | &.active .submenu > li.hover:hover > a { | |
| 494 | background-color: @submenu-item-background-active-hover; | |
| 495 | } | |
| 496 | } | |
| 497 | } | |
| 498 | ||
| 499 | .enable_submenu_hover_skin_1() when(@enable-submenu-hover = true) { | |
| 500 | //.hover submenu | |
| 501 | @media only screen and (min-width: @screen-hover-menu) { | |
| 502 | .nav-list li.hover > .submenu { | |
| 503 | padding-left: 0; | |
| 504 | padding-bottom: 2px; | |
| 505 | padding-right: 0; | |
| 506 | ||
| 507 | border-color: @hover-submenu-border; | |
| 508 | } | |
| 509 | //to keep the lines between items | |
| 510 | .nav-list li.hover > .submenu > li > a { | |
| 511 | border-top-width: 1px; | |
| 512 | ||
| 513 | margin-bottom: 0; | |
| 514 | margin-top: 0; | |
| 515 | } | |
| 516 | .nav-list li.hover > .submenu > li:first-child > a { | |
| 517 | border-top-width: 0; | |
| 518 | } | |
| 519 | ||
| 520 | //3rd & 4th | |
| 521 | .nav-list > li > .submenu li.hover > .submenu { | |
| 522 | padding: 3px 2px; | |
| 523 | } | |
| 524 | ||
| 525 | .nav-list > li.active > .submenu li.hover > .submenu { | |
| 526 | border-left-color: @hover-active-submenu-border;//inside an active item but not an active item itself | |
| 527 | } | |
| 528 | .nav-list li.hover.active > .submenu, | |
| 529 | .nav-list li.active > .submenu li.hover.active > .submenu { | |
| 530 | border-left-color: @active-border-highlight; | |
| 531 | } | |
| 532 | .nav-list > li.active > .submenu li.hover > .submenu { | |
| 533 | background-color: @hover-submenu-active-background; | |
| 534 | } | |
| 535 | }//@media | |
| 536 | ||
| 537 | ||
| 538 | ||
| 539 | ||
| 540 | //sometimes .hover items are opened in small view, and back in large view we reset the highlight state | |
| 541 | .enable_collpasible_responsive_menu_skin_1_tmp() when(@enable-collapsible-responsive-menu = true) { | |
| 542 | @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) { | |
| 543 | .sidebar.navbar-collapse { | |
| 544 | .nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a { | |
| 545 | color: @nav-item-color; | |
| 546 | } | |
| 547 | ||
| 548 | .nav-list > li.open.hover:hover > a { | |
| 549 | color: @nav-item-color-hover; | |
| 550 | background-color: @nav-item-background-hover; | |
| 551 | } | |
| 552 | .nav-list > li.active.hover:hover > a { | |
| 553 | color: @nav-item-color-active; | |
| 554 | background-color: @nav-item-background-active; | |
| 555 | } | |
| 556 | ||
| 557 | .nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a { | |
| 558 | color: @submenu-item-color; | |
| 559 | } | |
| 560 | } | |
| 561 | } | |
| 562 | ||
| 563 | ||
| 564 | ||
| 565 | //navbar-collapse | |
| 566 | @media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) { | |
| 567 | .sidebar.navbar-collapse { | |
| 568 | //.nav-list li li.hover.active.open > a { | |
| 569 | // background-color: @submenu-item-background-active; | |
| 570 | //} | |
| 571 | .nav-list li.hover > .submenu { | |
| 572 | padding-bottom: 0; | |
| 573 | } | |
| 574 | .nav-list li.hover > .submenu { | |
| 575 | border-top-color: @submenu-border; | |
| 576 | } | |
| 577 | .nav-list li.hover.active > .submenu { | |
| 578 | border-top-color: @submenu-border-active; | |
| 579 | } | |
| 580 | ||
| 581 | ||
| 582 | ||
| 583 | .nav-list li.hover.active > .submenu, | |
| 584 | .nav-list > li > .submenu li.hover > .submenu, | |
| 585 | .nav-list li.active > .submenu li.hover.active > .submenu { | |
| 586 | border-left-width: 0; | |
| 587 | } | |
| 588 | ||
| 589 | .nav-list > li > .submenu li.hover > .submenu { | |
| 590 | padding: 0; | |
| 591 | } | |
| 592 | .nav-list li li.hover > .submenu > li:first-child > a { | |
| 593 | border-top-width: 1px; | |
| 594 | } | |
| 595 | ||
| 596 | ||
| 597 | //in wide view when we hover a submenu item, its parent LI > A are highlighted, but not needed in small view | |
| 598 | //so remove "li.hover:hover > a" highlight | |
| 599 | /**.nav-list li li:hover > a { | |
| 600 | background-color: @submenu-item-background; | |
| 601 | } | |
| 602 | .nav-list li li > a:hover, | |
| 603 | .nav-list li li.open > a:hover { | |
| 604 | background-color: @submenu-item-hover-background; | |
| 605 | } | |
| 606 | ||
| 607 | .nav-list > li.active li:hover > a { | |
| 608 | background-color: @submenu-item-background-active; | |
| 609 | } | |
| 610 | .nav-list > li.active li > a:hover { | |
| 611 | background-color: @submenu-item-background-active-hover; | |
| 612 | }*/ | |
| 613 | ||
| 614 | } | |
| 615 | } | |
| 616 | ||
| 617 | ||
| 618 | .sidebar.navbar-collapse { | |
| 619 | .hover_highlight_skin_1(); | |
| 620 | } | |
| 621 | ||
| 622 | } | |
| 623 | .enable_collpasible_responsive_menu_skin_1_tmp(); | |
| 624 | ||
| 625 | @media only screen and (min-width: @screen-hover-menu) { | |
| 626 | .sidebar:not(.navbar-collapse) { | |
| 627 | .hover_highlight_skin_1(); | |
| 628 | } | |
| 629 | } | |
| 630 | ||
| 631 | ||
| 632 | } | |
| 633 | .enable_submenu_hover_skin_1(); | |
| 634 | ||
| 635 | ||
| 636 | ||
| 637 | //-li > .arrow | |
| 638 | //the submenu li > .arrow | |
| 639 | .sub_arrow1_skin_1() { | |
| 640 | > .arrow:after { | |
| 641 | border-right-color: @hover-submenu-arrow; | |
| 642 | -moz-border-right-colors: @hover-submenu-arrow; | |
| 643 | } | |
| 644 | > .arrow:before { | |
| 645 | border-right-color: darken(@hover-submenu-arrow, 10%); | |
| 646 | -moz-border-right-colors: darken(@hover-submenu-arrow, 10%); | |
| 647 | } | |
| 648 | } | |
| 649 | .nav-list li { | |
| 650 | .sub_arrow1_skin_1(); | |
| 651 | } | |
| 652 | ||
| 653 | .sub_arrow2_skin_2() { | |
| 654 | &.active > .arrow:after { | |
| 655 | border-right-color: @hover-submenu-active-background; | |
| 656 | -moz-border-right-colors: @hover-submenu-active-background; | |
| 657 | } | |
| 658 | &.active > .arrow:before { | |
| 659 | border-right-color: darken(@nav-item-color-active , 10%); | |
| 660 | -moz-border-right-colors: darken(@nav-item-color-active , 10%); | |
| 661 | } | |
| 662 | } | |
| 663 | ||
| 664 | //li > .arrow | |
| 665 | .nav-list > li { | |
| 666 | .sub_arrow2_skin_2(); | |
| 667 | //submenu of active, but it's not active itself | |
| 668 | &.active > .submenu li.hover > .arrow:before { | |
| 669 | border-right-color: darken(@hover-submenu2-active-arrow , 8%); | |
| 670 | -moz-border-right-colors: lighten(saturate(@hover-submenu2-active-arrow , 20%) , 20%); | |
| 671 | } | |
| 672 | //it is active itself | |
| 673 | &.active > .submenu li.hover.active > .arrow:before { | |
| 674 | border-right-color: @active-border-highlight; | |
| 675 | -moz-border-right-colors: lighten(saturate(@active-border-highlight, 40%), 20%); | |
| 676 | } | |
| 677 | ||
| 678 | &.active > .submenu li.hover > .arrow:after { | |
| 679 | border-right-color: @hover-submenu-active-background; | |
| 680 | -moz-border-right-colors: @hover-submenu-active-background; | |
| 681 | } | |
| 682 | } | |
| 683 | ||
| 684 | .nav-list li.pull_up { | |
| 685 | .sub_arrow1_skin_1() !important; | |
| 686 | .sub_arrow2_skin_2() !important; | |
| 687 | } | |
| 688 | ||
| 689 | ||
| 690 | ||
| 691 | ||
| 692 | ||
| 693 | .enable_old_menu_toggle_button_skin_1() when(@enable-old-menu-toggle-button = true) { | |
| 694 | .main-container .menu-toggler { | |
| 695 | background-color: @sidebar-toggler-background; | |
| 696 | &:before { | |
| 697 | border-top-color: @sidebar-toggler-line-1; | |
| 698 | border-bottom-color: @sidebar-toggler-line-2; | |
| 699 | } | |
| 700 | ||
| 701 | &:after { | |
| 702 | border-top-color: @sidebar-toggler-line-3; | |
| 703 | border-bottom-color: @sidebar-toggler-line-4; | |
| 704 | } | |
| 705 | > .toggler-text { | |
| 706 | border-top-color: @sidebar-toggler-background; | |
| 707 | -moz-border-top-colors: @sidebar-toggler-background; | |
| 708 | } | |
| 709 | } | |
| 710 | ||
| 711 | &.display { | |
| 712 | @color: desaturate(lighten(@navbar-background, 10%) , 30%); | |
| 713 | background-color: @color; | |
| 714 | ||
| 715 | &:before { | |
| 716 | border-top-color: lighten(@sidebar-toggler-line-1 , 15%); | |
| 717 | border-bottom-color: lighten(@sidebar-toggler-line-2 , 15%); | |
| 718 | } | |
| 719 | &:after { | |
| 720 | border-top-color: lighten(@sidebar-toggler-line-3 , 15%); | |
| 721 | border-bottom-color: lighten(@sidebar-toggler-line-4 , 15%); | |
| 722 | } | |
| 723 | ||
| 724 | > .toggler-text { | |
| 725 | border-top-color: @color; | |
| 726 | -moz-border-top-colors: @color; | |
| 727 | } | |
| 728 | } | |
| 729 | } | |
| 730 | .enable_old_menu_toggle_button_skin_1(); | |
| 731 | ||
| 732 | ||
| 733 | .navbar .navbar-toggle { | |
| 734 | background-color: #4D9DCC; | |
| 735 | ||
| 736 | &:focus { | |
| 737 | background-color: #4D9DCC; | |
| 738 | border-color: transparent; | |
| 739 | } | |
| 740 | &:hover { | |
| 741 | background-color: darken(#4D9DCC , 5%); | |
| 742 | border-color: rgba(255,255,255,0.1); | |
| 743 | } | |
| 744 | &.display, &[data-toggle=collapse]:not(.collapsed) { | |
| 745 | background-color: darken(#4D9DCC , 10%); | |
| 746 | box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25); | |
| 747 | border-color: rgba(255, 255, 255, 0.35); | |
| 748 | } | |
| 749 | } | |
| 750 | ||
| 751 | ||
| 752 | ||
| 753 | @media only screen and (min-width: @screen-sm-min) { | |
| 754 | .container.main-container:before { | |
| 755 | box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); | |
| 756 | } | |
| 757 | } | |
| 758 | ||
| 759 | ||
| 760 | //horizontal menu | |
| 761 | .enable_horizontal_menu_skin_1() when(@enable-horizontal-menu = true) { | |
| 762 | @media only screen and (min-width: @grid-float-breakpoint) { | |
| 763 | .sidebar.h-sidebar { | |
| 764 | &:before { | |
| 765 | background-color: spin(lighten(@sidebar-background , 10%) , 10); | |
| 766 | border-bottom-color: lighten(@nav-item-border , 5%); | |
| 767 | } | |
| 768 | ||
| 769 | .nav-list { | |
| 770 | border-bottom-width: 0; | |
| 771 | } | |
| 772 | .nav-list > li.active:before { | |
| 773 | display: block; | |
| 774 | } | |
| 775 | .nav-list > li.hover.active > a:after { | |
| 776 | -moz-border-left-colors: none; | |
| 777 | -moz-border-right-colors: none; | |
| 778 | ||
| 779 | -moz-border-bottom-colors: #FFF; | |
| 780 | ||
| 781 | border-color: transparent transparent #FFF; | |
| 782 | border-width: 8px; | |
| 783 | ||
| 784 | top: auto; | |
| 785 | bottom: 0; | |
| 786 | ||
| 787 | right: auto; | |
| 788 | left: 50%; | |
| 789 | margin-left: -8px; | |
| 790 | ||
| 791 | content: ""; | |
| 792 | display: block; | |
| 793 | } | |
| 794 | .nav-list > li.hover.active:hover > a:after, .nav-list > li.hover.active.hover-show > a:after { | |
| 795 | display: none; | |
| 796 | } | |
| 797 | ||
| 798 | ||
| 799 | + .main-content .breadcrumbs { | |
| 800 | border-color: #E8E8E8; | |
| 801 | } | |
| 802 | ||
| 803 | ||
| 804 | .nav-list > li { | |
| 805 | border-color: @nav-item-border; | |
| 806 | &:hover , &:hover + li { | |
| 807 | border-left-color: @h-nav-item-border-hover; | |
| 808 | } | |
| 809 | &:last-child:hover { | |
| 810 | border-right-color: @h-nav-item-border-hover; | |
| 811 | } | |
| 812 | &.active , &.active + li , &:hover + li.active { | |
| 813 | border-left-color: @h-nav-item-border-active; | |
| 814 | } | |
| 815 | &.active:last-child { | |
| 816 | border-right-color: @h-nav-item-border-active; | |
| 817 | } | |
| 818 | } | |
| 819 | ||
| 820 | ||
| 821 | ||
| 822 | .nav-list > li.hover > .submenu { | |
| 823 | border-top-color: @hover-submenu-border; | |
| 824 | } | |
| 825 | .nav-list > li.hover.active > .submenu { | |
| 826 | border-top-color: @active-border-highlight; | |
| 827 | border-left-color: @hover-submenu-border; | |
| 828 | } | |
| 829 | .sidebar-shortcuts-large { | |
| 830 | background-color: @sidebar-background; | |
| 831 | border: 1px solid @hover-submenu-border; | |
| 832 | border-top-color: @active-border-highlight; | |
| 833 | ||
| 834 | top: 100%; | |
| 835 | } | |
| 836 | ||
| 837 | //-li > .arrow | |
| 838 | .nav-list > li > .arrow { | |
| 839 | &:after { | |
| 840 | border-right-color: transparent; | |
| 841 | -moz-border-right-colors: none; | |
| 842 | ||
| 843 | border-bottom-color: @hover-submenu-arrow; | |
| 844 | -moz-border-bottom-colors: @hover-submenu-arrow; | |
| 845 | } | |
| 846 | &:before { | |
| 847 | -moz-border-right-colors: none; | |
| 848 | border-right-color: transparent; | |
| 849 | ||
| 850 | border-bottom-color: darken(@hover-submenu-arrow, 12%); | |
| 851 | -moz-border-bottom-colors: darken(@hover-submenu-arrow, 8%); | |
| 852 | } | |
| 853 | } | |
| 854 | ||
| 855 | ||
| 856 | ||
| 857 | .nav-list > li.active > .arrow , .sidebar-shortcuts-large { | |
| 858 | &:before { | |
| 859 | border-right-color: transparent; | |
| 860 | -moz-border-right-colors: none; | |
| 861 | ||
| 862 | border-bottom-color: darken(@nav-item-color-active , 10%); | |
| 863 | -moz-border-bottom-colors: darken(@nav-item-color-active , 30%); | |
| 864 | } | |
| 865 | &:after { | |
| 866 | border-right-color: transparent; | |
| 867 | -moz-border-right-colors: none; | |
| 868 | ||
| 869 | border-bottom-color: @hover-submenu-active-background; | |
| 870 | -moz-border-bottom-colors: @hover-submenu-active-background; | |
| 871 | } | |
| 872 | } | |
| 873 | .sidebar-shortcuts-large:after { | |
| 874 | border-bottom-color: @sidebar-background; | |
| 875 | -moz-border-bottom-colors: @sidebar-background; | |
| 876 | } | |
| 877 | ||
| 878 | ||
| 879 | .nav-list > li.highlight.active > a:before { | |
| 880 | display: none; | |
| 881 | } | |
| 882 | ||
| 883 | ||
| 884 | &.menu-min { | |
| 885 | .nav-list > li > a > .menu-text { | |
| 886 | border-width: 1px 0 0; | |
| 887 | border-top-color: @menumin-submenu-border-left; | |
| 888 | } | |
| 889 | .nav-list > li.active > a > .menu-text { | |
| 890 | border-top-color: @active-border-highlight; | |
| 891 | } | |
| 892 | .nav-list > li.active > .submenu { | |
| 893 | border-top-color: @menumin-active-submenu-border-top; | |
| 894 | } | |
| 895 | ||
| 896 | .nav-list > li > .arrow { | |
| 897 | &:after { | |
| 898 | border-bottom-color: @nav-item-background-hover; | |
| 899 | -moz-border-bottom-colors: @nav-item-background-hover; | |
| 900 | } | |
| 901 | &:before { | |
| 902 | border-bottom-color: darken(@menumin-item-active-background , 8%); | |
| 903 | -moz-border-bottom-colors: @menumin-item-active-background; | |
| 904 | } | |
| 905 | } | |
| 906 | .nav-list > li.active > .arrow { | |
| 907 | &:after { | |
| 908 | border-bottom-color: @menumin-item-active-background; | |
| 909 | -moz-border-bottom-colors: @menumin-item-active-background; | |
| 910 | } | |
| 911 | &:before { | |
| 912 | border-bottom-color: darken(@nav-item-color-active, 10%); | |
| 913 | -moz-border-bottom-colors: darken(@nav-item-color-active, 10%); | |
| 914 | } | |
| 915 | } | |
| 916 | ||
| 917 | ||
| 918 | } | |
| 919 | ||
| 920 | } | |
| 921 | ||
| 922 | ||
| 923 | .h-sidebar.sidebar-fixed { | |
| 924 | + .main-content { | |
| 925 | padding-top: 86px; | |
| 926 | } | |
| 927 | &.no-gap + .main-content { | |
| 928 | padding-top: 72px; | |
| 929 | } | |
| 930 | ||
| 931 | &.menu-min + .main-content { | |
| 932 | padding-top: 61px; | |
| 933 | } | |
| 934 | &.menu-min.no-gap + .main-content { | |
| 935 | padding-top: 47px; | |
| 936 | } | |
| 937 | } | |
| 938 | ||
| 939 | ||
| 940 | ||
| 941 | .main-content .h-sidebar.sidebar .nav-list { | |
| 942 | border-left: 1px solid lighten(@nav-item-border , 5%); | |
| 943 | } | |
| 944 | ||
| 945 | }//@media | |
| 946 | } | |
| 947 | .enable_horizontal_menu_skin_1(); | |
| 948 | ||
| 949 | ||
| 950 | ||
| 951 | .sidebar-scroll { | |
| 952 | .sidebar-shortcuts { | |
| 953 | border-bottom-color: lighten(@nav-item-border , 5%); | |
| 954 | } | |
| 955 | .sidebar-toggle { | |
| 956 | border-top-color: lighten(@nav-item-border , 5%); | |
| 957 | } | |
| 958 | ||
| 959 | } | |
| 960 | .scrollout .scroll-track { | |
| 961 | background-color: transparent; | |
| 962 | } | |
| 963 | .scrollout .scroll-bar { | |
| 964 | background-color: #CCC; | |
| 965 | background-color: rgba(0,0,0,0.2); | |
| 966 | } | |
| 967 | ||
| 968 | ||
| 969 | @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) { | |
| 970 | .navbar.navbar-collapse { | |
| 971 | background-color: transparent; | |
| 972 | &:before , .navbar-container { | |
| 973 | background: @navbar-background; | |
| 974 | } | |
| 975 | } | |
| 976 | } | |
| 977 | ||
| 978 | ||
| 979 | ||
| 980 | ||
| 981 | .nav-list > li.disabled:before { | |
| 982 | display: none !important; | |
| 983 | } | |
| 984 | .nav-list > li.disabled > a { | |
| 985 | background-color: #333 !important; | |
| 986 | color: #AAA !important; | |
| 987 | } | |
| 988 | ||
| 989 | .nav-list li .submenu > li.disabled > a, | |
| 990 | .nav-list li.disabled .submenu > li > a { | |
| 991 | background-color: #444 !important; | |
| 992 | color: #A0A0A0 !important; | |
| 993 | cursor: not-allowed !important; | |
| 994 | > .menu-icon { | |
| 995 | display: none; | |
| 996 | } | |
| 997 | } | |
| 998 | .nav-list > li.disabled .submenu > li > a { | |
| 999 | border-top-color: #505050; | |
| 1000 | } | |
| 1001 | ||
| 1002 | ||
| 1003 | }//.skin-1 | |
