提交 | 用户 | 时间
|
58d006
|
1 |
//skin 2 |
A |
2 |
.skin-2 { |
|
3 |
|
|
4 |
@color1: #00BE67; |
|
5 |
@color2: #5ED02B; |
|
6 |
@color3: #A7D700; |
|
7 |
@color4: #CEE100; |
|
8 |
@color5: #F8C600; |
|
9 |
@color6: #FFAB00; |
|
10 |
@color7: #FF6E00; |
|
11 |
@color8: #F21C30;//#E24D59 |
|
12 |
@color9: #DB348A; //#E258A0; |
|
13 |
@color10: #C55EE7; |
|
14 |
@color11: #218BEE; |
|
15 |
@color12: #2ECEE7; |
|
16 |
|
|
17 |
|
|
18 |
@default-color: @color9;//you can use one color only, you should comment .colorize1(1) and .colorize2(1) |
|
19 |
|
|
20 |
@body-background: #5C5C5C; |
|
21 |
@navbar-background: #C6487E; //#56A580 green #669CBA blue |
|
22 |
@sidebar-background: #505050; |
|
23 |
|
|
24 |
@nav-item-background: #393939;//#4C313C |
|
25 |
@nav-item-color: #E6E6E6; |
|
26 |
@nav-item-border: #484848; |
|
27 |
|
|
28 |
|
|
29 |
//different states |
|
30 |
|
|
31 |
@nav-item-color-hover: rgba(0,0,0,0.6); |
|
32 |
@nav-item-icon-hover: #FFF; |
|
33 |
@nav-item-background-hover: desaturate(@default-color , 25%); |
|
34 |
|
|
35 |
@nav-item-color-open: rgba(0,0,0,0.6); |
|
36 |
@nav-item-icon-open: #FFF; |
|
37 |
@nav-item-background-open: @nav-item-background-hover; |
|
38 |
|
|
39 |
@nav-item-color-active: #FFF; |
|
40 |
@nav-item-background-active: #242424; |
|
41 |
@nav-item-background-active2: @nav-item-background-hover;//.active.highlight |
|
42 |
|
|
43 |
|
|
44 |
//submenu colors |
|
45 |
@submenu-background: mix(@default-color , #303030, 12%); |
|
46 |
@submenu-item-color: #EEE; |
|
47 |
@submenu-item-background-hover: rgba(0,0,0,0.1); |
|
48 |
@submenu-item-background-active: rgba(0,0,0,0.05); |
|
49 |
|
|
50 |
@hover-submenu-border: rgba(0,0,0,0.4); |
|
51 |
|
|
52 |
|
|
53 |
@breadcrumbs-background: #E7F2F8; |
|
54 |
|
|
55 |
|
|
56 |
@sidebar-toggle-background: #2F2F2F; |
|
57 |
@sidebar-toggle-border: lighten(@nav-item-border , 18%); |
|
58 |
@sidebar-toggle-icon-background: #333; |
|
59 |
@sidebar-toggle-icon-color: #AAA; |
|
60 |
@sidebar-toggle-icon-border: #BBB; |
|
61 |
|
|
62 |
@shortcuts-background: #393939; |
|
63 |
|
|
64 |
|
|
65 |
|
|
66 |
background-color: @body-background; |
|
67 |
.navbar { |
|
68 |
background: @navbar-background; |
|
69 |
} |
|
70 |
.sidebar { |
|
71 |
background-color: @sidebar-background; |
|
72 |
border-right-width: 0; |
|
73 |
} |
|
74 |
|
|
75 |
.nav-list > li { |
|
76 |
border-color: @nav-item-border; |
|
77 |
&:first-child { |
|
78 |
border-top-color: lighten(@nav-item-border , 7%); |
|
79 |
} |
|
80 |
&:last-child { |
|
81 |
border-bottom-color: lighten(@nav-item-border , 10%); |
|
82 |
} |
|
83 |
|
|
84 |
> a { |
|
85 |
background-color: @nav-item-background; |
|
86 |
color: @nav-item-color; |
|
87 |
> .menu-text , > .arrow { |
|
88 |
color: @nav-item-color;//if removed, it will have li:nth-child(n) color |
|
89 |
} |
|
90 |
} |
|
91 |
|
|
92 |
|
|
93 |
&:hover > a, &.hover-show > a { |
|
94 |
background-color: @nav-item-background-hover; |
|
95 |
> .menu-text { |
|
96 |
font-weight: bold; |
|
97 |
color: @nav-item-color-active;//for IE that doesn't support rgba |
|
98 |
color: @nav-item-color-hover; |
|
99 |
} |
|
100 |
> .menu-icon , > .arrow { |
|
101 |
color: @nav-item-icon-hover; |
|
102 |
} |
|
103 |
} |
|
104 |
&.open > a { |
|
105 |
background-color: @nav-item-background-open; |
|
106 |
> .menu-text { |
|
107 |
font-weight: bold; |
|
108 |
color: @nav-item-color-open; |
|
109 |
} |
|
110 |
> .menu-icon , > .arrow { |
|
111 |
color: @nav-item-icon-open; |
|
112 |
} |
|
113 |
} |
|
114 |
|
|
115 |
&.active > a { |
|
116 |
background-color: @nav-item-background-active; |
|
117 |
color: @nav-item-color-active; |
|
118 |
|
|
119 |
> .menu-icon { |
|
120 |
color: inherit; |
|
121 |
} |
|
122 |
> .menu-text , > .arrow { |
|
123 |
color: @nav-item-color-active; |
|
124 |
} |
|
125 |
} |
|
126 |
&.active:hover > a, &.active:not(.highlight):hover > a, |
|
127 |
&.active.hover-show > a, &.active:not(.highlight).hover-show > a, |
|
128 |
&.active.open > a, &.active.open:not(.highlight) > a |
|
129 |
{ |
|
130 |
background-color: @nav-item-background-active; |
|
131 |
} |
|
132 |
|
|
133 |
&.active.highlight > a { |
|
134 |
background-color: @nav-item-background-active2; |
|
135 |
> .menu-icon { |
|
136 |
color: @nav-item-color-active; |
|
137 |
} |
|
138 |
} |
|
139 |
|
|
140 |
} |
|
141 |
|
|
142 |
|
|
143 |
//highlights and active states |
|
144 |
.nav-list li.active > a:after { |
|
145 |
border-right-color: #FFF; |
|
146 |
-moz-border-right-colors: #FFF; |
|
147 |
|
|
148 |
//border-width: 16px 10px; |
|
149 |
//top: 3px; |
|
150 |
|
|
151 |
border-width: 11px 7px; |
|
152 |
top: 8px; |
|
153 |
right: 0; |
|
154 |
} |
|
155 |
//the long active item line |
|
156 |
//.nav-list > li.active:after, .sidebar.responsive .nav-list li.active > a:after { |
|
157 |
//display: none; |
|
158 |
//} |
|
159 |
|
|
160 |
.nav-list > li.active > .submenu li.active > a { |
|
161 |
&:after { |
|
162 |
//top: 1px; |
|
163 |
top: 6px; |
|
164 |
} |
|
165 |
} |
|
166 |
.nav-list > li:before { |
|
167 |
top: 0; |
|
168 |
height: @nav-item-height; |
|
169 |
} |
|
170 |
.nav-list > li.active:before { |
|
171 |
display: block; |
|
172 |
background-color: mix(desaturate(@default-color , 25%) , #FFF, 75%); |
|
173 |
} |
|
174 |
.nav-list > li.active.highlight:before , .nav-list > li:before { |
|
175 |
background-color: mix(desaturate(@default-color , 25%) , #FFF, 50%); |
|
176 |
} |
|
177 |
|
|
178 |
|
|
179 |
//submenu |
|
180 |
.nav-list > li { |
|
181 |
> .submenu { |
|
182 |
border-top-width: 0; |
|
183 |
background-color: @submenu-background; |
|
184 |
|
|
185 |
//border-left: 1px solid; |
|
186 |
//border-left-color: #333; |
|
187 |
//border-left-color: rgba(0,0,0,0.4); |
|
188 |
} |
|
189 |
|
|
190 |
> .submenu > li , |
|
191 |
> .submenu > li > .submenu , |
|
192 |
> .submenu > li > .submenu > li, |
|
193 |
> .submenu > li > .submenu > li .submenu, |
|
194 |
> .submenu > li > .submenu > li .submenu li |
|
195 |
{ |
|
196 |
background-color: inherit; |
|
197 |
} |
|
198 |
|
|
199 |
|
|
200 |
.submenu > li > a { |
|
201 |
border-top: 1px solid; |
|
202 |
border-top-color: #555; |
|
203 |
border-top-color: rgba(255,255,255,0.08); |
|
204 |
|
|
205 |
background-color: transparent; |
|
206 |
&:hover { |
|
207 |
background-color: @submenu-item-background-hover; |
|
208 |
color: #FFF; |
|
209 |
|
|
210 |
> .menu-icon { |
|
211 |
background-color: transparent; |
|
212 |
} |
|
213 |
} |
|
214 |
} |
|
215 |
|
|
216 |
&.active .submenu > li > a:hover { |
|
217 |
background-color: @submenu-item-background-hover; |
|
218 |
} |
|
219 |
} |
|
220 |
|
|
221 |
.nav-list > li { |
|
222 |
> .submenu > li { |
|
223 |
> a { |
|
224 |
color: @submenu-item-color; |
|
225 |
} |
|
226 |
&:first-child > a { |
|
227 |
border-top-width: 0; |
|
228 |
} |
|
229 |
&.active > a { |
|
230 |
background-color: @submenu-item-background-active; |
|
231 |
font-weight: bold; |
|
232 |
|
|
233 |
> .menu-icon { |
|
234 |
color: inherit; |
|
235 |
background-color: transparent; |
|
236 |
} |
|
237 |
} |
|
238 |
} |
|
239 |
} |
|
240 |
//3rd & 4th level menu |
|
241 |
.nav-list li .submenu li > a { |
|
242 |
color: @submenu-item-color; |
|
243 |
font-size: @base-font-size; |
|
244 |
} |
|
245 |
|
|
246 |
|
|
247 |
//hide submenu dotted tree menu |
|
248 |
.nav-list > li > .submenu { |
|
249 |
&:before, & > li:before { |
|
250 |
display: none; |
|
251 |
} |
|
252 |
} |
|
253 |
|
|
254 |
//change the paddings a little bit |
|
255 |
.nav-list > li .submenu > li > a { |
|
256 |
padding-left: 32px; |
|
257 |
> .menu-icon { |
|
258 |
left: 12px; |
|
259 |
} |
|
260 |
} |
|
261 |
@media only screen and (min-width: @screen-hover-menu) { |
|
262 |
.nav-list > li .submenu > li.hover > a { |
|
263 |
padding-left: 26px; |
|
264 |
> .menu-icon { |
|
265 |
left: 6px; |
|
266 |
} |
|
267 |
} |
|
268 |
} |
|
269 |
.nav-list > li > .submenu li > .submenu > li { |
|
270 |
> a { |
|
271 |
margin-left: 0; |
|
272 |
|
|
273 |
padding-left: 37px; |
|
274 |
padding-top: 8px; |
|
275 |
padding-bottom: 10px; |
|
276 |
|
|
277 |
border-top-width: 0; |
|
278 |
} |
|
279 |
> .submenu > li > a { |
|
280 |
margin-left: 0; |
|
281 |
padding-left: 51px; |
|
282 |
} |
|
283 |
} |
|
284 |
|
|
285 |
@media only screen and (min-width: @screen-hover-menu) { |
|
286 |
.nav-list > li > .submenu li > .submenu > li.hover > a { |
|
287 |
border-top-width: 1px; |
|
288 |
padding-bottom: 9px; |
|
289 |
} |
|
290 |
.nav-list > li > .submenu li > .submenu > li.hover:first-child > a { |
|
291 |
border-top-width: 0; |
|
292 |
} |
|
293 |
} |
|
294 |
|
|
295 |
//submenu active item color |
|
296 |
.nav-list > li > .submenu li { |
|
297 |
&:hover, &.hover-show, &.active, &.open { |
|
298 |
> a { |
|
299 |
color: lighten(desaturate(@default-color , 15%) , 15%);//submenu item color |
|
300 |
} |
|
301 |
} |
|
302 |
|
|
303 |
> a > .@{icon} { |
|
304 |
background-color: transparent; |
|
305 |
} |
|
306 |
} |
|
307 |
|
|
308 |
|
|
309 |
//the .badge and .label on hover |
|
310 |
.nav-list > li { |
|
311 |
&:hover:not(.active) > a , &.hover-show:not(.active) > a , &.open:not(.active) > a, &.active.highlight { |
|
312 |
.badge, .label { |
|
313 |
background-color: rgba(0,0,0,0.5) !important; |
|
314 |
} |
|
315 |
|
|
316 |
.badge.badge-transparent, .label.label-transparent { |
|
317 |
color: rgba(255,255,255,0.8) !important; |
|
318 |
background-color: transparent !important; |
|
319 |
.@{icon} { |
|
320 |
color: rgba(255,255,255,0.8) !important; |
|
321 |
} |
|
322 |
} |
|
323 |
} |
|
324 |
} |
|
325 |
|
|
326 |
|
|
327 |
//-li > .arrow |
|
328 |
.sub_arrow() { |
|
329 |
&:after { |
|
330 |
border-right-color: @submenu-background; |
|
331 |
-moz-border-right-colors: @submenu-background; |
|
332 |
} |
|
333 |
&:before { |
|
334 |
border-right-color: #191919; |
|
335 |
-moz-border-right-colors: #191919; |
|
336 |
//-moz-border-right-colors: rgba(0,0,0,0.7); |
|
337 |
//border-right-color: rgba(0,0,0,0.7); |
|
338 |
} |
|
339 |
} |
|
340 |
.nav-list li > .arrow { |
|
341 |
.sub_arrow() |
|
342 |
} |
|
343 |
.nav-list > li.pull_up > .arrow { |
|
344 |
.sub_arrow() !important; |
|
345 |
} |
|
346 |
|
|
347 |
|
|
348 |
|
|
349 |
//////////// |
|
350 |
.enable_highlight_active_skin_2() when(@enable-highlight-active = true) { |
|
351 |
//.active.highlight state //remove if not wanted |
|
352 |
.nav-list > li.active.highlight > a:after { |
|
353 |
border-right-color: transparent; |
|
354 |
-moz-border-right-colors: none; |
|
355 |
|
|
356 |
border-left-color: @nav-item-background-active2; |
|
357 |
-moz-border-left-colors: @nav-item-background-active2; |
|
358 |
border-width: 20px 0 20px 10px; |
|
359 |
|
|
360 |
z-index: 1; |
|
361 |
top: 0; |
|
362 |
right: -10px; |
|
363 |
|
|
364 |
display: block; |
|
365 |
} |
|
366 |
} |
|
367 |
.enable_highlight_active_skin_2(); |
|
368 |
//////////// |
|
369 |
|
|
370 |
|
|
371 |
//apply different colors |
|
372 |
.colorize1 (@index) when (@index < 13) { |
|
373 |
@color-val: ~`"color@{index}"`; |
|
374 |
|
|
375 |
.nav-list > li:nth-child(@{index}) > a { |
|
376 |
color: @@color-val; |
|
377 |
} |
|
378 |
|
|
379 |
.nav-list > li:nth-child(@{index}):hover > a, |
|
380 |
.nav-list > li:nth-child(@{index}).hover-show > a, |
|
381 |
.nav-list > li.open:nth-child(@{index}) > a { |
|
382 |
background-color: desaturate(@@color-val , 25%);//nav item hover background |
|
383 |
} |
|
384 |
|
|
385 |
.enable_highlight_active_skin_2_colors() { |
|
386 |
//.active.highlight state //remove if not wanted |
|
387 |
.nav-list > li.highlight.active:nth-child(@{index}) > a { |
|
388 |
background-color: desaturate(@@color-val , 25%);//nav item hover background |
|
389 |
} |
|
390 |
.nav-list > li.active.highlight:nth-child(@{index}) > a:after { |
|
391 |
border-left-color: desaturate(@@color-val , 25%); |
|
392 |
-moz-border-left-colors: desaturate(@@color-val , 25%); |
|
393 |
} |
|
394 |
} |
|
395 |
|
|
396 |
|
|
397 |
|
|
398 |
@submenu-background: mix(@@color-val , #303030, 12%);//it's like having an overlay with #303030 and 88% opacity |
|
399 |
.nav-list > li:nth-child(@{index}) > .submenu { |
|
400 |
background-color: @submenu-background; |
|
401 |
} |
|
402 |
|
|
403 |
//-li > .arrow |
|
404 |
.nav-list > li:nth-child(@{index}) > .arrow:after, |
|
405 |
.nav-list > li:nth-child(@{index}) li > .arrow:after { |
|
406 |
border-right-color: @submenu-background; |
|
407 |
-moz-border-right-colors: @submenu-background; |
|
408 |
} |
|
409 |
.nav-list > li.pull_up:nth-child(@{index}) > .arrow:after { |
|
410 |
border-right-color: @submenu-background !important; |
|
411 |
-moz-border-right-colors: @submenu-background !important; |
|
412 |
} |
|
413 |
|
|
414 |
|
|
415 |
.enable_horizontal_menu_skin_2_colors() { |
|
416 |
.sidebar.h-sidebar { |
|
417 |
.nav-list > li.hover:nth-child(@{index}) > a { |
|
418 |
//to override .menu-min |
|
419 |
color: @@color-val; |
|
420 |
} |
|
421 |
.nav-list > li.hover:nth-child(@{index}) > .arrow:after { |
|
422 |
border-bottom-color: @submenu-background; |
|
423 |
-moz-border-bottom-colors: @submenu-background; |
|
424 |
} |
|
425 |
} |
|
426 |
} |
|
427 |
|
|
428 |
|
|
429 |
.nav-list > li:nth-child(@{index}) > .submenu li { |
|
430 |
&:hover , &.hover-show, &.active, &.open { |
|
431 |
> a { |
|
432 |
color: lighten(desaturate(@@color-val , 15%) , 15%);//submenu item color |
|
433 |
} |
|
434 |
} |
|
435 |
} |
|
436 |
|
|
437 |
//the hover |
|
438 |
.nav-list > li.active:nth-child(@{index}):before { |
|
439 |
background-color: mix(desaturate(@default-color , 25%) , #FFF, 75%); |
|
440 |
background-color: mix(desaturate(@@color-val , 25%) , #FFF, 75%); |
|
441 |
} |
|
442 |
.nav-list > li.active.highlight:nth-child(@{index}):before , |
|
443 |
.nav-list > li:nth-child(@{index}):before { |
|
444 |
background-color: mix(desaturate(@@color-val , 25%) , #FFF, 50%); |
|
445 |
} |
|
446 |
|
|
447 |
.colorize1(@index + 1); |
|
448 |
} |
|
449 |
.colorize1(1); |
|
450 |
|
|
451 |
.enable_horizontal_menu_skin_2_colorsss() when(@enable-horizontal-menu = true) { |
|
452 |
@media only screen and (min-width: @grid-float-breakpoint) { |
|
453 |
.enable_horizontal_menu_skin_2_colors(); |
|
454 |
} |
|
455 |
} |
|
456 |
.enable_horizontal_menu_skin_2_colorsss(); |
|
457 |
|
|
458 |
|
|
459 |
.enable_highlight_active_skin_2_colorsss() when(@enable-highlight-active = true) { |
|
460 |
.enable_highlight_active_skin_2_colors(); |
|
461 |
} |
|
462 |
.enable_highlight_active_skin_2_colorsss(); |
|
463 |
|
|
464 |
|
|
465 |
|
|
466 |
|
|
467 |
|
|
468 |
//some extras |
|
469 |
.sidebar-shortcuts .btn { |
|
470 |
background-color: #555 !important; |
|
471 |
border-radius: 32px; |
|
472 |
border-width: 2px; |
|
473 |
|
|
474 |
&:hover { |
|
475 |
background-color: #222 !important; |
|
476 |
} |
|
477 |
&:focus { |
|
478 |
outline: none; |
|
479 |
} |
|
480 |
} |
|
481 |
.sidebar-shortcuts-mini .btn { |
|
482 |
border-radius: 32px; |
|
483 |
border-width: 2px; |
|
484 |
opacity: 1; |
|
485 |
padding: 6px; |
|
486 |
} |
|
487 |
|
|
488 |
.sidebar-shortcuts , .sidebar-shortcuts-mini { |
|
489 |
background-color: @shortcuts-background; |
|
490 |
} |
|
491 |
.sidebar > .nav-search { |
|
492 |
background-color: @shortcuts-background; |
|
493 |
} |
|
494 |
|
|
495 |
.sidebar-toggle { |
|
496 |
background-color: @sidebar-toggle-background; |
|
497 |
border-color: @sidebar-toggle-border; |
|
498 |
|
|
499 |
&:before { |
|
500 |
border-color: inherit; |
|
501 |
} |
|
502 |
|
|
503 |
> .@{icon} { |
|
504 |
background-color: @sidebar-toggle-icon-background; |
|
505 |
border-color: @sidebar-toggle-icon-color; |
|
506 |
color: @sidebar-toggle-icon-color; |
|
507 |
} |
|
508 |
} |
|
509 |
|
|
510 |
|
|
511 |
|
|
512 |
.enable_breadcrumbs_skin_2() when(@enable-breadcrumbs = true) { |
|
513 |
.breadcrumbs { |
|
514 |
border-width: 0; |
|
515 |
background-color: @breadcrumbs-background; |
|
516 |
border-radius: 4px; |
|
517 |
|
|
518 |
margin: 8px 8px 0; |
|
519 |
} |
|
520 |
|
|
521 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
522 |
.breadcrumbs { |
|
523 |
margin: 5px 5px 0; |
|
524 |
} |
|
525 |
|
|
526 |
.menu-toggler + .sidebar.responsive + .main-content .breadcrumbs { |
|
527 |
margin: 0; |
|
528 |
border-radius: 0; |
|
529 |
} |
|
530 |
} |
|
531 |
|
|
532 |
.enable_fixed_breadcrumbs_skin_2() when(@enable-fixed-breadcrumbs = true) { |
|
533 |
@media (min-width: @screen-fixed-breadcrumbs) { |
|
534 |
.breadcrumbs.breadcrumbs-fixed + .page-content { |
|
535 |
padding-top: @page-content-padding-top + @breadcrumb-height + 8; |
|
536 |
} |
|
537 |
} |
|
538 |
@media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) { |
|
539 |
.breadcrumbs.breadcrumbs-fixed + .page-content { |
|
540 |
padding-top: @page-content-padding-top + @breadcrumb-height + 5; |
|
541 |
} |
|
542 |
|
|
543 |
.menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content { |
|
544 |
padding-top: @page-content-padding-top + @breadcrumb-height; |
|
545 |
} |
|
546 |
} |
|
547 |
|
|
548 |
.enable_container_breadcrumbs_skin_2() when(@enable-breadcrumbs = true) { |
|
549 |
//because breadcrumbs has 8px margin on left and right |
|
550 |
.container.main-container { |
|
551 |
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) { |
|
552 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
553 |
width: @container-sm - 10; |
|
554 |
} |
|
555 |
} |
|
556 |
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) { |
|
557 |
.breadcrumbs-fixed { |
|
558 |
width: @container-sm - 10; |
|
559 |
} |
|
560 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
561 |
width: @container-sm - 10; |
|
562 |
} |
|
563 |
|
|
564 |
.sidebar.responsive-min + .main-content .breadcrumbs-fixed { |
|
565 |
width: @container-sm - @sidebar-min-width - 10; |
|
566 |
} |
|
567 |
} |
|
568 |
|
|
569 |
|
|
570 |
@media (min-width: max(@screen-md-min, @screen-compact-menu)) { |
|
571 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
572 |
width: @container-md - @sidebar-compact-width - 16; |
|
573 |
} |
|
574 |
} |
|
575 |
@media (min-width: max(@screen-md-min)) { |
|
576 |
.breadcrumbs-fixed { |
|
577 |
width: @container-md; |
|
578 |
} |
|
579 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
580 |
width: @container-md - @sidebar-width - 16; |
|
581 |
} |
|
582 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
583 |
width: @container-md - @sidebar-min-width - 16; |
|
584 |
} |
|
585 |
} |
|
586 |
|
|
587 |
@media (min-width: max(@screen-lg-min, @screen-compact-menu)) { |
|
588 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
589 |
width: @container-lg - @sidebar-compact-width - 16; |
|
590 |
} |
|
591 |
} |
|
592 |
@media (min-width: @screen-lg-min) { |
|
593 |
.breadcrumbs-fixed { |
|
594 |
width: @container-lg - 16; |
|
595 |
} |
|
596 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
597 |
width: @container-lg - @sidebar-width - 16; |
|
598 |
} |
|
599 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
600 |
width: @container-lg - @sidebar-min-width - 16; |
|
601 |
} |
|
602 |
} |
|
603 |
|
|
604 |
@media (min-width: @screen-sm-min) { |
|
605 |
.sidebar.h-sidebar + .main-content .breadcrumbs-fixed { |
|
606 |
width: auto; |
|
607 |
} |
|
608 |
} |
|
609 |
} |
|
610 |
} |
|
611 |
.enable_container_breadcrumbs_skin_2(); |
|
612 |
|
|
613 |
} |
|
614 |
.enable_fixed_breadcrumbs_skin_2(); |
|
615 |
} |
|
616 |
.enable_breadcrumbs_skin_2(); |
|
617 |
|
|
618 |
|
|
619 |
|
|
620 |
|
|
621 |
//default responsive |
|
622 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
623 |
.sidebar { |
|
624 |
border-width: 0; |
|
625 |
.box-shadow(none); |
|
626 |
} |
|
627 |
.nav-list li.active > a:after { |
|
628 |
display: none; |
|
629 |
} |
|
630 |
} |
|
631 |
|
|
632 |
|
|
633 |
//collapsed menu |
|
634 |
.menu_min_skin_2() { |
|
635 |
.nav-list > li.open > a { |
|
636 |
color: @nav-item-color; |
|
637 |
} |
|
638 |
.nav-list > li.active > a { |
|
639 |
color: @nav-item-color-active; |
|
640 |
} |
|
641 |
.nav-list > li.active > a:after { |
|
642 |
border-width: 9px 6px; |
|
643 |
top: 10px; |
|
644 |
} |
|
645 |
.nav-list > li.active.highlight > a:after { |
|
646 |
border-width: 20px 0 20px 10px; |
|
647 |
top: 0; |
|
648 |
} |
|
649 |
|
|
650 |
.nav-list > li > a > .menu-text { |
|
651 |
background-color: inherit; |
|
652 |
font-weight: bold; |
|
653 |
color: @nav-item-color-hover;//because it only shows up if hovered! |
|
654 |
|
|
655 |
border-width: 0 0 0 1px; |
|
656 |
border-style: solid; |
|
657 |
border-color: #333; |
|
658 |
border-color: rgba(0,0,0,0.4); |
|
659 |
|
|
660 |
.box-shadow(none); |
|
661 |
|
|
662 |
margin-left: 1px; |
|
663 |
|
|
664 |
//top: -1px; |
|
665 |
//height: @nav-item-height; |
|
666 |
} |
|
667 |
.nav-list > li.active > a > .menu-text { |
|
668 |
background-color: inherit; |
|
669 |
color: #FFF; |
|
670 |
} |
|
671 |
|
|
672 |
|
|
673 |
.nav-list > li > .submenu { |
|
674 |
border-style: solid; |
|
675 |
border-width: 1px 0 0 1px; |
|
676 |
border-color: #444; |
|
677 |
border-color: rgba(0,0,0,0.3); |
|
678 |
|
|
679 |
.box-shadow(none); |
|
680 |
|
|
681 |
margin-left: 1px; |
|
682 |
&:after { |
|
683 |
//the extra pixel @ min.less |
|
684 |
display: none; |
|
685 |
} |
|
686 |
} |
|
687 |
|
|
688 |
.nav-list > li.active > .submenu { |
|
689 |
border-top-color: rgba(0,0,0,0.5); |
|
690 |
} |
|
691 |
|
|
692 |
|
|
693 |
.sidebar-shortcuts-large { |
|
694 |
background-color: @shortcuts-background; |
|
695 |
.box-shadow(none); |
|
696 |
|
|
697 |
border: 1px solid lighten(@nav-item-border , 5%); |
|
698 |
border-width: 0 1px 1px 0; |
|
699 |
|
|
700 |
top: 0; |
|
701 |
|
|
702 |
border-color: #666; |
|
703 |
} |
|
704 |
|
|
705 |
|
|
706 |
//-li > .arrow |
|
707 |
.nav-list > li > .arrow, |
|
708 |
.nav-list > li.active.highlight > .arrow { |
|
709 |
&:after { |
|
710 |
border-right-color: desaturate(@default-color , 25%); |
|
711 |
-moz-border-right-colors: desaturate(@default-color , 25%); |
|
712 |
} |
|
713 |
&:before { |
|
714 |
border-right-color: #333; |
|
715 |
border-right-color: rgba(0,0,0,0.7); |
|
716 |
-moz-border-right-colors: rgba(0,0,0,0.7); |
|
717 |
} |
|
718 |
} |
|
719 |
|
|
720 |
.nav-list > li.active:not(.highlight) > a:not(.dropdown-toggle) > .menu-text { |
|
721 |
border-width: 1px; |
|
722 |
border-top-color: lighten(@nav-item-border , 5%); |
|
723 |
border-bottom-color: lighten(@nav-item-border , 5%); |
|
724 |
border-right-color: lighten(@nav-item-border , 5%); |
|
725 |
} |
|
726 |
|
|
727 |
.nav-list > li > a > .menu-text, |
|
728 |
.nav-list > li.active.highlight > a > .menu-text { |
|
729 |
border-left-color: #333; |
|
730 |
border-left-color: rgba(0,0,0,0.5); |
|
731 |
} |
|
732 |
.nav-list > li.pull_up > a > .menu-text, |
|
733 |
.nav-list > li.pull_up.active.highlight > a > .menu-text { |
|
734 |
border-left-color: #222; |
|
735 |
border-left-color: rgba(0,0,0,0.7); |
|
736 |
} |
|
737 |
.nav-list > li.pull_up.active:not(.highlight) > a > .menu-text { |
|
738 |
border-left-color: #666; |
|
739 |
} |
|
740 |
|
|
741 |
//-li > .arrow |
|
742 |
.colorize2 (@index) when (@index < 13) { |
|
743 |
@color-val: ~`"color@{index}"`; |
|
744 |
.nav-list > li:nth-child(@{index}) > .arrow:after, |
|
745 |
.nav-list > li.active.highlight:nth-child(@{index}) > .arrow:after |
|
746 |
{ |
|
747 |
border-right-color: desaturate(@@color-val , 25%); |
|
748 |
-moz-border-right-colors: desaturate(@@color-val , 25%); |
|
749 |
} |
|
750 |
.colorize2(@index + 1); |
|
751 |
} |
|
752 |
.colorize2(1); |
|
753 |
|
|
754 |
|
|
755 |
|
|
756 |
|
|
757 |
.nav-list > li.active > a > .menu-text { |
|
758 |
border-left-color: #777; |
|
759 |
} |
|
760 |
//-li > .arrow |
|
761 |
.nav-list > li.active > .arrow { |
|
762 |
&:after { |
|
763 |
border-right-color: @nav-item-background-active; |
|
764 |
-moz-border-right-colors: @nav-item-background-active; |
|
765 |
} |
|
766 |
&:before { |
|
767 |
border-right-color: #888; |
|
768 |
-moz-border-right-colors: #FFF; |
|
769 |
} |
|
770 |
} |
|
771 |
|
|
772 |
|
|
773 |
} |
|
774 |
|
|
775 |
.enable_sidebar_collapse_skin_2() when(@enable-sidebar-collapse = true) { |
|
776 |
.sidebar.menu-min { |
|
777 |
.menu_min_skin_2(); |
|
778 |
} |
|
779 |
} |
|
780 |
.enable_sidebar_collapse_skin_2(); |
|
781 |
|
|
782 |
.enable_responsive_menu_skin_2() when(@enable-responsive-menu = true) { |
|
783 |
//responsive-collapsed-style |
|
784 |
@media (max-width: @grid-float-breakpoint-max) { |
|
785 |
.sidebar.responsive { |
|
786 |
.nav-list > li.active > a:after { |
|
787 |
display: none; |
|
788 |
} |
|
789 |
.nav-list > li.active.highlight > a:after { |
|
790 |
display: block; |
|
791 |
} |
|
792 |
} |
|
793 |
} |
|
794 |
} |
|
795 |
.enable_responsive_menu_skin_2(); |
|
796 |
|
|
797 |
.enable_minimized_responsive_menu_skin_2() when(@enable-minimized-responsive-menu = true) { |
|
798 |
//responsive-collapsed-style |
|
799 |
@media (max-width: @grid-float-breakpoint-max) { |
|
800 |
.sidebar.responsive-min { |
|
801 |
.menu_min_skin_2(); |
|
802 |
.nav-list > li.active > a:after { |
|
803 |
display: block; |
|
804 |
} |
|
805 |
} |
|
806 |
} |
|
807 |
} |
|
808 |
.enable_minimized_responsive_menu_skin_2(); |
|
809 |
|
|
810 |
|
|
811 |
|
|
812 |
|
|
813 |
//highlight .hover menus when mouse is in submenus |
|
814 |
.hover_highlight_skin_2() { |
|
815 |
.nav-list > li { |
|
816 |
.submenu > li.hover:hover > a , .submenu > li.hover.hover-show > a { |
|
817 |
background-color: @submenu-item-background-hover; |
|
818 |
} |
|
819 |
&.active .submenu > li.hover:hover > a , &.active .submenu > li.hover.hover-show > a { |
|
820 |
background-color: @submenu-item-background-hover; |
|
821 |
} |
|
822 |
} |
|
823 |
} |
|
824 |
|
|
825 |
|
|
826 |
//.hover |
|
827 |
.enable_hover_submenu_skin_2() when(@enable-submenu-hover = true) { |
|
828 |
@media only screen and (min-width: @screen-hover-menu) { |
|
829 |
.nav-list li.hover > .submenu { |
|
830 |
padding-left: 0; |
|
831 |
padding-right: 0; |
|
832 |
|
|
833 |
border: 1px solid; |
|
834 |
border-color: @hover-submenu-border; |
|
835 |
|
|
836 |
> li > a { |
|
837 |
margin-bottom: 0; |
|
838 |
margin-top: 0; |
|
839 |
} |
|
840 |
> li:first-child > a { |
|
841 |
border-top-width: 0; |
|
842 |
} |
|
843 |
} |
|
844 |
|
|
845 |
//3rd & 4th |
|
846 |
.nav-list li .submenu > li.hover.active > a { |
|
847 |
background-color: @submenu-item-background-active; |
|
848 |
} |
|
849 |
.nav-list > li > .submenu li.hover > .submenu { |
|
850 |
padding: 2px; |
|
851 |
} |
|
852 |
.nav-list > li > .submenu li > .submenu > li.hover > a { |
|
853 |
border-top-color: #222;//for IE8 |
|
854 |
border-top-color: rgba(255,255,255,0.08); |
|
855 |
} |
|
856 |
.nav-list > li.active.hover:hover > a.dropdown-toggle:after, |
|
857 |
.nav-list > li.active.hover.hover-show > a.dropdown-toggle:after, |
|
858 |
.menu-min .nav-list > li.active:hover > a:after, .menu-min .nav-list > li.active.hover-show > a:after { |
|
859 |
display: none; |
|
860 |
} |
|
861 |
}//@media |
|
862 |
|
|
863 |
.enable_collapsible_responsive_menu_skin_2_tmp() when(@enable-collapsible-responsive-menu = true) { |
|
864 |
//sometimes .hover items are opened in small view, and back in large view we reset the open highlight state |
|
865 |
@media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) { |
|
866 |
.sidebar.navbar-collapse { |
|
867 |
.nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a { |
|
868 |
background-color: @nav-item-background; |
|
869 |
font-weight: normal; |
|
870 |
> .menu-icon , > .menu-text , > .arrow { |
|
871 |
color: inherit; |
|
872 |
} |
|
873 |
} |
|
874 |
|
|
875 |
.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a { |
|
876 |
color: @submenu-item-color; |
|
877 |
} |
|
878 |
|
|
879 |
.nav-list > li > .submenu > li.open.hover:not(:hover):not(:focus):not(.active) > a { |
|
880 |
> .menu-icon { |
|
881 |
display: none; |
|
882 |
} |
|
883 |
} |
|
884 |
|
|
885 |
} |
|
886 |
} |
|
887 |
} |
|
888 |
.enable_collapsible_responsive_menu_skin_2_tmp(); |
|
889 |
|
|
890 |
@media only screen and (min-width: @screen-hover-menu) { |
|
891 |
.sidebar:not(.navbar-collapse) { |
|
892 |
.hover_highlight_skin_2(); |
|
893 |
} |
|
894 |
} |
|
895 |
} |
|
896 |
.enable_hover_submenu_skin_2(); |
|
897 |
|
|
898 |
|
|
899 |
.enable_collapsible_responsive_menu_skin_2() when(@enable-collapsible-responsive-menu = true) { |
|
900 |
//navbar-collapse |
|
901 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
902 |
.sidebar.navbar-collapse { |
|
903 |
.nav-list > li > .submenu:before, |
|
904 |
.nav-list > li > .submenu > li:before , |
|
905 |
.nav-list > li > .submenu > li > .submenu:before { |
|
906 |
display: none; |
|
907 |
} |
|
908 |
|
|
909 |
.nav-list > li:before { |
|
910 |
height: @nav-item-height + 2 !important; |
|
911 |
top: 0; |
|
912 |
} |
|
913 |
|
|
914 |
.nav-list > li > .submenu li > .submenu > li > a { |
|
915 |
margin-left: 0; |
|
916 |
padding-left: 42px; |
|
917 |
} |
|
918 |
.nav-list > li > .submenu li > .submenu > li > .submenu > li > a { |
|
919 |
margin-left: 0; |
|
920 |
padding-left: 58px; |
|
921 |
} |
|
922 |
.nav-list > li > a > .menu-text, .nav-list > li.active.highlight > a > .menu-text { |
|
923 |
border-width: 0; |
|
924 |
} |
|
925 |
} |
|
926 |
} |
|
927 |
|
|
928 |
.enable_hover_submenu_skin_2_tmp() when(@enable-submenu-hover = true) { |
|
929 |
@media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) { |
|
930 |
.sidebar.navbar-collapse { |
|
931 |
.nav-list > li.hover > .submenu { |
|
932 |
padding-bottom: 0; |
|
933 |
} |
|
934 |
.nav-list li.hover > .submenu { |
|
935 |
//background-color: transparent; |
|
936 |
border-width: 0; |
|
937 |
} |
|
938 |
|
|
939 |
.nav-list li li.hover:hover > a , .nav-list li li.hover.hover-show > a { |
|
940 |
background-color: transparent; |
|
941 |
} |
|
942 |
.nav-list li li.hover > a:hover { |
|
943 |
background-color: @submenu-item-background-hover; |
|
944 |
} |
|
945 |
.nav-list > li > .submenu > li.active.hover:hover > a , |
|
946 |
.nav-list > li > .submenu > li.active.hover.hover-show > a { |
|
947 |
background-color: @submenu-item-background-active; |
|
948 |
} |
|
949 |
.nav-list > li > .submenu > li.active.hover > a:hover { |
|
950 |
background-color: @submenu-item-background-hover; |
|
951 |
} |
|
952 |
|
|
953 |
.nav-list > li > .submenu li.hover > .submenu { |
|
954 |
border-left-width: 0t; |
|
955 |
padding: 0; |
|
956 |
} |
|
957 |
.nav-list > li > .submenu li.hover > .submenu > li > a { |
|
958 |
margin-left: 0 !important; |
|
959 |
padding-left: 37px !important; |
|
960 |
} |
|
961 |
.nav-list > li > .submenu li > .submenu > li > .submenu > li > a { |
|
962 |
margin-left: 0 !important; |
|
963 |
padding-left: 51px !important; |
|
964 |
} |
|
965 |
.nav-list li.hover > .submenu li > a { |
|
966 |
padding-left: 32px !important; |
|
967 |
> .menu-icon { |
|
968 |
background-color: transparent; |
|
969 |
} |
|
970 |
} |
|
971 |
|
|
972 |
.nav-list li.hover > .submenu > li.active > a { |
|
973 |
background-color: transparent; |
|
974 |
font-weight: normal; |
|
975 |
} |
|
976 |
.nav-list > li.hover > .submenu > li.active > a { |
|
977 |
background-color: @submenu-item-background-active; |
|
978 |
font-weight: bold; |
|
979 |
} |
|
980 |
.nav-list li.hover > .submenu > li.active > a:hover { |
|
981 |
background-color: @submenu-item-background-hover; |
|
982 |
} |
|
983 |
|
|
984 |
|
|
985 |
.nav-list > li > .submenu li > .submenu > li.hover > a { |
|
986 |
border-top-width: 0; |
|
987 |
} |
|
988 |
|
|
989 |
|
|
990 |
|
|
991 |
.nav-list > li .submenu > li.hover > a { |
|
992 |
> .menu-icon { |
|
993 |
left: 12px; |
|
994 |
} |
|
995 |
} |
|
996 |
|
|
997 |
.hover_highlight_skin_2(); |
|
998 |
|
|
999 |
|
|
1000 |
|
|
1001 |
&.menu-min .nav-list li.hover > .submenu li > a { |
|
1002 |
padding-left: 32px; |
|
1003 |
} |
|
1004 |
|
|
1005 |
} |
|
1006 |
|
|
1007 |
}//@media |
|
1008 |
} |
|
1009 |
.enable_hover_submenu_skin_2_tmp(); |
|
1010 |
|
|
1011 |
|
|
1012 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
1013 |
.sidebar.navbar-collapse { |
|
1014 |
.enable_sidebar_collapse_skin_22() when(@enable-sidebar-collapse = true) { |
|
1015 |
&.menu-min { |
|
1016 |
.sidebar-shortcuts-large { |
|
1017 |
border-width: 0; |
|
1018 |
} |
|
1019 |
|
|
1020 |
.nav-list > li { |
|
1021 |
> a > .menu-text { |
|
1022 |
font-weight: normal; |
|
1023 |
color: @nav-item-color; |
|
1024 |
margin-left: 0; |
|
1025 |
} |
|
1026 |
&:hover > a > .menu-text { |
|
1027 |
font-weight: bold; |
|
1028 |
color: @nav-item-color-hover; |
|
1029 |
} |
|
1030 |
&.active > a > .menu-text { |
|
1031 |
font-weight: bold; |
|
1032 |
color: @nav-item-color-active; |
|
1033 |
} |
|
1034 |
|
|
1035 |
> .submenu { |
|
1036 |
margin-left: 0; |
|
1037 |
border-top-width: 0; |
|
1038 |
} |
|
1039 |
} |
|
1040 |
|
|
1041 |
.nav-list > li > .submenu li > a > .menu-icon { |
|
1042 |
left: 12px; |
|
1043 |
} |
|
1044 |
} |
|
1045 |
} |
|
1046 |
.enable_sidebar_collapse_skin_22(); |
|
1047 |
|
|
1048 |
} |
|
1049 |
} |
|
1050 |
|
|
1051 |
} |
|
1052 |
.enable_collapsible_responsive_menu_skin_2(); |
|
1053 |
|
|
1054 |
@media (min-width: @screen-compact-menu) { |
|
1055 |
.sidebar.compact .nav-list > li:before { |
|
1056 |
height: auto; |
|
1057 |
bottom: 0; |
|
1058 |
} |
|
1059 |
} |
|
1060 |
|
|
1061 |
|
|
1062 |
|
|
1063 |
.enable_old_menu_toggle_button_skin_2() when(@enable-old-menu-toggle-button = true) { |
|
1064 |
.main-container .menu-toggler { |
|
1065 |
@color: #D685B0; |
|
1066 |
background-color: @color; |
|
1067 |
|
|
1068 |
&:before { |
|
1069 |
border-top-color: #FFF; |
|
1070 |
border-bottom-color: #FFF; |
|
1071 |
} |
|
1072 |
&:after { |
|
1073 |
border-top-color: #FFF; |
|
1074 |
border-bottom-color: #FFF; |
|
1075 |
} |
|
1076 |
|
|
1077 |
> .toggler-text { |
|
1078 |
border-top-color: @color; |
|
1079 |
-moz-border-top-colors: @color; |
|
1080 |
} |
|
1081 |
} |
|
1082 |
} |
|
1083 |
.enable_old_menu_toggle_button_skin_2(); |
|
1084 |
|
|
1085 |
.navbar .navbar-toggle { |
|
1086 |
background-color: #DB78A1; |
|
1087 |
|
|
1088 |
&:focus { |
|
1089 |
background-color: #DB78A1; |
|
1090 |
border-color: transparent; |
|
1091 |
} |
|
1092 |
&:hover { |
|
1093 |
background-color: darken(#DB78A1 , 4%); |
|
1094 |
border-color: rgba(255,255,255,0.1); |
|
1095 |
} |
|
1096 |
&.display, &[data-toggle=collapse]:not(.collapsed) { |
|
1097 |
background-color: darken(#DB78A1 , 8%); |
|
1098 |
box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25); |
|
1099 |
border-color: rgba(255, 255, 255, 0.35); |
|
1100 |
} |
|
1101 |
} |
|
1102 |
|
|
1103 |
|
|
1104 |
|
|
1105 |
@media only screen and (min-width: @screen-sm-min) { |
|
1106 |
.container.main-container:before { |
|
1107 |
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); |
|
1108 |
} |
|
1109 |
} |
|
1110 |
|
|
1111 |
|
|
1112 |
|
|
1113 |
//horizontal menu |
|
1114 |
.enable_horizontal_menu_skin_2() when(@enable-horizontal-menu = true) { |
|
1115 |
@media only screen and (min-width: @grid-float-breakpoint) { |
|
1116 |
.sidebar.h-sidebar { |
|
1117 |
background-color: @nav-item-background; |
|
1118 |
&:before { |
|
1119 |
background-color: lighten(@sidebar-background , 15%); |
|
1120 |
border-bottom-color: lighten(@nav-item-border , 20%); |
|
1121 |
} |
|
1122 |
|
|
1123 |
.nav-list { |
|
1124 |
border-bottom-width: 0; |
|
1125 |
} |
|
1126 |
|
|
1127 |
.nav-list > li > a > .menu-text { |
|
1128 |
color: @nav-item-color; |
|
1129 |
font-weight: normal; |
|
1130 |
} |
|
1131 |
.nav-list > li:hover > a > .menu-text , |
|
1132 |
.nav-list > li.hover-show > a > .menu-text { |
|
1133 |
color: @nav-item-color-active; |
|
1134 |
font-weight: normal; |
|
1135 |
} |
|
1136 |
.nav-list > li.active > a > .menu-text { |
|
1137 |
font-weight: bold; |
|
1138 |
color: @nav-item-color-active; |
|
1139 |
} |
|
1140 |
|
|
1141 |
.nav-list > li:before { |
|
1142 |
left: 0; |
|
1143 |
right: 0; |
|
1144 |
} |
|
1145 |
|
|
1146 |
.nav-list > li.hover > .submenu { |
|
1147 |
margin-left: -1px; |
|
1148 |
border-width: 1px; |
|
1149 |
border-top-color: rgba(0, 0, 0, 0.4); |
|
1150 |
} |
|
1151 |
.nav-list > li .submenu > li.hover > a { |
|
1152 |
padding-left: 22px; |
|
1153 |
} |
|
1154 |
.nav-list > li .submenu > li.hover > a > .menu-icon { |
|
1155 |
left: 4px; |
|
1156 |
} |
|
1157 |
|
|
1158 |
&.compact .nav-list > li.active:before { |
|
1159 |
height: 2px; |
|
1160 |
bottom: auto; |
|
1161 |
} |
|
1162 |
|
|
1163 |
|
|
1164 |
.nav-list > li.highlight.active > a:after { |
|
1165 |
display: none; |
|
1166 |
} |
|
1167 |
|
|
1168 |
.nav-list > li.hover.active > a:after { |
|
1169 |
display: block; |
|
1170 |
|
|
1171 |
-moz-border-left-colors: none; |
|
1172 |
-moz-border-right-colors: none; |
|
1173 |
-moz-border-bottom-colors: #FFF; |
|
1174 |
|
|
1175 |
border-color: transparent transparent #FFF; |
|
1176 |
border-width: 8px; |
|
1177 |
|
|
1178 |
top: auto; |
|
1179 |
bottom: 0; |
|
1180 |
|
|
1181 |
right: auto; |
|
1182 |
left: 50%; |
|
1183 |
margin-left: -8px; |
|
1184 |
} |
|
1185 |
.nav-list > li.hover.active:hover > a:after, |
|
1186 |
.nav-list > li.hover.active.hover-show > a:after { |
|
1187 |
display: none; |
|
1188 |
} |
|
1189 |
|
|
1190 |
|
|
1191 |
.sidebar-shortcuts-large { |
|
1192 |
background-color: @sidebar-background; |
|
1193 |
border-width: 1px 0 0 !important;//to override .rtl + .menu-min.h-sidebar |
|
1194 |
border-top: 1px solid #777; |
|
1195 |
top: 100%; |
|
1196 |
} |
|
1197 |
.sidebar-shortcuts-mini { |
|
1198 |
padding-top: 2px; |
|
1199 |
} |
|
1200 |
.sidebar-shortcuts-mini > .btn { |
|
1201 |
padding: 7px; |
|
1202 |
} |
|
1203 |
|
|
1204 |
|
|
1205 |
.nav-list > li.active.highlight > .arrow { |
|
1206 |
&:after { |
|
1207 |
border-right-color: transparent; |
|
1208 |
border-bottom-color: desaturate(@default-color , 25%); |
|
1209 |
} |
|
1210 |
&:before { |
|
1211 |
border-right-color: transparent; |
|
1212 |
-moz-border-right-colors: none; |
|
1213 |
|
|
1214 |
border-bottom-color: #191919; |
|
1215 |
-moz-border-bottom-colors: #191919; |
|
1216 |
} |
|
1217 |
} |
|
1218 |
|
|
1219 |
//-li > .arrow |
|
1220 |
.nav-list > li.hover > .arrow { |
|
1221 |
&:after { |
|
1222 |
border-right-color: transparent; |
|
1223 |
-moz-border-right-colors: none; |
|
1224 |
|
|
1225 |
border-bottom-color: @submenu-background; |
|
1226 |
-moz-border-bottom-colors: @submenu-background; |
|
1227 |
} |
|
1228 |
&:before { |
|
1229 |
-moz-border-right-colors: none; |
|
1230 |
border-right-color: transparent; |
|
1231 |
|
|
1232 |
border-bottom-color: #191919; |
|
1233 |
-moz-border-bottom-colors: #191919; |
|
1234 |
//border-bottom-color: rgba(0,0,0,0.8); |
|
1235 |
} |
|
1236 |
} |
|
1237 |
|
|
1238 |
|
|
1239 |
|
|
1240 |
.sidebar-shortcuts-large { |
|
1241 |
&:after { |
|
1242 |
border-bottom-color: @sidebar-background; |
|
1243 |
} |
|
1244 |
&:before { |
|
1245 |
border-bottom-color: #999; |
|
1246 |
-moz-border-bottom-colors: #999; |
|
1247 |
} |
|
1248 |
} |
|
1249 |
|
|
1250 |
&.menu-min { |
|
1251 |
.sidebar-shortcuts-mini { |
|
1252 |
padding-top: 3px; |
|
1253 |
} |
|
1254 |
.sidebar-shortcuts-mini > .btn { |
|
1255 |
padding: 6px; |
|
1256 |
} |
|
1257 |
|
|
1258 |
.nav-list > li > a > .menu-text { |
|
1259 |
border-width: 1px 0 0 0; |
|
1260 |
border-top-color: rgba(0, 0, 0, 0.5); |
|
1261 |
} |
|
1262 |
|
|
1263 |
.nav-list > li > .arrow, .nav-list > li.active.highlight > .arrow { |
|
1264 |
&:before { |
|
1265 |
-moz-border-bottom-colors: rgba(0, 0, 0, 0.7); |
|
1266 |
border-bottom-color: rgba(0, 0, 0, 0.7); |
|
1267 |
} |
|
1268 |
} |
|
1269 |
} |
|
1270 |
|
|
1271 |
|
|
1272 |
|
|
1273 |
.colorize3 (@index) when (@index < 13) { |
|
1274 |
@color-val: ~`"color@{index}"`; |
|
1275 |
&.menu-min .nav-list > li:nth-child(@{index}) > .arrow:after, |
|
1276 |
&.menu-min .nav-list > li.active.highlight:nth-child(@{index}) > .arrow:after |
|
1277 |
{ |
|
1278 |
border-bottom-color: desaturate(@@color-val , 25%); |
|
1279 |
-moz-border-bottom-colors: desaturate(@@color-val , 25%); |
|
1280 |
} |
|
1281 |
.colorize3(@index + 1); |
|
1282 |
} |
|
1283 |
.colorize3(1); |
|
1284 |
|
|
1285 |
&.menu-min .nav-list > li.active > .arrow { |
|
1286 |
&:after { |
|
1287 |
border-bottom-color: @nav-item-background-active; |
|
1288 |
-moz-border-bottom-colors: @nav-item-background-active; |
|
1289 |
} |
|
1290 |
&:before { |
|
1291 |
border-bottom-color: #888; |
|
1292 |
-moz-border-bottom-colors: #FFF; |
|
1293 |
} |
|
1294 |
} |
|
1295 |
|
|
1296 |
&.menu-min .nav-list > li > a > .menu-text, |
|
1297 |
&.menu-min .nav-list > li.active.highlight > a > .menu-text { |
|
1298 |
border-top-color: #333; |
|
1299 |
border-top-color: rgba(0,0,0,0.5); |
|
1300 |
} |
|
1301 |
&.menu-min .nav-list > li.active > a > .menu-text { |
|
1302 |
border-top-color: #777; |
|
1303 |
} |
|
1304 |
|
|
1305 |
|
|
1306 |
|
|
1307 |
+ .main-content .breadcrumbs { |
|
1308 |
border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%); |
|
1309 |
top: 2px; |
|
1310 |
} |
|
1311 |
|
|
1312 |
} |
|
1313 |
|
|
1314 |
.h-sidebar.sidebar-fixed { |
|
1315 |
+ .main-content { |
|
1316 |
padding-top: 86px; |
|
1317 |
} |
|
1318 |
&.no-gap + .main-content { |
|
1319 |
padding-top: 72px; |
|
1320 |
} |
|
1321 |
|
|
1322 |
&.menu-min + .main-content { |
|
1323 |
padding-top: 61px; |
|
1324 |
} |
|
1325 |
&.menu-min.no-gap + .main-content { |
|
1326 |
padding-top: 47px; |
|
1327 |
} |
|
1328 |
} |
|
1329 |
|
|
1330 |
.main-content .h-sidebar.sidebar .nav-list { |
|
1331 |
border-left: 1px solid lighten(@nav-item-border , 6%); |
|
1332 |
} |
|
1333 |
|
|
1334 |
}//@media |
|
1335 |
|
|
1336 |
|
|
1337 |
} |
|
1338 |
.enable_horizontal_menu_skin_2(); |
|
1339 |
|
|
1340 |
|
|
1341 |
.sidebar-scroll { |
|
1342 |
.sidebar-shortcuts { |
|
1343 |
border-bottom-color: lighten(@nav-item-border , 5%); |
|
1344 |
} |
|
1345 |
.sidebar-toggle { |
|
1346 |
border-top-color: lighten(@nav-item-border , 5%); |
|
1347 |
} |
|
1348 |
} |
|
1349 |
.scrollout .scroll-track { |
|
1350 |
background-color: transparent; |
|
1351 |
} |
|
1352 |
.scrollout .scroll-bar { |
|
1353 |
background-color: #CCC; |
|
1354 |
background-color: rgba(0,0,0,0.2); |
|
1355 |
} |
|
1356 |
|
|
1357 |
|
|
1358 |
|
|
1359 |
@media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) { |
|
1360 |
.navbar.navbar-collapse { |
|
1361 |
background-color: transparent; |
|
1362 |
&:before , .navbar-container { |
|
1363 |
background: @navbar-background; |
|
1364 |
} |
|
1365 |
} |
|
1366 |
} |
|
1367 |
|
|
1368 |
|
|
1369 |
|
|
1370 |
//disabled |
|
1371 |
.nav-list > li.disabled:before { |
|
1372 |
display: none !important; |
|
1373 |
} |
|
1374 |
.nav-list > li.disabled > a , .nav-list > li > a.disabled { |
|
1375 |
background-color: #555 !important; |
|
1376 |
color: #CCC !important; |
|
1377 |
> .menu-text { |
|
1378 |
color: #CCC !important; |
|
1379 |
} |
|
1380 |
|
|
1381 |
.label, .badge { |
|
1382 |
background-color: rgba(0, 0, 0, 0.5) !important; |
|
1383 |
} |
|
1384 |
} |
|
1385 |
.nav-list > li.active.highlight.disabled > a:after, |
|
1386 |
.nav-list > li.active.highlight > a.disabled:after { |
|
1387 |
-moz-border-left-colors: #555 !important; |
|
1388 |
border-left-color: #555 !important; |
|
1389 |
} |
|
1390 |
|
|
1391 |
.nav-list li .submenu > li.disabled > a , .nav-list li .submenu > li > a.disabled, |
|
1392 |
.nav-list li.disabled .submenu > li > a , .nav-list li > a.disabled + .submenu > li > a { |
|
1393 |
background-color: #666 !important; |
|
1394 |
color: #DDD !important; |
|
1395 |
cursor: not-allowed !important; |
|
1396 |
> .menu-icon { |
|
1397 |
display: none; |
|
1398 |
} |
|
1399 |
} |
|
1400 |
|
|
1401 |
|
|
1402 |
}//.skin-2 |