root / astakos / im / static / im / grnetstyles / less / patterns.less @ 13858d75
History | View | Annotate | Download (20.8 kB)
1 |
/* Patterns.less |
---|---|
2 |
* Repeatable UI elements outside the base styles provided from the scaffolding |
3 |
* ---------------------------------------------------------------------------- */ |
4 |
|
5 |
|
6 |
// TOPBAR |
7 |
// ------ |
8 |
|
9 |
// Topbar for Branding and Nav |
10 |
.topbar { |
11 |
height: 40px; |
12 |
position: fixed; |
13 |
top: 0; |
14 |
left: 0; |
15 |
right: 0; |
16 |
z-index: 10000; |
17 |
overflow: visible; |
18 |
|
19 |
// Links get text shadow |
20 |
a { |
21 |
color: @grayLight; |
22 |
text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
23 |
} |
24 |
|
25 |
// Hover and active states |
26 |
// h3 for backwards compatibility |
27 |
h3 a:hover, |
28 |
.brand:hover, |
29 |
ul .active > a { |
30 |
background-color: #333; |
31 |
background-color: rgba(255,255,255,.05); |
32 |
color: @white; |
33 |
text-decoration: none; |
34 |
} |
35 |
|
36 |
// Website name |
37 |
// h3 left for backwards compatibility |
38 |
h3 { |
39 |
position: relative; |
40 |
} |
41 |
h3 a, |
42 |
.brand { |
43 |
float: left; |
44 |
display: block; |
45 |
padding: 8px 20px 12px; |
46 |
margin-left: -20px; // negative indent to left-align the text down the page |
47 |
color: @white; |
48 |
font-size: 20px; |
49 |
font-weight: 200; |
50 |
line-height: 1; |
51 |
} |
52 |
|
53 |
// Plain text in topbar |
54 |
p { |
55 |
margin: 0; |
56 |
line-height: 40px; |
57 |
a:hover { |
58 |
background-color: transparent; |
59 |
color: @white; |
60 |
} |
61 |
} |
62 |
|
63 |
// Search Form |
64 |
form { |
65 |
float: left; |
66 |
margin: 5px 0 0 0; |
67 |
position: relative; |
68 |
.opacity(100); |
69 |
} |
70 |
// Todo: remove from v2.0 when ready, added for legacy |
71 |
form.pull-right { |
72 |
float: right; |
73 |
} |
74 |
input { |
75 |
background-color: #444; |
76 |
background-color: rgba(255,255,255,.3); |
77 |
#font > .sans-serif(13px, normal, 1); |
78 |
padding: 4px 9px; |
79 |
color: @white; |
80 |
color: rgba(255,255,255,.75); |
81 |
border: 1px solid #111; |
82 |
.border-radius(4px); |
83 |
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); |
84 |
.box-shadow(@shadow); |
85 |
.transition(none); |
86 |
|
87 |
// Placeholder text gets special styles; can't be bundled together though for some reason |
88 |
&:-moz-placeholder { |
89 |
color: @grayLighter; |
90 |
} |
91 |
&::-webkit-input-placeholder { |
92 |
color: @grayLighter; |
93 |
} |
94 |
// Hover states |
95 |
&:hover { |
96 |
background-color: @grayLight; |
97 |
background-color: rgba(255,255,255,.5); |
98 |
color: @white; |
99 |
} |
100 |
// Focus states (we use .focused since IE8 and down doesn't support :focus) |
101 |
&:focus, |
102 |
&.focused { |
103 |
outline: 0; |
104 |
background-color: @white; |
105 |
color: @grayDark; |
106 |
text-shadow: 0 1px 0 @white; |
107 |
border: 0; |
108 |
padding: 5px 10px; |
109 |
.box-shadow(0 0 3px rgba(0,0,0,.15)); |
110 |
} |
111 |
} |
112 |
} |
113 |
|
114 |
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present |
115 |
// For backwards compatibility, include .topbar .fill |
116 |
.topbar-inner, |
117 |
.topbar .fill { |
118 |
background-color: #222; |
119 |
#gradient > .vertical(#333, #222); |
120 |
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); |
121 |
.box-shadow(@shadow); |
122 |
} |
123 |
|
124 |
|
125 |
// NAVIGATION |
126 |
// ---------- |
127 |
|
128 |
// Topbar Nav |
129 |
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity |
130 |
// For backwards compatibility, leave in .topbar div > ul |
131 |
.topbar div > ul, |
132 |
.nav { |
133 |
display: block; |
134 |
float: left; |
135 |
margin: 0 10px 0 0; |
136 |
position: relative; |
137 |
left: 0; |
138 |
> li { |
139 |
display: block; |
140 |
float: left; |
141 |
} |
142 |
a { |
143 |
display: block; |
144 |
float: none; |
145 |
padding: 10px 10px 11px; |
146 |
line-height: 19px; |
147 |
text-decoration: none; |
148 |
&:hover { |
149 |
color: @white; |
150 |
text-decoration: none; |
151 |
} |
152 |
} |
153 |
.active > a { |
154 |
background-color: #222; |
155 |
background-color: rgba(0,0,0,.5); |
156 |
} |
157 |
|
158 |
// Secondary (floated right) nav in topbar |
159 |
&.secondary-nav { |
160 |
float: right; |
161 |
margin-left: 10px; |
162 |
margin-right: 0; |
163 |
// backwards compatibility |
164 |
.menu-dropdown, |
165 |
.dropdown-menu { |
166 |
right: 0; |
167 |
border: 0; |
168 |
} |
169 |
} |
170 |
// Dropdowns within the .nav |
171 |
// a.menu:hover and li.open .menu for backwards compatibility |
172 |
a.menu:hover, |
173 |
li.open .menu, |
174 |
.dropdown-toggle:hover, |
175 |
.dropdown.open .dropdown-toggle { |
176 |
background: #444; |
177 |
background: rgba(255,255,255,.05); |
178 |
} |
179 |
// .menu-dropdown for backwards compatibility |
180 |
.menu-dropdown, |
181 |
.dropdown-menu { |
182 |
background-color: #333; |
183 |
// a.menu for backwards compatibility |
184 |
a.menu, |
185 |
.dropdown-toggle { |
186 |
color: @white; |
187 |
&.open { |
188 |
background: #444; |
189 |
background: rgba(255,255,255,.05); |
190 |
} |
191 |
} |
192 |
li a { |
193 |
color: #999; |
194 |
text-shadow: 0 1px 0 rgba(0,0,0,.5); |
195 |
&:hover { |
196 |
#gradient > .vertical(#292929,#191919); |
197 |
color: @white; |
198 |
} |
199 |
} |
200 |
.active a { |
201 |
color: @white; |
202 |
} |
203 |
.divider { |
204 |
background-color: #222; |
205 |
border-color: #444; |
206 |
} |
207 |
} |
208 |
} |
209 |
|
210 |
// For backwards compatibility with new dropdowns, redeclare dropdown link padding |
211 |
.topbar ul .menu-dropdown li a, |
212 |
.topbar ul .dropdown-menu li a { |
213 |
padding: 4px 15px; |
214 |
} |
215 |
|
216 |
// Dropdown Menus |
217 |
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns |
218 |
// li.menu for backwards compatibility |
219 |
li.menu, |
220 |
.dropdown { |
221 |
position: relative; |
222 |
} |
223 |
// The link that is clicked to toggle the dropdown |
224 |
// a.menu for backwards compatibility |
225 |
a.menu:after, |
226 |
.dropdown-toggle:after { |
227 |
width: 0; |
228 |
height: 0; |
229 |
display: inline-block; |
230 |
content: "↓"; |
231 |
text-indent: -99999px; |
232 |
vertical-align: top; |
233 |
margin-top: 8px; |
234 |
margin-left: 4px; |
235 |
border-left: 4px solid transparent; |
236 |
border-right: 4px solid transparent; |
237 |
border-top: 4px solid @white; |
238 |
.opacity(50); |
239 |
} |
240 |
// The dropdown menu (ul) |
241 |
// .menu-dropdown for backwards compatibility |
242 |
.menu-dropdown, |
243 |
.dropdown-menu { |
244 |
background-color: @white; |
245 |
float: left; |
246 |
display: none; // None by default, but block on "open" of the menu |
247 |
position: absolute; |
248 |
top: 40px; |
249 |
z-index: 900; |
250 |
min-width: 160px; |
251 |
max-width: 220px; |
252 |
_width: 160px; |
253 |
margin-left: 0; // override default ul styles |
254 |
margin-right: 0; |
255 |
padding: 6px 0; |
256 |
zoom: 1; // do we need this? |
257 |
border-color: #999; |
258 |
border-color: rgba(0,0,0,.2); |
259 |
border-style: solid; |
260 |
border-width: 0 1px 1px; |
261 |
.border-radius(0 0 6px 6px); |
262 |
.box-shadow(0 2px 4px rgba(0,0,0,.2)); |
263 |
.background-clip(padding-box); |
264 |
|
265 |
// Unfloat any li's to make them stack |
266 |
li { |
267 |
float: none; |
268 |
display: block; |
269 |
background-color: none; |
270 |
} |
271 |
// Dividers (basically an hr) within the dropdown |
272 |
.divider { |
273 |
height: 1px; |
274 |
margin: 5px 0; |
275 |
overflow: hidden; |
276 |
background-color: #eee; |
277 |
border-bottom: 1px solid @white; |
278 |
} |
279 |
} |
280 |
|
281 |
.topbar .dropdown-menu, |
282 |
.dropdown-menu { |
283 |
// Links within the dropdown menu |
284 |
a { |
285 |
display: block; |
286 |
padding: 4px 15px; |
287 |
clear: both; |
288 |
font-weight: normal; |
289 |
line-height: 18px; |
290 |
color: @gray; |
291 |
text-shadow: 0 1px 0 @white; |
292 |
// Hover state |
293 |
&:hover, |
294 |
&.hover { |
295 |
#gradient > .vertical(#eeeeee, #dddddd); |
296 |
color: @grayDark; |
297 |
text-decoration: none; |
298 |
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); |
299 |
.box-shadow(@shadow); |
300 |
} |
301 |
} |
302 |
} |
303 |
|
304 |
// Open state for the dropdown |
305 |
// .open for backwards compatibility |
306 |
.open, |
307 |
.dropdown.open { |
308 |
// .menu for backwards compatibility |
309 |
.menu, |
310 |
.dropdown-toggle { |
311 |
color: @white; |
312 |
background: #ccc; |
313 |
background: rgba(0,0,0,.3); |
314 |
} |
315 |
// .menu-dropdown for backwards compatibility |
316 |
.menu-dropdown, |
317 |
.dropdown-menu { |
318 |
display: block; |
319 |
} |
320 |
} |
321 |
|
322 |
|
323 |
// TABS AND PILLS |
324 |
// -------------- |
325 |
|
326 |
// Common styles |
327 |
.tabs, |
328 |
.pills { |
329 |
margin: 0 0 @baseline; |
330 |
padding: 0; |
331 |
list-style: none; |
332 |
.clearfix(); |
333 |
> li { |
334 |
float: left; |
335 |
> a { |
336 |
display: block; |
337 |
} |
338 |
} |
339 |
} |
340 |
|
341 |
// Tabs |
342 |
.tabs { |
343 |
border-color: #ddd; |
344 |
border-style: solid; |
345 |
border-width: 0 0 1px; |
346 |
> li { |
347 |
position: relative; // For the dropdowns mostly |
348 |
margin-bottom: -1px; |
349 |
> a { |
350 |
padding: 0 15px; |
351 |
margin-right: 2px; |
352 |
line-height: (@baseline * 2) - 2; |
353 |
border: 1px solid transparent; |
354 |
.border-radius(4px 4px 0 0); |
355 |
&:hover { |
356 |
text-decoration: none; |
357 |
background-color: #eee; |
358 |
border-color: #eee #eee #ddd; |
359 |
} |
360 |
} |
361 |
} |
362 |
// Active state, and it's :hover to override normal :hover |
363 |
.active > a, |
364 |
.active > a:hover { |
365 |
color: @gray; |
366 |
background-color: @white; |
367 |
border: 1px solid #ddd; |
368 |
border-bottom-color: transparent; |
369 |
cursor: default; |
370 |
} |
371 |
} |
372 |
|
373 |
// Dropdowns in tabs |
374 |
.tabs { |
375 |
// first one for backwards compatibility |
376 |
.menu-dropdown, |
377 |
.dropdown-menu { |
378 |
top: 35px; |
379 |
border-width: 1px; |
380 |
.border-radius(0 6px 6px 6px); |
381 |
} |
382 |
// first one for backwards compatibility |
383 |
a.menu:after, |
384 |
.dropdown-toggle:after { |
385 |
border-top-color: #999; |
386 |
margin-top: 15px; |
387 |
margin-left: 5px; |
388 |
} |
389 |
// first one for backwards compatibility |
390 |
li.open.menu .menu, |
391 |
.open.dropdown .dropdown-toggle { |
392 |
border-color: #999; |
393 |
} |
394 |
// first one for backwards compatibility |
395 |
li.open a.menu:after, |
396 |
.dropdown.open .dropdown-toggle:after { |
397 |
border-top-color: #555; |
398 |
} |
399 |
} |
400 |
|
401 |
// Pills |
402 |
.pills { |
403 |
a { |
404 |
margin: 5px 3px 5px 0; |
405 |
padding: 0 15px; |
406 |
line-height: 30px; |
407 |
text-shadow: 0 1px 1px @white; |
408 |
.border-radius(15px); |
409 |
&:hover { |
410 |
color: @white; |
411 |
text-decoration: none; |
412 |
text-shadow: 0 1px 1px rgba(0,0,0,.25); |
413 |
background-color: @linkColorHover; |
414 |
} |
415 |
} |
416 |
.active a { |
417 |
color: @white; |
418 |
text-shadow: 0 1px 1px rgba(0,0,0,.25); |
419 |
background-color: @linkColor; |
420 |
} |
421 |
} |
422 |
|
423 |
// Stacked pills |
424 |
.pills-vertical > li { |
425 |
float: none; |
426 |
} |
427 |
|
428 |
// Tabbable areas |
429 |
.tab-content, |
430 |
.pill-content { |
431 |
} |
432 |
.tab-content > .tab-pane, |
433 |
.pill-content > .pill-pane, |
434 |
.tab-content > div, |
435 |
.pill-content > div { |
436 |
display: none; |
437 |
} |
438 |
.tab-content > .active, |
439 |
.pill-content > .active { |
440 |
display: block; |
441 |
} |
442 |
|
443 |
|
444 |
// BREADCRUMBS |
445 |
// ----------- |
446 |
|
447 |
.breadcrumb { |
448 |
padding: 7px 14px; |
449 |
margin: 0 0 @baseline; |
450 |
#gradient > .vertical(#ffffff, #f5f5f5); |
451 |
border: 1px solid #ddd; |
452 |
.border-radius(3px); |
453 |
.box-shadow(inset 0 1px 0 @white); |
454 |
li { |
455 |
display: inline; |
456 |
text-shadow: 0 1px 0 @white; |
457 |
} |
458 |
.divider { |
459 |
padding: 0 5px; |
460 |
color: @grayLight; |
461 |
} |
462 |
.active a { |
463 |
color: @grayDark; |
464 |
} |
465 |
} |
466 |
|
467 |
|
468 |
// PAGE HEADERS |
469 |
// ------------ |
470 |
|
471 |
.hero-unit { |
472 |
background-color: #f5f5f5; |
473 |
margin-bottom: 30px; |
474 |
padding: 60px; |
475 |
.border-radius(6px); |
476 |
h1 { |
477 |
margin-bottom: 0; |
478 |
font-size: 60px; |
479 |
line-height: 1; |
480 |
letter-spacing: -1px; |
481 |
} |
482 |
p { |
483 |
font-size: 18px; |
484 |
font-weight: 200; |
485 |
line-height: @baseline * 1.5; |
486 |
} |
487 |
} |
488 |
footer { |
489 |
margin-top: @baseline - 1; |
490 |
padding-top: @baseline - 1; |
491 |
border-top: 1px solid #eee; |
492 |
} |
493 |
|
494 |
|
495 |
// PAGE HEADERS |
496 |
// ------------ |
497 |
|
498 |
.page-header { |
499 |
margin-bottom: @baseline - 1; |
500 |
border-bottom: 1px solid #ddd; |
501 |
.box-shadow(0 1px 0 rgba(255,255,255,.5)); |
502 |
h1 { |
503 |
margin-bottom: (@baseline / 2) - 1px; |
504 |
} |
505 |
} |
506 |
|
507 |
|
508 |
// BUTTON STYLES |
509 |
// ------------- |
510 |
|
511 |
// Shared colors for buttons and alerts |
512 |
.btn, |
513 |
.alert-message { |
514 |
// Set text color |
515 |
&.danger, |
516 |
&.danger:hover, |
517 |
&.error, |
518 |
&.error:hover, |
519 |
&.success, |
520 |
&.success:hover, |
521 |
&.info, |
522 |
&.info:hover { |
523 |
color: @white |
524 |
} |
525 |
// Sets the close button to the middle of message |
526 |
.close{ |
527 |
font-family: Arial, sans-serif; |
528 |
line-height: 18px; |
529 |
} |
530 |
// Danger and error appear as red |
531 |
&.danger, |
532 |
&.error { |
533 |
.gradientBar(#ee5f5b, #c43c35); |
534 |
} |
535 |
// Success appears as green |
536 |
&.success { |
537 |
.gradientBar(#62c462, #57a957); |
538 |
} |
539 |
// Info appears as a neutral blue |
540 |
&.info { |
541 |
.gradientBar(#5bc0de, #339bb9); |
542 |
} |
543 |
} |
544 |
|
545 |
// Base .btn styles |
546 |
.btn { |
547 |
// Button Base |
548 |
cursor: pointer; |
549 |
display: inline-block; |
550 |
#gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient |
551 |
padding: 5px 14px 6px; |
552 |
text-shadow: 0 1px 1px rgba(255,255,255,.75); |
553 |
color: #333; |
554 |
font-size: @basefont; |
555 |
line-height: normal; |
556 |
border: 1px solid #ccc; |
557 |
border-bottom-color: #bbb; |
558 |
.border-radius(4px); |
559 |
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); |
560 |
.box-shadow(@shadow); |
561 |
|
562 |
&:hover { |
563 |
background-position: 0 -15px; |
564 |
color: #333; |
565 |
text-decoration: none; |
566 |
} |
567 |
|
568 |
// Focus state for keyboard and accessibility |
569 |
&:focus { |
570 |
outline: 1px dotted #666; |
571 |
} |
572 |
|
573 |
// Primary Button Type |
574 |
&.primary { |
575 |
color: @white; |
576 |
.gradientBar(@blue, @blueDark) |
577 |
} |
578 |
|
579 |
// Transitions |
580 |
.transition(.1s linear all); |
581 |
|
582 |
// Active and Disabled states |
583 |
&.active, |
584 |
&:active { |
585 |
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); |
586 |
.box-shadow(@shadow); |
587 |
} |
588 |
&.disabled { |
589 |
cursor: default; |
590 |
background-image: none; |
591 |
.reset-filter(); |
592 |
.opacity(65); |
593 |
.box-shadow(none); |
594 |
} |
595 |
&[disabled] { |
596 |
// disabled pseudo can't be included with .disabled |
597 |
// def because IE8 and below will drop it ;_; |
598 |
cursor: default; |
599 |
background-image: none; |
600 |
.reset-filter(); |
601 |
.opacity(65); |
602 |
.box-shadow(none); |
603 |
} |
604 |
|
605 |
// Button Sizes |
606 |
&.large { |
607 |
font-size: @basefont + 2px; |
608 |
line-height: normal; |
609 |
padding: 9px 14px 9px; |
610 |
.border-radius(6px); |
611 |
} |
612 |
&.small { |
613 |
padding: 7px 9px 7px; |
614 |
font-size: @basefont - 2px; |
615 |
} |
616 |
} |
617 |
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons |
618 |
:root .alert-message, |
619 |
:root .btn { |
620 |
border-radius: 0 \0; |
621 |
} |
622 |
|
623 |
// Help Firefox not be a jerk about adding extra padding to buttons |
624 |
button.btn, |
625 |
input[type=submit].btn { |
626 |
&::-moz-focus-inner { |
627 |
padding: 0; |
628 |
border: 0; |
629 |
} |
630 |
} |
631 |
|
632 |
|
633 |
// CLOSE ICONS |
634 |
// ----------- |
635 |
.close { |
636 |
float: right; |
637 |
color: @black; |
638 |
font-size: 20px; |
639 |
font-weight: bold; |
640 |
line-height: @baseline * .75; |
641 |
text-shadow: 0 1px 0 rgba(255,255,255,1); |
642 |
.opacity(25); |
643 |
&:hover { |
644 |
color: @black; |
645 |
text-decoration: none; |
646 |
.opacity(40); |
647 |
} |
648 |
} |
649 |
|
650 |
|
651 |
// ERROR STYLES |
652 |
// ------------ |
653 |
|
654 |
// Base alert styles |
655 |
.alert-message { |
656 |
position: relative; |
657 |
padding: 7px 15px; |
658 |
margin-bottom: @baseline; |
659 |
color: @grayDark; |
660 |
.gradientBar(#fceec1, #eedc94); // warning by default |
661 |
text-shadow: 0 1px 0 rgba(255,255,255,.5); |
662 |
border-width: 1px; |
663 |
border-style: solid; |
664 |
.border-radius(4px); |
665 |
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); |
666 |
|
667 |
// Adjust close icon |
668 |
.close { |
669 |
margin-top: 1px; |
670 |
*margin-top: 0; // For IE7 |
671 |
} |
672 |
|
673 |
// Make links same color as text and stand out more |
674 |
a { |
675 |
font-weight: bold; |
676 |
color: @grayDark; |
677 |
} |
678 |
&.danger p a, |
679 |
&.error p a, |
680 |
&.success p a, |
681 |
&.info p a { |
682 |
color: @white; |
683 |
} |
684 |
|
685 |
// Remove extra margin from content |
686 |
h5 { |
687 |
line-height: @baseline; |
688 |
} |
689 |
p { |
690 |
margin-bottom: 0; |
691 |
} |
692 |
div { |
693 |
margin-top: 5px; |
694 |
margin-bottom: 2px; |
695 |
line-height: 28px; |
696 |
} |
697 |
.btn { |
698 |
// Provide actions with buttons |
699 |
.box-shadow(0 1px 0 rgba(255,255,255,.25)); |
700 |
} |
701 |
|
702 |
&.block-message { |
703 |
background-image: none; |
704 |
background-color: lighten(#fceec1, 5%); |
705 |
.reset-filter(); |
706 |
padding: 14px; |
707 |
border-color: #fceec1; |
708 |
.box-shadow(none); |
709 |
ul, p { |
710 |
margin-right: 30px; |
711 |
} |
712 |
ul { |
713 |
margin-bottom: 0; |
714 |
} |
715 |
li { |
716 |
color: @grayDark; |
717 |
} |
718 |
.alert-actions { |
719 |
margin-top: 5px; |
720 |
} |
721 |
&.error, |
722 |
&.success, |
723 |
&.info { |
724 |
color: @grayDark; |
725 |
text-shadow: 0 1px 0 rgba(255,255,255,.5); |
726 |
} |
727 |
&.error { |
728 |
background-color: lighten(#f56a66, 25%); |
729 |
border-color: lighten(#f56a66, 20%); |
730 |
} |
731 |
&.success { |
732 |
background-color: lighten(#62c462, 30%); |
733 |
border-color: lighten(#62c462, 25%); |
734 |
} |
735 |
&.info { |
736 |
background-color: lighten(#6bd0ee, 25%); |
737 |
border-color: lighten(#6bd0ee, 20%); |
738 |
} |
739 |
// Change link color back |
740 |
&.danger p a, |
741 |
&.error p a, |
742 |
&.success p a, |
743 |
&.info p a { |
744 |
color: @grayDark; |
745 |
} |
746 |
|
747 |
} |
748 |
} |
749 |
|
750 |
|
751 |
// PAGINATION |
752 |
// ---------- |
753 |
|
754 |
.pagination { |
755 |
height: @baseline * 2; |
756 |
margin: @baseline 0; |
757 |
ul { |
758 |
float: left; |
759 |
margin: 0; |
760 |
border: 1px solid #ddd; |
761 |
border: 1px solid rgba(0,0,0,.15); |
762 |
.border-radius(3px); |
763 |
.box-shadow(0 1px 2px rgba(0,0,0,.05)); |
764 |
} |
765 |
li { |
766 |
display: inline; |
767 |
} |
768 |
a { |
769 |
float: left; |
770 |
padding: 0 14px; |
771 |
line-height: (@baseline * 2) - 2; |
772 |
border-right: 1px solid; |
773 |
border-right-color: #ddd; |
774 |
border-right-color: rgba(0,0,0,.15); |
775 |
*border-right-color: #ddd; /* IE6-7 */ |
776 |
text-decoration: none; |
777 |
} |
778 |
a:hover, |
779 |
.active a { |
780 |
background-color: lighten(@blue, 45%); |
781 |
} |
782 |
.disabled a, |
783 |
.disabled a:hover { |
784 |
background-color: transparent; |
785 |
color: @grayLight; |
786 |
} |
787 |
.next a { |
788 |
border: 0; |
789 |
} |
790 |
} |
791 |
|
792 |
|
793 |
// WELLS |
794 |
// ----- |
795 |
|
796 |
.well { |
797 |
background-color: #f5f5f5; |
798 |
margin-bottom: 20px; |
799 |
padding: 19px; |
800 |
min-height: 20px; |
801 |
border: 1px solid #eee; |
802 |
border: 1px solid rgba(0,0,0,.05); |
803 |
.border-radius(4px); |
804 |
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); |
805 |
blockquote { |
806 |
border-color: #ddd; |
807 |
border-color: rgba(0,0,0,.15); |
808 |
} |
809 |
} |
810 |
|
811 |
|
812 |
// MODALS |
813 |
// ------ |
814 |
|
815 |
.modal-backdrop { |
816 |
background-color: @black; |
817 |
position: fixed; |
818 |
top: 0; |
819 |
left: 0; |
820 |
right: 0; |
821 |
bottom: 0; |
822 |
z-index: 10000; |
823 |
// Fade for backdrop |
824 |
&.fade { opacity: 0; } |
825 |
} |
826 |
|
827 |
.modal-backdrop, |
828 |
.modal-backdrop.fade.in { |
829 |
.opacity(80); |
830 |
} |
831 |
|
832 |
.modal { |
833 |
position: fixed; |
834 |
top: 50%; |
835 |
left: 50%; |
836 |
z-index: 11000; |
837 |
width: 560px; |
838 |
margin: -250px 0 0 -280px; |
839 |
background-color: @white; |
840 |
border: 1px solid #999; |
841 |
border: 1px solid rgba(0,0,0,.3); |
842 |
*border: 1px solid #999; /* IE6-7 */ |
843 |
.border-radius(6px); |
844 |
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); |
845 |
.background-clip(padding-box); |
846 |
.close { margin-top: 7px; } |
847 |
&.fade { |
848 |
.transition(e('opacity .3s linear, top .3s ease-out')); |
849 |
top: -25%; |
850 |
} |
851 |
&.fade.in { top: 50%; } |
852 |
} |
853 |
.modal-header { |
854 |
border-bottom: 1px solid #eee; |
855 |
padding: 5px 15px; |
856 |
} |
857 |
.modal-body { |
858 |
padding: 15px; |
859 |
} |
860 |
.modal-body form { |
861 |
margin-bottom: 0; |
862 |
} |
863 |
.modal-footer { |
864 |
background-color: #f5f5f5; |
865 |
padding: 14px 15px 15px; |
866 |
border-top: 1px solid #ddd; |
867 |
.border-radius(0 0 6px 6px); |
868 |
.box-shadow(inset 0 1px 0 @white); |
869 |
.clearfix(); |
870 |
margin-bottom: 0; |
871 |
.btn { |
872 |
float: right; |
873 |
margin-left: 5px; |
874 |
} |
875 |
} |
876 |
|
877 |
// Fix the stacking of these components when in modals |
878 |
.modal .popover, |
879 |
.modal .twipsy { |
880 |
z-index: 12000; |
881 |
} |
882 |
|
883 |
|
884 |
// POPOVER ARROWS |
885 |
// -------------- |
886 |
|
887 |
#popoverArrow { |
888 |
.above(@arrowWidth: 5px) { |
889 |
bottom: 0; |
890 |
left: 50%; |
891 |
margin-left: -@arrowWidth; |
892 |
border-left: @arrowWidth solid transparent; |
893 |
border-right: @arrowWidth solid transparent; |
894 |
border-top: @arrowWidth solid @black; |
895 |
} |
896 |
.left(@arrowWidth: 5px) { |
897 |
top: 50%; |
898 |
right: 0; |
899 |
margin-top: -@arrowWidth; |
900 |
border-top: @arrowWidth solid transparent; |
901 |
border-bottom: @arrowWidth solid transparent; |
902 |
border-left: @arrowWidth solid @black; |
903 |
} |
904 |
.below(@arrowWidth: 5px) { |
905 |
top: 0; |
906 |
left: 50%; |
907 |
margin-left: -@arrowWidth; |
908 |
border-left: @arrowWidth solid transparent; |
909 |
border-right: @arrowWidth solid transparent; |
910 |
border-bottom: @arrowWidth solid @black; |
911 |
} |
912 |
.right(@arrowWidth: 5px) { |
913 |
top: 50%; |
914 |
left: 0; |
915 |
margin-top: -@arrowWidth; |
916 |
border-top: @arrowWidth solid transparent; |
917 |
border-bottom: @arrowWidth solid transparent; |
918 |
border-right: @arrowWidth solid @black; |
919 |
} |
920 |
} |
921 |
|
922 |
// TWIPSY |
923 |
// ------ |
924 |
|
925 |
.twipsy { |
926 |
display: block; |
927 |
position: absolute; |
928 |
visibility: visible; |
929 |
padding: 5px; |
930 |
font-size: 11px; |
931 |
z-index: 1000; |
932 |
.opacity(80); |
933 |
&.fade.in { |
934 |
.opacity(80); |
935 |
} |
936 |
&.above .twipsy-arrow { #popoverArrow > .above(); } |
937 |
&.left .twipsy-arrow { #popoverArrow > .left(); } |
938 |
&.below .twipsy-arrow { #popoverArrow > .below(); } |
939 |
&.right .twipsy-arrow { #popoverArrow > .right(); } |
940 |
} |
941 |
.twipsy-inner { |
942 |
padding: 3px 8px; |
943 |
background-color: @black; |
944 |
color: white; |
945 |
text-align: center; |
946 |
max-width: 200px; |
947 |
text-decoration: none; |
948 |
.border-radius(4px); |
949 |
} |
950 |
.twipsy-arrow { |
951 |
position: absolute; |
952 |
width: 0; |
953 |
height: 0; |
954 |
} |
955 |
|
956 |
|
957 |
// POPOVERS |
958 |
// -------- |
959 |
|
960 |
.popover { |
961 |
position: absolute; |
962 |
top: 0; |
963 |
left: 0; |
964 |
z-index: 1000; |
965 |
padding: 5px; |
966 |
display: none; |
967 |
&.above .arrow { #popoverArrow > .above(); } |
968 |
&.right .arrow { #popoverArrow > .right(); } |
969 |
&.below .arrow { #popoverArrow > .below(); } |
970 |
&.left .arrow { #popoverArrow > .left(); } |
971 |
.arrow { |
972 |
position: absolute; |
973 |
width: 0; |
974 |
height: 0; |
975 |
} |
976 |
.inner { |
977 |
background: @black; |
978 |
background: rgba(0,0,0,.8); |
979 |
padding: 3px; |
980 |
overflow: hidden; |
981 |
width: 280px; |
982 |
.border-radius(6px); |
983 |
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); |
984 |
} |
985 |
.title { |
986 |
background-color: #f5f5f5; |
987 |
padding: 9px 15px; |
988 |
line-height: 1; |
989 |
.border-radius(3px 3px 0 0); |
990 |
border-bottom:1px solid #eee; |
991 |
} |
992 |
.content { |
993 |
background-color: @white; |
994 |
padding: 14px; |
995 |
.border-radius(0 0 3px 3px); |
996 |
.background-clip(padding-box); |
997 |
p, ul, ol { |
998 |
margin-bottom: 0; |
999 |
} |
1000 |
} |
1001 |
} |
1002 |
|
1003 |
|
1004 |
// PATTERN ANIMATIONS |
1005 |
// ------------------ |
1006 |
|
1007 |
.fade { |
1008 |
.transition(opacity .15s linear); |
1009 |
opacity: 0; |
1010 |
&.in { |
1011 |
opacity: 1; |
1012 |
} |
1013 |
} |
1014 |
|
1015 |
|
1016 |
// LABELS |
1017 |
// ------ |
1018 |
|
1019 |
.label { |
1020 |
padding: 1px 3px 2px; |
1021 |
font-size: @basefont * .75; |
1022 |
font-weight: bold; |
1023 |
color: @white; |
1024 |
text-transform: uppercase; |
1025 |
white-space: nowrap; |
1026 |
background-color: @grayLight; |
1027 |
.border-radius(3px); |
1028 |
&.important { background-color: #c43c35; } |
1029 |
&.warning { background-color: @orange; } |
1030 |
&.success { background-color: @green; } |
1031 |
&.notice { background-color: lighten(@blue, 25%); } |
1032 |
} |
1033 |
|
1034 |
|
1035 |
// MEDIA GRIDS |
1036 |
// ----------- |
1037 |
|
1038 |
.media-grid { |
1039 |
margin-left: -@gridGutterWidth; |
1040 |
margin-bottom: 0; |
1041 |
.clearfix(); |
1042 |
li { |
1043 |
display: inline; |
1044 |
} |
1045 |
a { |
1046 |
float: left; |
1047 |
padding: 4px; |
1048 |
margin: 0 0 @baseline @gridGutterWidth; |
1049 |
border: 1px solid #ddd; |
1050 |
.border-radius(4px); |
1051 |
.box-shadow(0 1px 1px rgba(0,0,0,.075)); |
1052 |
img { |
1053 |
display: block; |
1054 |
} |
1055 |
&:hover { |
1056 |
border-color: @linkColor; |
1057 |
.box-shadow(0 1px 4px rgba(0,105,214,.25)); |
1058 |
} |
1059 |
} |
1060 |
} |