提交 | 用户 | 时间
|
58d006
|
1 |
.sidebar.sidebar-fixed { |
A |
2 |
position: fixed; |
|
3 |
top: auto; |
|
4 |
float: none !important; |
|
5 |
|
|
6 |
z-index: @zindex-sidebar-fixed;//???! |
|
7 |
|
|
8 |
&:before { |
|
9 |
height: 5000px; |
|
10 |
top: auto; |
|
11 |
bottom: auto; |
|
12 |
} |
|
13 |
} |
|
14 |
|
|
15 |
//for sidebar scroll style 2, touch device |
|
16 |
.sidebar-scroll-native { |
|
17 |
overflow-y: scroll !important; |
|
18 |
overflow-x: hidden; |
|
19 |
} |
|
20 |
|
|
21 |
//android's default browser has a problem with "top: auto" when fixed |
|
22 |
body.mob-safari { |
|
23 |
.sidebar.sidebar-fixed { |
|
24 |
top: @navbar-min-height; |
|
25 |
} |
|
26 |
@media (max-width: @screen-topbar-down) { |
|
27 |
.navbar-fixed-top:not(.navbar-collapse) + .main-container .sidebar-fixed { |
|
28 |
top: (@navbar-min-height * 2); |
|
29 |
} |
|
30 |
} |
|
31 |
//also when .navbar is fixed, .responsive sidebar becomes automatically fixed |
|
32 |
@media (max-width: @grid-float-breakpoint-max) { |
|
33 |
.navbar-fixed-top + .main-container .sidebar.responsive { |
|
34 |
top: @navbar-min-height; |
|
35 |
} |
|
36 |
} |
|
37 |
@media (max-width: @screen-topbar-down) { |
|
38 |
.navbar-fixed-top + .main-container .sidebar.responsive { |
|
39 |
top: (@navbar-min-height * 2); |
|
40 |
} |
|
41 |
} |
|
42 |
} |
|
43 |
|
|
44 |
/** |
|
45 |
//http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements |
|
46 |
//webkit & Chrome22+ special case |
|
47 |
//webkit is not following the standard specs as of Chrome22+ |
|
48 |
@media screen and (-webkit-min-device-pixel-ratio:0) { |
|
49 |
//like it happens in Firefox&IE, we expect when we set "z-index:auto" for fixed position .sidebar, |
|
50 |
//the child .submenu elements "z-index" is independent |
|
51 |
//and for example a "z-index:1031" .submenu appears on top of a fixed .navbar with "z-index:1030" |
|
52 |
//and a "z-index:1010" .popover appears on top of ".sidebar" but below ".submenu" |
|
53 |
//but webkit defines a new stacking context on "fixed" position elements(.sidebar here) |
|
54 |
//and the above doesn't happen, in fact .submenu inside fixed .sidebar with "z-index:auto" will appear below everything |
|
55 |
//so we set a good(?) "z-index" for .sidebar, but still it's not as good as standard specs (such as in Firefox) |
|
56 |
//and we may need other workarounds! |
|
57 |
//and you may change it based on your needs |
|
58 |
|
|
59 |
//it's possible have standard functionality in Chrome by going to: |
|
60 |
//chrome://flags/#fixed-position-creates-stacking-context |
|
61 |
//changing "Fixed position elements create stacking contexts" to "Disabled" |
|
62 |
//and removing the following rules |
|
63 |
//and assignning a higher "@submenu-zindex" |
|
64 |
|
|
65 |
.sidebar.sidebar-fixed { |
|
66 |
z-index: @zindex-sidebar-fixed;//???! |
|
67 |
|
|
68 |
&::before { |
|
69 |
height: 5000px; |
|
70 |
top: auto; |
|
71 |
bottom: auto; |
|
72 |
} |
|
73 |
} |
|
74 |
} |
|
75 |
*/ |
|
76 |
|
|
77 |
|
|
78 |
|
|
79 |
|
|
80 |
//************************************************************************************ |
|
81 |
//remove the following to disable fixed sidebar (style1 - default) on smaller devices |
|
82 |
//if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less |
|
83 |
|
|
84 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
85 |
.responsive.sidebar-fixed { |
|
86 |
left: auto; |
|
87 |
margin-left: auto; |
|
88 |
} |
|
89 |
|
|
90 |
//if `.menu-toggler` button is inside `fixed .navbar` let sidebar become fixed as well |
|
91 |
.navbar-fixed-top + .main-container > .responsive { |
|
92 |
position: fixed; |
|
93 |
left: auto; |
|
94 |
margin-left: auto; |
|
95 |
//-moz-backface-visibility: hidden; |
|
96 |
} |
|
97 |
//but if `.menu-toggler` button is inside .main-container, then `fixed .navbar` should have no effect |
|
98 |
.navbar-fixed-top + .main-container > .menu-toggler + .responsive { |
|
99 |
position: absolute; |
|
100 |
left: (@sidebar-width); |
|
101 |
margin-left: -(@sidebar-width); |
|
102 |
//-moz-backface-visibility: visible; |
|
103 |
} |
|
104 |
//unless specified as fixed |
|
105 |
.navbar-fixed-top + .main-container > .menu-toggler + .responsive.sidebar-fixed { |
|
106 |
position: fixed; |
|
107 |
left: auto; |
|
108 |
margin-left: auto; |
|
109 |
//-moz-backface-visibility: hidden; |
|
110 |
} |
|
111 |
} |
|
112 |
|
|
113 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
114 |
.sidebar.responsive.sidebar-fixed { |
|
115 |
position: fixed; |
|
116 |
left: auto; |
|
117 |
margin-left: auto; |
|
118 |
} |
|
119 |
.main-container .menu-toggler.fixed { |
|
120 |
position: fixed; |
|
121 |
left: auto; |
|
122 |
z-index: @zindex-sidebar-fixed - 1; |
|
123 |
//-moz-backface-visibility: hidden; |
|
124 |
} |
|
125 |
|
|
126 |
//for responsive style # 2 |
|
127 |
//becuase ".sidebar.responsive-max" is "position: relative" & "margin-left: -190px" |
|
128 |
.sidebar.sidebar-fixed.responsive-max { |
|
129 |
position: fixed; |
|
130 |
left: auto; |
|
131 |
margin-left: auto; |
|
132 |
} |
|
133 |
} |