提交 | 用户 | 时间
|
58d006
|
1 |
//some breadcrumbs variables |
A |
2 |
|
|
3 |
|
|
4 |
@breadcrumb-background: #F5F5F5; |
|
5 |
@breadcrumb-border: #E5E5E5; |
|
6 |
@breadcrumb-text-color: #555; |
|
7 |
@breadcrumb-link-color: #4C8FBD; |
|
8 |
|
|
9 |
@breadcrumb-separator: "\f105";//font awesome icon |
|
10 |
@breadcrumb-margin-left: 12px;//!ignore |
|
11 |
|
|
12 |
|
|
13 |
.enable_breadcrumbs() when(@enable-breadcrumbs = true) { |
|
14 |
|
|
15 |
// breadcrumbs and searchbox |
|
16 |
.breadcrumbs { |
|
17 |
position: relative; |
|
18 |
z-index: auto; |
|
19 |
|
|
20 |
border-bottom: 1px solid @breadcrumb-border; |
|
21 |
background-color: @breadcrumb-background; |
|
22 |
|
|
23 |
min-height: @breadcrumb-height; |
|
24 |
line-height: (@breadcrumb-height - 1); |
|
25 |
|
|
26 |
padding: 0 12px 0 0; |
|
27 |
} |
|
28 |
|
|
29 |
|
|
30 |
|
|
31 |
.breadcrumb { |
|
32 |
background-color: transparent; |
|
33 |
display: inline-block; |
|
34 |
line-height: 20px; |
|
35 |
|
|
36 |
margin: 6px 22px 0 @breadcrumb-margin-left; |
|
37 |
padding: 0; |
|
38 |
|
|
39 |
font-size: @font-size-breadcrumb; |
|
40 |
color: #333; |
|
41 |
|
|
42 |
border-radius: 0; |
|
43 |
> li { |
|
44 |
& , &.active { |
|
45 |
color: @breadcrumb-text-color; |
|
46 |
padding: 0 3px 0 3px; |
|
47 |
} |
|
48 |
|
|
49 |
|
|
50 |
> a { |
|
51 |
display: inline-block; |
|
52 |
color: @breadcrumb-link-color; |
|
53 |
} |
|
54 |
|
|
55 |
+ li:before { |
|
56 |
//float: left;//it has a problem with fontAwesome in RTL |
|
57 |
font-family: FontAwesome; |
|
58 |
font-size: @font-size-breadcrumb-sep; |
|
59 |
content:@breadcrumb-separator; |
|
60 |
color: @breadcrumb-arrow-color; |
|
61 |
|
|
62 |
padding: 0; |
|
63 |
margin: 0 8px 0 0; |
|
64 |
position: relative; |
|
65 |
top: 1px; |
|
66 |
} |
|
67 |
} |
|
68 |
|
|
69 |
|
|
70 |
.home-icon { |
|
71 |
font-size: @font-size-breadcrumbs-home; |
|
72 |
|
|
73 |
margin-left: 2px; |
|
74 |
margin-right: 2px; |
|
75 |
|
|
76 |
vertical-align: top; |
|
77 |
} |
|
78 |
|
|
79 |
} |
|
80 |
|
|
81 |
@media only screen and (max-width: @screen-xs) { |
|
82 |
.breadcrumb > li > a { |
|
83 |
padding: 0 1px; |
|
84 |
} |
|
85 |
} |
|
86 |
|
|
87 |
//some changes in margins and paddings |
|
88 |
@media only screen and (max-width: @grid-float-breakpoint-max) { |
|
89 |
.menu-toggler + .sidebar.responsive + .main-content .breadcrumb { |
|
90 |
margin-left: 90px; |
|
91 |
} |
|
92 |
} |
|
93 |
@media only screen and (max-width: @screen-tiny) { |
|
94 |
.breadcrumb { |
|
95 |
margin-left: 8px; |
|
96 |
} |
|
97 |
.menu-toggler + .sidebar.responsive + .main-content .breadcrumb { |
|
98 |
margin-left: 36px; |
|
99 |
} |
|
100 |
} |
|
101 |
|
|
102 |
} |
|
103 |
.enable_breadcrumbs(); |
|
104 |
|
|
105 |
|
|
106 |
|
|
107 |
.enable_fixed_breadcrumbs() when(@enable-fixed-breadcrumbs = true) { |
|
108 |
//fixed breadcrumbs |
|
109 |
@media (min-width: @screen-fixed-breadcrumbs) { |
|
110 |
.breadcrumbs-fixed { |
|
111 |
position: fixed; |
|
112 |
right: 0; |
|
113 |
left: 0; |
|
114 |
top: auto; |
|
115 |
z-index: @zindex-breadcrumbs-fixed; |
|
116 |
|
|
117 |
+ .page-content { |
|
118 |
padding-top: @page-content-padding-top + @breadcrumb-height; |
|
119 |
} |
|
120 |
} |
|
121 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
122 |
left: (@sidebar-width); |
|
123 |
} |
|
124 |
|
|
125 |
|
|
126 |
//android's default browser has a problem with "top: auto" when fixed |
|
127 |
body.mob-safari { |
|
128 |
.breadcrumbs-fixed { |
|
129 |
top: @navbar-min-height; |
|
130 |
} |
|
131 |
/** |
|
132 |
//not needed because breadcrumbs is not fixed at this point |
|
133 |
media (max-width: @screen-topbar-down) { |
|
134 |
.navbar-fixed-top:not(.navbar-collapse) + .main-container .breadcrumbs-fixed { |
|
135 |
top: (@navbar-min-height * 2); |
|
136 |
} |
|
137 |
}*/ |
|
138 |
} |
|
139 |
}//@media |
|
140 |
|
|
141 |
|
|
142 |
//when sidebar is compact or minimized |
|
143 |
@media (min-width: max(@grid-float-breakpoint, @screen-compact-menu)) { |
|
144 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
145 |
left: (@sidebar-compact-width); |
|
146 |
} |
|
147 |
} |
|
148 |
|
|
149 |
@media (min-width: @grid-float-breakpoint) { |
|
150 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
151 |
left: (@sidebar-min-width); |
|
152 |
} |
|
153 |
} |
|
154 |
|
|
155 |
@media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) { |
|
156 |
.breadcrumbs-fixed, .sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
157 |
left: 0; |
|
158 |
} |
|
159 |
.sidebar.responsive-min , .sidebar.responsive-max { |
|
160 |
+ .main-content .breadcrumbs-fixed { |
|
161 |
left: (@sidebar-min-width); |
|
162 |
} |
|
163 |
} |
|
164 |
} |
|
165 |
|
|
166 |
.enable_container_breadcrumbs() when(@enable-container = true) { |
|
167 |
.container.main-container { |
|
168 |
|
|
169 |
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) { |
|
170 |
.breadcrumbs-fixed { |
|
171 |
left: auto; |
|
172 |
right: auto; |
|
173 |
width: @container-sm; |
|
174 |
} |
|
175 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
176 |
left: auto; |
|
177 |
right: auto; |
|
178 |
width: @container-sm - @sidebar-width; |
|
179 |
} |
|
180 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
181 |
width: @container-sm - @sidebar-compact-width; |
|
182 |
} |
|
183 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
184 |
left: auto; |
|
185 |
right: auto; |
|
186 |
width: @container-sm - @sidebar-min-width; |
|
187 |
} |
|
188 |
} |
|
189 |
|
|
190 |
@media (min-width: max(@screen-compact-menu, @screen-md-min)) { |
|
191 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
192 |
width: @container-md - @sidebar-compact-width; |
|
193 |
} |
|
194 |
} |
|
195 |
@media (min-width: @screen-md-min) { |
|
196 |
.breadcrumbs-fixed { |
|
197 |
width: @container-md; |
|
198 |
} |
|
199 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
200 |
width: @container-md - @sidebar-width; |
|
201 |
} |
|
202 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
203 |
width: @container-md - @sidebar-min-width; |
|
204 |
} |
|
205 |
} |
|
206 |
|
|
207 |
@media (min-width: max(@screen-compact-menu, @screen-lg-min)) { |
|
208 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
209 |
width: @container-lg - @sidebar-compact-width; |
|
210 |
} |
|
211 |
} |
|
212 |
@media (min-width: @screen-lg-min) { |
|
213 |
.breadcrumbs-fixed { |
|
214 |
width: @container-lg; |
|
215 |
} |
|
216 |
.sidebar + .main-content .breadcrumbs-fixed { |
|
217 |
width: @container-lg - @sidebar-width; |
|
218 |
} |
|
219 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
220 |
width: @container-lg - @sidebar-min-width; |
|
221 |
} |
|
222 |
} |
|
223 |
} |
|
224 |
|
|
225 |
|
|
226 |
.container.main-container { |
|
227 |
|
|
228 |
@media (min-width: max(@screen-sm-min , @screen-compact-menu, @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) { |
|
229 |
.sidebar.compact + .main-content .breadcrumbs-fixed { |
|
230 |
width: @container-sm; |
|
231 |
} |
|
232 |
} |
|
233 |
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) { |
|
234 |
.breadcrumbs-fixed, |
|
235 |
.sidebar.menu-min + .main-content .breadcrumbs-fixed { |
|
236 |
width: @container-sm; |
|
237 |
} |
|
238 |
|
|
239 |
.sidebar.responsive-min , .sidebar.responsive-max { |
|
240 |
+ .main-content .breadcrumbs-fixed { |
|
241 |
left: auto; |
|
242 |
right: auto; |
|
243 |
width: @container-sm - @sidebar-min-width; |
|
244 |
} |
|
245 |
} |
|
246 |
} |
|
247 |
} |
|
248 |
|
|
249 |
} |
|
250 |
.enable_container_breadcrumbs(); |
|
251 |
|
|
252 |
} |
|
253 |
.enable_fixed_breadcrumbs(); |
|
254 |
|
|
255 |
|
|
256 |
|
|
257 |
|
|
258 |
|
|
259 |
|
|
260 |
|
|
261 |
|
|
262 |
|
|
263 |
//*************************************************************************** |
|
264 |
//*************************************************************************** |
|
265 |
//if you don't want fixed breadcrumbs on smaller devices |
|
266 |
//uncomment the following |
|
267 |
/** |
|
268 |
@media (max-width: @grid-float-breakpoint-max) { |
|
269 |
.breadcrumbs-fixed { |
|
270 |
position: relative; |
|
271 |
left: auto !important; |
|
272 |
right: auto !important; |
|
273 |
top: auto !important; |
|
274 |
width: auto !important; |
|
275 |
|
|
276 |
+ .page-content { |
|
277 |
padding-top: @page-content-padding-top; |
|
278 |
} |
|
279 |
} |
|
280 |
} |
|
281 |
*/ |
|
282 |
|
|
283 |
|
|
284 |
|
|
285 |
//and maybe disable fixed breadcrumbs on horizontal menu style, because of too much fixed height occupied! |
|
286 |
.disable_fixed_breadcrumbs_on_horizontal_menu() when(@enable-horizontal-menu = true) { |
|
287 |
@media (min-width: @grid-float-breakpoint) { |
|
288 |
.h-sidebar + .main-content .breadcrumbs.breadcrumbs-fixed { |
|
289 |
position: relative;// !important; |
|
290 |
top: auto; |
|
291 |
left: auto; |
|
292 |
z-index: auto; |
|
293 |
width: auto;// !important; |
|
294 |
} |
|
295 |
.h-sidebar + .main-content .page-content { |
|
296 |
padding-top: @page-content-padding-top + 4;// !important; |
|
297 |
} |
|
298 |
} |
|
299 |
} |
|
300 |
.disable_fixed_breadcrumbs_on_horizontal_menu(); |