]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Dropdown menus | |
3 | * ------------------------- | |
4 | */ | |
5 | ||
6 | /*Dropdowns in general*/ | |
7 | .dropdown-menu { | |
8 | box-shadow: none; | |
9 | border-color: #eee; | |
10 | > li > a { | |
11 | color: #777; | |
12 | } | |
13 | > li > a > .glyphicon, | |
14 | > li > a > .fa, | |
15 | > li > a > .ion { | |
16 | margin-right: 10px; | |
17 | } | |
18 | > li > a:hover { | |
19 | background-color: lighten(@gray, 5%); | |
20 | color: #333; | |
21 | } | |
22 | > .divider { | |
23 | background-color: #eee; | |
24 | } | |
25 | } | |
26 | ||
27 | //Navbar custom dropdown menu | |
28 | .navbar-nav > .notifications-menu, | |
29 | .navbar-nav > .messages-menu, | |
30 | .navbar-nav > .tasks-menu { | |
31 | //fix width and padding | |
32 | > .dropdown-menu { | |
33 | > li { | |
34 | position: relative; | |
35 | } | |
36 | width: 280px; | |
37 | //Remove padding and margins | |
38 | padding: 0 0 0 0; | |
39 | margin: 0; | |
40 | top: 100%; | |
41 | } | |
42 | //Define header class | |
43 | > .dropdown-menu > li.header { | |
44 | .border-radius(4px; 4px; 0; 0); | |
45 | background-color: #ffffff; | |
46 | padding: 7px 10px; | |
47 | border-bottom: 1px solid #f4f4f4; | |
48 | color: #444444; | |
49 | font-size: 14px; | |
50 | } | |
51 | ||
52 | //Define footer class | |
53 | > .dropdown-menu > li.footer > a { | |
54 | .border-radius(0; 0; 4px; 4px); | |
55 | font-size: 12px; | |
56 | background-color: #fff; | |
57 | padding: 7px 10px; | |
58 | border-bottom: 1px solid #eeeeee; | |
59 | color: #444 !important; | |
60 | @media (max-width: @screen-sm-max) { | |
61 | background: #fff !important; | |
62 | color: #444 !important; | |
63 | } | |
64 | text-align: center; | |
65 | //Hover state | |
66 | &:hover { | |
67 | text-decoration: none; | |
68 | font-weight: normal; | |
69 | } | |
70 | } | |
71 | ||
72 | //Clear inner menu padding and margins | |
73 | > .dropdown-menu > li .menu { | |
74 | max-height: 200px; | |
75 | margin: 0; | |
76 | padding: 0; | |
77 | list-style: none; | |
78 | overflow-x: hidden; | |
79 | > li > a { | |
80 | display: block; | |
81 | white-space: nowrap; /* Prevent text from breaking */ | |
82 | border-bottom: 1px solid #f4f4f4; | |
83 | // Hove state | |
84 | &:hover { | |
85 | background: #f4f4f4; | |
86 | text-decoration: none; | |
87 | } | |
88 | } | |
89 | } | |
90 | } | |
91 | ||
92 | //Notifications menu | |
93 | .navbar-nav > .notifications-menu { | |
94 | > .dropdown-menu > li .menu { | |
95 | // Links inside the menu | |
96 | > li > a { | |
97 | color: #444444; | |
98 | overflow: hidden; | |
99 | text-overflow: ellipsis; | |
100 | padding: 10px; | |
101 | // Icons inside the menu | |
102 | > .glyphicon, | |
103 | > .fa, | |
104 | > .ion { | |
105 | width: 20px; | |
106 | } | |
107 | } | |
108 | ||
109 | } | |
110 | } | |
111 | ||
112 | //Messages menu | |
113 | .navbar-nav > .messages-menu { | |
114 | //Inner menu | |
115 | > .dropdown-menu > li .menu { | |
116 | // Messages menu item | |
117 | > li > a { | |
118 | margin: 0; | |
119 | //line-height: 20px; | |
120 | padding: 10px 10px; | |
121 | // User image | |
122 | > div > img { | |
123 | margin: auto 10px auto auto; | |
124 | width: 40px; | |
125 | height: 40px; | |
126 | } | |
127 | // Message heading | |
128 | > h4 { | |
129 | padding: 0; | |
130 | margin: 0 0 0 45px; | |
131 | color: #444444; | |
132 | font-size: 15px; | |
133 | position: relative; | |
134 | // Small for message time display | |
135 | > small { | |
136 | color: #999999; | |
137 | font-size: 10px; | |
138 | position: absolute; | |
139 | top: 0; | |
140 | right: 0; | |
141 | } | |
142 | } | |
143 | ||
144 | > p { | |
145 | margin: 0 0 0 45px; | |
146 | font-size: 12px; | |
147 | color: #888888; | |
148 | } | |
149 | ||
150 | .clearfix(); | |
151 | ||
152 | } | |
153 | ||
154 | } | |
155 | } | |
156 | ||
157 | //Tasks menu | |
158 | .navbar-nav > .tasks-menu { | |
159 | > .dropdown-menu > li .menu { | |
160 | > li > a { | |
161 | padding: 10px; | |
162 | ||
163 | > h3 { | |
164 | font-size: 14px; | |
165 | padding: 0; | |
166 | margin: 0 0 10px 0; | |
167 | color: #666666; | |
168 | } | |
169 | ||
170 | > .progress { | |
171 | padding: 0; | |
172 | margin: 0; | |
173 | } | |
174 | } | |
175 | } | |
176 | } | |
177 | ||
178 | //User menu | |
179 | .navbar-nav > .user-menu { | |
180 | > .dropdown-menu { | |
181 | .border-top-radius(0); | |
182 | padding: 1px 0 0 0; | |
183 | border-top-width: 0; | |
184 | width: 280px; | |
185 | ||
186 | &, | |
187 | > .user-body { | |
188 | .border-bottom-radius(4px); | |
189 | } | |
190 | // Header menu | |
191 | > li.user-header { | |
192 | height: 175px; | |
193 | padding: 10px; | |
194 | text-align: center; | |
195 | // User image | |
196 | > img { | |
197 | z-index: 5; | |
198 | height: 90px; | |
199 | width: 90px; | |
200 | border: 3px solid; | |
201 | border-color: transparent; | |
202 | border-color: rgba(255, 255, 255, 0.2); | |
203 | } | |
204 | > p { | |
205 | z-index: 5; | |
206 | color: #fff; | |
207 | color: rgba(255, 255, 255, 0.8); | |
208 | font-size: 17px; | |
209 | //text-shadow: 2px 2px 3px #333333; | |
210 | margin-top: 10px; | |
211 | > small { | |
212 | display: block; | |
213 | font-size: 12px; | |
214 | } | |
215 | } | |
216 | } | |
217 | ||
218 | // Menu Body | |
219 | > .user-body { | |
220 | padding: 15px; | |
221 | border-bottom: 1px solid #f4f4f4; | |
222 | border-top: 1px solid #dddddd; | |
223 | .clearfix(); | |
224 | a { | |
225 | color: #444 !important; | |
226 | @media (max-width: @screen-sm-max) { | |
227 | background: #fff !important; | |
228 | color: #444 !important; | |
229 | } | |
230 | } | |
231 | } | |
232 | ||
233 | // Menu Footer | |
234 | > .user-footer { | |
235 | background-color: #f9f9f9; | |
236 | padding: 10px; | |
237 | .clearfix(); | |
238 | .btn-default { | |
239 | color: #666666; | |
240 | &:hover { | |
241 | @media (max-width: @screen-sm-max) { | |
242 | background-color: #f9f9f9; | |
243 | } | |
244 | } | |
245 | } | |
246 | } | |
247 | } | |
248 | .user-image { | |
249 | float: left; | |
250 | width: 25px; | |
251 | height: 25px; | |
252 | border-radius: 50%; | |
253 | margin-right: 10px; | |
254 | margin-top: -2px; | |
255 | @media (max-width: @screen-xs-max) { | |
256 | float: none; | |
257 | margin-right: 0; | |
258 | margin-top: -8px; | |
259 | line-height: 10px; | |
260 | } | |
261 | } | |
262 | } | |
263 | ||
264 | /* Add fade animation to dropdown menus by appending | |
265 | the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/ | |
266 | .open:not(.dropup) > .animated-dropdown-menu { | |
267 | backface-visibility: visible !important; | |
268 | .animation(flipInX .7s both); | |
269 | ||
270 | } | |
271 | ||
272 | @keyframes flipInX { | |
273 | 0% { | |
274 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
275 | transition-timing-function: ease-in; | |
276 | opacity: 0; | |
277 | } | |
278 | ||
279 | 40% { | |
280 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
281 | transition-timing-function: ease-in; | |
282 | } | |
283 | ||
284 | 60% { | |
285 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
286 | opacity: 1; | |
287 | } | |
288 | ||
289 | 80% { | |
290 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
291 | } | |
292 | ||
293 | 100% { | |
294 | transform: perspective(400px); | |
295 | } | |
296 | } | |
297 | ||
298 | @-webkit-keyframes flipInX { | |
299 | 0% { | |
300 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
301 | -webkit-transition-timing-function: ease-in; | |
302 | opacity: 0; | |
303 | } | |
304 | ||
305 | 40% { | |
306 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
307 | -webkit-transition-timing-function: ease-in; | |
308 | } | |
309 | ||
310 | 60% { | |
311 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
312 | opacity: 1; | |
313 | } | |
314 | ||
315 | 80% { | |
316 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
317 | } | |
318 | ||
319 | 100% { | |
320 | -webkit-transform: perspective(400px); | |
321 | } | |
322 | } | |
323 | ||
324 | /* Fix dropdown menu in navbars */ | |
325 | .navbar-custom-menu > .navbar-nav { | |
326 | > li { | |
327 | position: relative; | |
328 | > .dropdown-menu { | |
329 | position: absolute; | |
330 | right: 0; | |
331 | left: auto; | |
332 | } | |
333 | } | |
334 | } | |
335 | ||
336 | @media (max-width: @screen-sm-max) { | |
337 | .navbar-custom-menu > .navbar-nav { | |
338 | float: right; | |
339 | > li { | |
340 | position: static; | |
341 | > .dropdown-menu { | |
342 | position: absolute; | |
343 | right: 5%; | |
344 | left: auto; | |
345 | border: 1px solid #ddd; | |
346 | background: #fff; | |
347 | } | |
348 | } | |
349 | } | |
350 | } |