bootstrap-sass 1.2.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

@@ -1,7 +1,8 @@
1
- /* patterns.css.scss
1
+ /* patters.css.scss
2
2
  * Repeatable UI elements outside the base styles provided from the scaffolding
3
3
  * ---------------------------------------------------------------------------- */
4
4
 
5
+
5
6
  // TOPBAR
6
7
  // ------
7
8
 
@@ -22,8 +23,8 @@
22
23
  }
23
24
 
24
25
  // Hover and active states
25
- a:hover,
26
- ul .active a {
26
+ // h3 for backwards compatibility
27
+ h3 a:hover, .brand a:hover, ul .active > a {
27
28
  background-color: #333;
28
29
  background-color: rgba(255,255,255,.05);
29
30
  color: $white;
@@ -31,17 +32,28 @@
31
32
  }
32
33
 
33
34
  // Website name
35
+ // h3 left for backwards compatibility
34
36
  h3 {
35
37
  position: relative;
36
- a {
37
- float: left;
38
- display: block;
39
- padding: 8px 20px 12px;
40
- margin-left: -20px; // negative indent to left-align the text down the page
38
+ }
39
+ h3 a, .brand {
40
+ float: left;
41
+ display: block;
42
+ padding: 8px 20px 12px;
43
+ margin-left: -20px; // negative indent to left-align the text down the page
44
+ color: $white;
45
+ font-size: 20px;
46
+ font-weight: 200;
47
+ line-height: 1;
48
+ }
49
+
50
+ // Plain text in topbar
51
+ p {
52
+ margin: 0;
53
+ line-height: 40px;
54
+ a:hover {
55
+ background-color: transparent;
41
56
  color: $white;
42
- font-size: 20px;
43
- font-weight: 200;
44
- line-height: 1;
45
57
  }
46
58
  }
47
59
 
@@ -52,12 +64,16 @@
52
64
  position: relative;
53
65
  @include opacity(100);
54
66
  }
67
+ // Todo: remove from v2.0 when ready, added for legacy
68
+ form.pull-right {
69
+ float: right;
70
+ }
55
71
  input {
56
72
  background-color: #444;
57
73
  background-color: rgba(255,255,255,.3);
58
74
  @include sans-serif-font(13px, normal, 1);
59
75
  padding: 4px 9px;
60
- color: #fff;
76
+ color: $white;
61
77
  color: rgba(255,255,255,.75);
62
78
  border: 1px solid #111;
63
79
  @include border-radius(4px);
@@ -76,14 +92,14 @@
76
92
  &:hover {
77
93
  background-color: $grayLight;
78
94
  background-color: rgba(255,255,255,.5);
79
- color: #fff;
95
+ color: $white;
80
96
  }
81
97
  // Focus states (we use .focused since IE8 and down doesn't support :focus)
82
98
  &:focus, &.focused {
83
- outline: none;
84
- background-color: #fff;
99
+ outline: 0;
100
+ background-color: $white;
85
101
  color: $grayDark;
86
- text-shadow: 0 1px 0 #fff;
102
+ text-shadow: 0 1px 0 $white;
87
103
  border: 0;
88
104
  padding: 5px 10px;
89
105
  @include box-shadow(0 0 3px rgba(0,0,0,.15));
@@ -92,7 +108,7 @@
92
108
  }
93
109
 
94
110
  // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
95
- // For backwards compatability, include .topbar .fill
111
+ // For backwards compatibility, include .topbar .fill
96
112
  .topbar-inner, .topbar .fill {
97
113
  background-color: #222;
98
114
  @include vertical-gradient(#333, #222);
@@ -123,11 +139,11 @@
123
139
  line-height: 19px;
124
140
  text-decoration: none;
125
141
  &:hover {
126
- color: #fff;
142
+ color: $white;
127
143
  text-decoration: none;
128
144
  }
129
145
  }
130
- .active a {
146
+ .active > a {
131
147
  background-color: #222;
132
148
  background-color: rgba(0,0,0,.5);
133
149
  }
@@ -140,6 +156,7 @@
140
156
  // backwards compatibility
141
157
  .menu-dropdown, .dropdown-menu {
142
158
  right: 0;
159
+ border: 0;
143
160
  }
144
161
  }
145
162
  // Dropdowns within the .nav
@@ -153,7 +170,7 @@
153
170
  background-color: #333;
154
171
  // a.menu for backwards compatibility
155
172
  a.menu, .dropdown-toggle {
156
- color: #fff;
173
+ color: $white;
157
174
  &.open {
158
175
  background: #444;
159
176
  background: rgba(255,255,255,.05);
@@ -164,9 +181,12 @@
164
181
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
165
182
  &:hover {
166
183
  @include vertical-gradient(#292929,#191919);
167
- color: #fff;
184
+ color: $white;
168
185
  }
169
186
  }
187
+ .active a {
188
+ color: $white;
189
+ }
170
190
  .divider {
171
191
  background-color: #222;
172
192
  border-color: #444;
@@ -174,7 +194,7 @@
174
194
  }
175
195
  }
176
196
 
177
- // For backwards compatability with new dropdowns, redeclare dropdown link padding
197
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
178
198
  .topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
179
199
  padding: 4px 15px;
180
200
  }
@@ -198,17 +218,18 @@ a.menu:after, .dropdown-toggle:after {
198
218
  margin-left: 4px;
199
219
  border-left: 4px solid transparent;
200
220
  border-right: 4px solid transparent;
201
- border-top: 4px solid #fff;
221
+ border-top: 4px solid $white;
202
222
  @include opacity(50);
203
223
  }
204
224
  // The dropdown menu (ul)
205
225
  // .menu-dropdown for backwards compatibility
206
226
  .menu-dropdown, .dropdown-menu {
207
- background-color: #fff;
227
+ background-color: $white;
208
228
  float: left;
209
229
  display: none; // None by default, but block on "open" of the menu
210
230
  position: absolute;
211
231
  top: 40px;
232
+ z-index: 900;
212
233
  min-width: 160px;
213
234
  max-width: 220px;
214
235
  _width: 160px;
@@ -236,7 +257,7 @@ a.menu:after, .dropdown-toggle:after {
236
257
  margin: 5px 0;
237
258
  overflow: hidden;
238
259
  background-color: #eee;
239
- border-bottom: 1px solid #fff;
260
+ border-bottom: 1px solid $white;
240
261
  }
241
262
  }
242
263
 
@@ -249,10 +270,10 @@ a.menu:after, .dropdown-toggle:after {
249
270
  font-weight: normal;
250
271
  line-height: 18px;
251
272
  color: $gray;
252
- text-shadow: 0 1px 0 #fff;
273
+ text-shadow: 0 1px 0 $white;
253
274
  // Hover state
254
275
  &:hover {
255
- @include vertical-gradient(#eee, #ddd);
276
+ @include vertical-gradient(#eeeeee, #dddddd);
256
277
  color: $grayDark;
257
278
  text-decoration: none;
258
279
  $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
@@ -266,7 +287,7 @@ a.menu:after, .dropdown-toggle:after {
266
287
  .open, .dropdown.open {
267
288
  // .menu for backwards compatibility
268
289
  .menu, .dropdown-toggle {
269
- color: #fff;
290
+ color: $white;
270
291
  background: #ccc;
271
292
  background: rgba(0,0,0,.3);
272
293
  }
@@ -292,28 +313,29 @@ a.menu:after, .dropdown-toggle:after {
292
313
 
293
314
  // Basic Tabs
294
315
  .tabs {
316
+ float: left;
295
317
  width: 100%;
296
318
  border-bottom: 1px solid #ddd;
297
319
  > li {
298
320
  position: relative; // For the dropdowns mostly
299
321
  top: 1px;
300
322
  > a {
301
- margin-right: 2px;
302
323
  padding: 0 15px;
303
- line-height: ($baseline * 2) - 1;
324
+ margin-right: 2px;
325
+ line-height: $baseline * 2;
326
+ border: 1px solid transparent;
304
327
  @include border-radius(4px 4px 0 0);
305
328
  &:hover {
306
- background-color: #eee;
307
- border-bottom: 1px solid #ddd;
308
329
  text-decoration: none;
330
+ background-color: #eee;
331
+ border-color: #eee #eee #ddd;
309
332
  }
310
333
  }
311
334
  &.active > a {
312
- background-color: #fff;
313
- padding: 0 14px;
314
- border: 1px solid #ddd;
315
- border-bottom: 0;
316
335
  color: $gray;
336
+ background-color: $white;
337
+ border: 1px solid #ddd;
338
+ border-bottom-color: transparent;
317
339
  }
318
340
  }
319
341
  // first one for backwards compatibility
@@ -329,40 +351,79 @@ a.menu:after, .dropdown-toggle:after {
329
351
  margin-left: 5px;
330
352
  }
331
353
  // first one for backwards compatibility
354
+ li.open.menu .menu, .open.dropdown .dropdown-toggle {
355
+ border-color: #999;
356
+ }
357
+ // first one for backwards compatibility
332
358
  li.open a.menu:after, .dropdown.open .dropdown-toggle:after {
333
359
  border-top-color: #555;
334
360
  }
335
361
  }
362
+ .tab-content {
363
+ clear: both;
364
+ }
336
365
 
337
366
  // Basic pill nav
338
367
  .pills {
339
368
  a {
340
- margin: 5px 3px 5px 0;
369
+ margin: 5px 3px 5px 0;
341
370
  padding: 0 15px;
342
- text-shadow: 0 1px 1px #fff;
371
+ text-shadow: 0 1px 1px $white;
343
372
  line-height: 30px;
344
373
  @include border-radius(15px);
345
374
  &:hover {
346
375
  background: $linkColorHover;
347
- color: #fff;
376
+ color: $white;
348
377
  text-decoration: none;
349
378
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
350
379
  }
351
380
  }
352
381
  .active a {
353
382
  background: $linkColor;
354
- color: #fff;
383
+ color: $white;
355
384
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
356
385
  }
357
386
  }
358
387
 
388
+ .tab-content > *, .pill-content > * {
389
+ display: none;
390
+ }
391
+
392
+ .tab-content > .active, .pill-content > .active {
393
+ display:block;
394
+ }
395
+
396
+ // BREADCRUMBS
397
+ // -----------
398
+
399
+ .breadcrumb {
400
+ margin: 0 0 $baseline;
401
+ padding: 7px 14px;
402
+ @include vertical-gradient(#ffffff, #f5f5f5);
403
+ border: 1px solid #ddd;
404
+ @include border-radius(3px);
405
+ @include box-shadow(inset 0 1px 0 $white);
406
+ li {
407
+ display: inline;
408
+ text-shadow: 0 1px 0 $white;
409
+ }
410
+ .divider {
411
+ padding: 0 5px;
412
+ color: $grayLight;
413
+ }
414
+ a {
415
+ }
416
+ .active a {
417
+ color: $grayDark;
418
+ }
419
+ }
420
+
359
421
 
360
422
  // PAGE HEADERS
361
423
  // ------------
362
424
 
363
425
  .hero-unit {
364
426
  background-color: #f5f5f5;
365
- margin-top: 60px;
366
427
  margin-bottom: 30px;
367
428
  padding: 60px;
368
429
  @include border-radius(6px);
@@ -401,6 +462,26 @@ footer {
401
462
  // BUTTON STYLES
402
463
  // -------------
403
464
 
465
+ // Shared colors for buttons and alerts
466
+ .btn, .alert-message {
467
+ // Set text color
468
+ &.danger, &.danger:hover, &.error, &.error:hover, &.success, &.success:hover, &.info, &.info:hover {
469
+ color: $white
470
+ }
471
+ // Danger and error appear as red
472
+ &.danger, &.error {
473
+ @include gradientBar(#ee5f5b, #c43c35);
474
+ }
475
+ // Success appears as green
476
+ &.success {
477
+ @include gradientBar(#62c462, #57a957);
478
+ }
479
+ // Info appears as a neutral blue
480
+ &.info {
481
+ @include gradientBar(#5bc0de, #339bb9);
482
+ }
483
+ }
484
+
404
485
  // Base .btn styles
405
486
  .btn {
406
487
  // Button Base
@@ -410,7 +491,7 @@ footer {
410
491
  padding: 5px 14px 6px;
411
492
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
412
493
  color: #333;
413
- font-size: 13px;
494
+ font-size: $basefont;
414
495
  line-height: normal;
415
496
  border: 1px solid #ccc;
416
497
  border-bottom-color: #bbb;
@@ -424,9 +505,14 @@ footer {
424
505
  text-decoration: none;
425
506
  }
426
507
 
508
+ // Focus state for keyboard and accessibility
509
+ &:focus {
510
+ outline: 1px dotted #666;
511
+ }
512
+
427
513
  // Primary Button Type
428
514
  &.primary {
429
- color:#fff;
515
+ color: $white;
430
516
  @include gradientBar($blue, $blueDark)
431
517
  }
432
518
 
@@ -441,6 +527,7 @@ footer {
441
527
  &.disabled {
442
528
  cursor: default;
443
529
  background-image: none;
530
+ @include reset-filter();
444
531
  @include opacity(65);
445
532
  @include box-shadow(none);
446
533
  }
@@ -449,20 +536,21 @@ footer {
449
536
  // def because IE8 and below will drop it ;_;
450
537
  cursor: default;
451
538
  background-image: none;
539
+ @include reset-filter();
452
540
  @include opacity(65);
453
541
  @include box-shadow(none);
454
542
  }
455
543
 
456
544
  // Button Sizes
457
545
  &.large {
458
- font-size: 16px;
546
+ font-size: $basefont + 2px;
459
547
  line-height: normal;
460
548
  padding: 9px 14px 9px;
461
549
  @include border-radius(6px);
462
550
  }
463
551
  &.small {
464
552
  padding: 7px 9px 7px;
465
- font-size: 11px;
553
+ font-size: $basefont - 2px;
466
554
  }
467
555
  }
468
556
  // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -478,21 +566,46 @@ button.btn, input[type=submit].btn {
478
566
  }
479
567
  }
480
568
 
569
+
570
+ // CLOSE ICONS
571
+ // -----------
572
+ .close {
573
+ float: right;
574
+ color: $black;
575
+ font-size: 20px;
576
+ font-weight: bold;
577
+ line-height: $baseline * .75;
578
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
579
+ @include opacity(20);
580
+ &:hover {
581
+ color: $black;
582
+ text-decoration: none;
583
+ @include opacity(40);
584
+ }
585
+ }
586
+
587
+
481
588
  // ERROR STYLES
482
589
  // ------------
483
590
 
484
591
  // Base alert styles
485
592
  .alert-message {
486
- @include gradientBar(#fceec1, #eedc94); // warning by default
593
+ position: relative;
594
+ padding: 7px 15px;
487
595
  margin-bottom: $baseline;
488
- padding: 7px 14px;
489
596
  color: $grayDark;
597
+ @include gradientBar(#fceec1, #eedc94); // warning by default
490
598
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
491
599
  border-width: 1px;
492
600
  border-style: solid;
493
601
  @include border-radius(4px);
494
602
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
495
603
 
604
+ // Adjust close icon
605
+ .close {
606
+ *margin-top: 3px; /* IE7 spacing */
607
+ }
608
+
496
609
  // Remove extra margin from content
497
610
  h5 {
498
611
  line-height: $baseline;
@@ -509,31 +622,23 @@ button.btn, input[type=submit].btn {
509
622
  // Provide actions with buttons
510
623
  @include box-shadow(0 1px 0 rgba(255,255,255,.25));
511
624
  }
512
- .close {
513
- float: right;
514
- margin-top: -2px;
515
- color: $black;
516
- font-size: 20px;
517
- font-weight: bold;
518
- text-shadow: 0 1px 0 rgba(255,255,255,1);
519
- @include opacity(20);
520
- &:hover {
521
- color: $black;
522
- text-decoration: none;
523
- @include opacity(40);
524
- }
525
- }
526
625
 
527
626
  &.block-message {
528
627
  background-image: none;
529
628
  background-color: lighten(#fceec1, 5%);
629
+ @include reset-filter();
530
630
  padding: 14px;
531
631
  border-color: #fceec1;
532
632
  @include box-shadow(none);
533
-
534
- p {
633
+ ul, p {
535
634
  margin-right: 30px;
536
635
  }
636
+ ul {
637
+ margin-bottom: 0;
638
+ }
639
+ li {
640
+ color: $grayDark;
641
+ }
537
642
  .alert-actions {
538
643
  margin-top: 5px;
539
644
  }
@@ -596,8 +701,10 @@ button.btn, input[type=submit].btn {
596
701
  }
597
702
  }
598
703
 
704
+
599
705
  // WELLS
600
706
  // -----
707
+
601
708
  .well {
602
709
  background-color: #f5f5f5;
603
710
  margin-bottom: 20px;
@@ -607,26 +714,39 @@ button.btn, input[type=submit].btn {
607
714
  border: 1px solid rgba(0,0,0,.05);
608
715
  @include border-radius(4px);
609
716
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
717
+ blockquote {
718
+ border-color: #ddd;
719
+ border-color: rgba(0,0,0,.15);
720
+ }
610
721
  }
611
722
 
723
+
612
724
  // MODALS
613
725
  // ------
726
+
614
727
  .modal-backdrop {
615
- background-color: rgba(0,0,0,.5);
728
+ background-color: $black;
616
729
  position: fixed;
617
730
  top: 0;
618
731
  left: 0;
619
732
  right: 0;
620
733
  bottom: 0;
621
- z-index: 1000;
734
+ z-index: 10000;
735
+ // Fade for backdrop
736
+ &.fade { opacity: 0; }
622
737
  }
738
+
739
+ .modal-backdrop, .modal-backdrop.fade.in {
740
+ @include opacity(80);
741
+ }
742
+
623
743
  .modal {
624
744
  position: fixed;
625
745
  top: 50%;
626
746
  left: 50%;
627
- z-index: 2000;
747
+ z-index: 11000;
628
748
  width: 560px;
629
- margin: -280px 0 0 -250px;
749
+ margin: -250px 0 0 -250px;
630
750
  background-color: $white;
631
751
  border: 1px solid #999;
632
752
  border: 1px solid rgba(0,0,0,.3);
@@ -634,45 +754,46 @@ button.btn, input[type=submit].btn {
634
754
  @include border-radius(6px);
635
755
  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
636
756
  @include background-clip(padding-box);
757
+ .close { margin-top: 7px; }
758
+ &.fade {
759
+ $trans: opacity .3s linear, top .3s ease-out;
760
+ @include transition($trans);
761
+ top: -25%;
762
+ }
763
+ &.fade.in { top: 50%; }
637
764
  }
638
765
  .modal-header {
639
766
  border-bottom: 1px solid #eee;
640
- padding: 5px 20px;
641
- .close {
642
- position: absolute;
643
- right: 10px;
644
- top: 10px;
645
- color: #999;
646
- line-height:10px;
647
- font-size: 18px;
648
- }
767
+ padding: 5px 15px;
649
768
  }
650
769
  .modal-body {
651
- padding: 20px;
770
+ padding: 15px;
652
771
  }
653
772
  .modal-footer {
654
773
  background-color: #f5f5f5;
655
- padding: 14px 20px 15px;
774
+ padding: 14px 15px 15px;
656
775
  border-top: 1px solid #ddd;
657
776
  @include border-radius(0 0 6px 6px);
658
- @include box-shadow(inset 0 1px 0 #fff);
777
+ @include box-shadow(inset 0 1px 0 $white);
659
778
  @include clearfix();
660
779
  margin-bottom: 0;
661
780
  .btn {
662
781
  float: right;
663
- margin-left: 10px;
782
+ margin-left: 5px;
664
783
  }
665
784
  }
666
785
 
786
+
667
787
  // POPOVER ARROWS
668
788
  // --------------
789
+
669
790
  @mixin above-arrow($arrowWidth: 5px) {
670
791
  bottom: 0;
671
792
  left: 50%;
672
793
  margin-left: -$arrowWidth;
673
794
  border-left: $arrowWidth solid transparent;
674
795
  border-right: $arrowWidth solid transparent;
675
- border-top: $arrowWidth solid #000;
796
+ border-top: $arrowWidth solid $black;
676
797
  }
677
798
  @mixin left-arrow($arrowWidth: 5px) {
678
799
  top: 50%;
@@ -680,7 +801,7 @@ button.btn, input[type=submit].btn {
680
801
  margin-top: -$arrowWidth;
681
802
  border-top: $arrowWidth solid transparent;
682
803
  border-bottom: $arrowWidth solid transparent;
683
- border-left: $arrowWidth solid #000;
804
+ border-left: $arrowWidth solid $black;
684
805
  }
685
806
  @mixin below-arrow($arrowWidth: 5px) {
686
807
  top: 0;
@@ -688,7 +809,7 @@ button.btn, input[type=submit].btn {
688
809
  margin-left: -$arrowWidth;
689
810
  border-left: $arrowWidth solid transparent;
690
811
  border-right: $arrowWidth solid transparent;
691
- border-bottom: $arrowWidth solid #000;
812
+ border-bottom: $arrowWidth solid $black;
692
813
  }
693
814
  @mixin right-arrow($arrowWidth: 5px) {
694
815
  top: 50%;
@@ -696,11 +817,12 @@ button.btn, input[type=submit].btn {
696
817
  margin-top: -$arrowWidth;
697
818
  border-top: $arrowWidth solid transparent;
698
819
  border-bottom: $arrowWidth solid transparent;
699
- border-right: $arrowWidth solid #000;
820
+ border-right: $arrowWidth solid $black;
700
821
  }
701
822
 
702
823
  // TWIPSY
703
824
  // ------
825
+
704
826
  .twipsy {
705
827
  display: block;
706
828
  position: absolute;
@@ -709,6 +831,9 @@ button.btn, input[type=submit].btn {
709
831
  font-size: 11px;
710
832
  z-index: 1000;
711
833
  @include opacity(80);
834
+ &.fade.in {
835
+ @include opacity(80);
836
+ }
712
837
  &.above .twipsy-arrow { @include above-arrow(); }
713
838
  &.left .twipsy-arrow { @include left-arrow(); }
714
839
  &.below .twipsy-arrow { @include below-arrow(); }
@@ -716,7 +841,7 @@ button.btn, input[type=submit].btn {
716
841
  }
717
842
  .twipsy-inner {
718
843
  padding: 3px 8px;
719
- background-color: #000;
844
+ background-color: $black;
720
845
  color: white;
721
846
  text-align: center;
722
847
  max-width: 200px;
@@ -729,8 +854,10 @@ button.btn, input[type=submit].btn {
729
854
  height: 0;
730
855
  }
731
856
 
857
+
732
858
  // POPOVERS
733
859
  // --------
860
+
734
861
  .popover {
735
862
  position: absolute;
736
863
  top: 0;
@@ -748,8 +875,8 @@ button.btn, input[type=submit].btn {
748
875
  height: 0;
749
876
  }
750
877
  .inner {
751
- background: #333;
752
- background: rgba(0,0,0,.8);
878
+ background-color: $black;
879
+ background-color: rgba(0,0,0,.8);
753
880
  padding: 3px;
754
881
  overflow: hidden;
755
882
  width: 280px;
@@ -774,3 +901,60 @@ button.btn, input[type=submit].btn {
774
901
  }
775
902
  }
776
903
 
904
+
905
+ // PATTERN ANIMATIONS
906
+ // ------------------
907
+
908
+ .fade {
909
+ @include transition(opacity .15s linear);
910
+ opacity: 0;
911
+ &.in {
912
+ opacity: 1;
913
+ }
914
+ }
915
+
916
+ // LABELS
917
+ // ------
918
+
919
+ .label {
920
+ padding: 1px 3px 2px;
921
+ background-color: $grayLight;
922
+ font-size: $basefont * .75;
923
+ font-weight: bold;
924
+ color: $white;
925
+ text-transform: uppercase;
926
+ @include border-radius(3px);
927
+ &.important { background-color: #c43c35; }
928
+ &.warning { background-color: $orange; }
929
+ &.success { background-color: $green; }
930
+ &.notice { background-color: lighten($blue, 25%); }
931
+ }
932
+
933
+
934
+ // MEDIA GRIDS
935
+ // -----------
936
+
937
+ .media-grid {
938
+ margin-left: -20px;
939
+ margin-bottom: 0;
940
+ @include clearfix();
941
+ li {
942
+ display: inline;
943
+ }
944
+ a {
945
+ float: left;
946
+ padding: 4px;
947
+ margin: 0 0 20px 20px;
948
+ border: 1px solid #ddd;
949
+ @include border-radius(4px);
950
+ @include box-shadow(0 1px 1px rgba(0,0,0,.075));
951
+ img {
952
+ display: block;
953
+ }
954
+ &:hover {
955
+ border-color: $linkColor;
956
+ @include box-shadow(0 1px 4px rgba(0,105,214,.25));
957
+ }
958
+ }
959
+ }
960
+