compass_twitter_bootstrap 0.1.4 → 0.1.5

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.
@@ -23,8 +23,10 @@
23
23
  }
24
24
 
25
25
  // Hover and active states
26
- a:hover,
27
- ul .active a {
26
+ // h3 for backwards compatibility
27
+ h3 a:hover,
28
+ .brand a:hover,
29
+ ul .active > a {
28
30
  background-color: #333;
29
31
  background-color: rgba(255,255,255,.05);
30
32
  color: $white;
@@ -32,17 +34,29 @@
32
34
  }
33
35
 
34
36
  // Website name
37
+ // h3 left for backwards compatibility
35
38
  h3 {
36
39
  position: relative;
37
- a {
38
- float: left;
39
- display: block;
40
- padding: 8px 20px 12px;
41
- margin-left: -20px; // negative indent to left-align the text down the page
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;
42
59
  color: $white;
43
- font-size: 20px;
44
- font-weight: 200;
45
- line-height: 1;
46
60
  }
47
61
  }
48
62
 
@@ -53,12 +67,16 @@
53
67
  position: relative;
54
68
  @include opacity(100);
55
69
  }
70
+ // Todo: remove from v2.0 when ready, added for legacy
71
+ form.pull-right {
72
+ float: right;
73
+ }
56
74
  input {
57
75
  background-color: #444;
58
76
  background-color: rgba(255,255,255,.3);
59
77
  @include sans-serif(13px, normal, 1);
60
78
  padding: 4px 9px;
61
- color: #fff;
79
+ color: $white;
62
80
  color: rgba(255,255,255,.75);
63
81
  border: 1px solid #111;
64
82
  @include border-radius(4px);
@@ -77,15 +95,15 @@
77
95
  &:hover {
78
96
  background-color: $grayLight;
79
97
  background-color: rgba(255,255,255,.5);
80
- color: #fff;
98
+ color: $white;
81
99
  }
82
100
  // Focus states (we use .focused since IE8 and down doesn't support :focus)
83
101
  &:focus,
84
102
  &.focused {
85
- outline: none;
86
- background-color: #fff;
103
+ outline: 0;
104
+ background-color: $white;
87
105
  color: $grayDark;
88
- text-shadow: 0 1px 0 #fff;
106
+ text-shadow: 0 1px 0 $white;
89
107
  border: 0;
90
108
  padding: 5px 10px;
91
109
  @include box-shadow(0 0 3px rgba(0,0,0,.15));
@@ -94,11 +112,11 @@
94
112
  }
95
113
 
96
114
  // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
97
- // For backwards compatability, include .topbar .fill
115
+ // For backwards compatibility, include .topbar .fill
98
116
  .topbar-inner,
99
117
  .topbar .fill {
100
118
  background-color: #222;
101
- @include vertical(#333, #222);
119
+ @include gradient-vertical(#333, #222);
102
120
  $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
103
121
  @include box-shadow($shadow);
104
122
  }
@@ -128,11 +146,11 @@
128
146
  line-height: 19px;
129
147
  text-decoration: none;
130
148
  &:hover {
131
- color: #fff;
149
+ color: $white;
132
150
  text-decoration: none;
133
151
  }
134
152
  }
135
- .active a {
153
+ .active > a {
136
154
  background-color: #222;
137
155
  background-color: rgba(0,0,0,.5);
138
156
  }
@@ -146,6 +164,7 @@
146
164
  .menu-dropdown,
147
165
  .dropdown-menu {
148
166
  right: 0;
167
+ border: 0;
149
168
  }
150
169
  }
151
170
  // Dropdowns within the .nav
@@ -164,7 +183,7 @@
164
183
  // a.menu for backwards compatibility
165
184
  a.menu,
166
185
  .dropdown-toggle {
167
- color: #fff;
186
+ color: $white;
168
187
  &.open {
169
188
  background: #444;
170
189
  background: rgba(255,255,255,.05);
@@ -174,10 +193,13 @@
174
193
  color: #999;
175
194
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
176
195
  &:hover {
177
- @include vertical(#292929,#191919);
178
- color: #fff;
196
+ @include gradient-vertical(#292929,#191919);
197
+ color: $white;
179
198
  }
180
199
  }
200
+ .active a {
201
+ color: $white;
202
+ }
181
203
  .divider {
182
204
  background-color: #222;
183
205
  border-color: #444;
@@ -185,7 +207,7 @@
185
207
  }
186
208
  }
187
209
 
188
- // For backwards compatability with new dropdowns, redeclare dropdown link padding
210
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
189
211
  .topbar ul .menu-dropdown li a,
190
212
  .topbar ul .dropdown-menu li a {
191
213
  padding: 4px 15px;
@@ -212,18 +234,19 @@ a.menu:after,
212
234
  margin-left: 4px;
213
235
  border-left: 4px solid transparent;
214
236
  border-right: 4px solid transparent;
215
- border-top: 4px solid #fff;
237
+ border-top: 4px solid $white;
216
238
  @include opacity(50);
217
239
  }
218
240
  // The dropdown menu (ul)
219
241
  // .menu-dropdown for backwards compatibility
220
242
  .menu-dropdown,
221
243
  .dropdown-menu {
222
- background-color: #fff;
244
+ background-color: $white;
223
245
  float: left;
224
246
  display: none; // None by default, but block on "open" of the menu
225
247
  position: absolute;
226
248
  top: 40px;
249
+ z-index: 900;
227
250
  min-width: 160px;
228
251
  max-width: 220px;
229
252
  _width: 160px;
@@ -251,7 +274,7 @@ a.menu:after,
251
274
  margin: 5px 0;
252
275
  overflow: hidden;
253
276
  background-color: #eee;
254
- border-bottom: 1px solid #fff;
277
+ border-bottom: 1px solid $white;
255
278
  }
256
279
  }
257
280
 
@@ -264,10 +287,10 @@ a.menu:after,
264
287
  font-weight: normal;
265
288
  line-height: 18px;
266
289
  color: $gray;
267
- text-shadow: 0 1px 0 #fff;
290
+ text-shadow: 0 1px 0 $white;
268
291
  // Hover state
269
292
  &:hover {
270
- @include vertical(#eeeeee, #dddddd);
293
+ @include gradient-vertical(#eeeeee, #dddddd);
271
294
  color: $grayDark;
272
295
  text-decoration: none;
273
296
  $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
@@ -283,7 +306,7 @@ a.menu:after,
283
306
  // .menu for backwards compatibility
284
307
  .menu,
285
308
  .dropdown-toggle {
286
- color: #fff;
309
+ color: $white;
287
310
  background: #ccc;
288
311
  background: rgba(0,0,0,.3);
289
312
  }
@@ -301,7 +324,7 @@ a.menu:after,
301
324
  margin: 0 0 20px;
302
325
  padding: 0;
303
326
  list-style: none;
304
- @include cft();
327
+ @include clearfix();
305
328
  > li {
306
329
  float: left;
307
330
  > a {
@@ -312,28 +335,29 @@ a.menu:after,
312
335
 
313
336
  // Basic Tabs
314
337
  .tabs {
338
+ float: left;
315
339
  width: 100%;
316
340
  border-bottom: 1px solid #ddd;
317
341
  > li {
318
342
  position: relative; // For the dropdowns mostly
319
343
  top: 1px;
320
344
  > a {
321
- margin-right: 2px;
322
345
  padding: 0 15px;
323
- line-height: ($baseline * 2) - 1;
346
+ margin-right: 2px;
347
+ line-height: $baseline * 2;
348
+ border: 1px solid transparent;
324
349
  @include border-radius(4px 4px 0 0);
325
350
  &:hover {
326
- background-color: #eee;
327
- border-bottom: 1px solid #ddd;
328
351
  text-decoration: none;
352
+ background-color: #eee;
353
+ border-color: #eee #eee #ddd;
329
354
  }
330
355
  }
331
356
  &.active > a {
332
- background-color: #fff;
333
- padding: 0 14px;
334
- border: 1px solid #ddd;
335
- border-bottom: 0;
336
357
  color: $gray;
358
+ background-color: $white;
359
+ border: 1px solid #ddd;
360
+ border-bottom-color: transparent;
337
361
  }
338
362
  }
339
363
  // first one for backwards compatibility
@@ -351,41 +375,84 @@ a.menu:after,
351
375
  margin-left: 5px;
352
376
  }
353
377
  // first one for backwards compatibility
378
+ li.open.menu .menu,
379
+ .open.dropdown .dropdown-toggle {
380
+ border-color: #999;
381
+ }
382
+ // first one for backwards compatibility
354
383
  li.open a.menu:after,
355
384
  .dropdown.open .dropdown-toggle:after {
356
385
  border-top-color: #555;
357
386
  }
358
387
  }
388
+ .tab-content {
389
+ clear: both;
390
+ }
359
391
 
360
392
  // Basic pill nav
361
393
  .pills {
362
394
  a {
363
- margin: 5px 3px 5px 0;
395
+ margin: 5px 3px 5px 0;
364
396
  padding: 0 15px;
365
- text-shadow: 0 1px 1px #fff;
397
+ text-shadow: 0 1px 1px $white;
366
398
  line-height: 30px;
367
399
  @include border-radius(15px);
368
400
  &:hover {
369
401
  background: $linkColorHover;
370
- color: #fff;
402
+ color: $white;
371
403
  text-decoration: none;
372
404
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
373
405
  }
374
406
  }
375
407
  .active a {
376
408
  background: $linkColor;
377
- color: #fff;
409
+ color: $white;
378
410
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
379
411
  }
380
412
  }
381
413
 
414
+ .tab-content > *,
415
+ .pill-content > * {
416
+ display: none;
417
+ }
418
+
419
+ .tab-content > .active,
420
+ .pill-content > .active {
421
+ display:block;
422
+ }
423
+
424
+
425
+ // BREADCRUMBS
426
+ // -----------
427
+
428
+ .breadcrumb {
429
+ margin: 0 0 $baseline;
430
+ padding: 7px 14px;
431
+ @include gradient-vertical(#ffffff, #f5f5f5);
432
+ border: 1px solid #ddd;
433
+ @include border-radius(3px);
434
+ @include box-shadow(inset 0 1px 0 $white);
435
+ li {
436
+ display: inline;
437
+ text-shadow: 0 1px 0 $white;
438
+ }
439
+ .divider {
440
+ padding: 0 5px;
441
+ color: $grayLight;
442
+ }
443
+ a {
444
+ }
445
+ .active a {
446
+ color: $grayDark;
447
+ }
448
+ }
449
+
382
450
 
383
451
  // PAGE HEADERS
384
452
  // ------------
385
453
 
386
454
  .hero-unit {
387
455
  background-color: #f5f5f5;
388
- margin-top: 60px;
389
456
  margin-bottom: 30px;
390
457
  padding: 60px;
391
458
  @include border-radius(6px);
@@ -424,16 +491,45 @@ footer {
424
491
  // BUTTON STYLES
425
492
  // -------------
426
493
 
494
+ // Shared colors for buttons and alerts
495
+ .btn,
496
+ .alert-message {
497
+ // Set text color
498
+ &.danger,
499
+ &.danger:hover,
500
+ &.error,
501
+ &.error:hover,
502
+ &.success,
503
+ &.success:hover,
504
+ &.info,
505
+ &.info:hover {
506
+ color: $white
507
+ }
508
+ // Danger and error appear as red
509
+ &.danger,
510
+ &.error {
511
+ @include gradientBar(#ee5f5b, #c43c35);
512
+ }
513
+ // Success appears as green
514
+ &.success {
515
+ @include gradientBar(#62c462, #57a957);
516
+ }
517
+ // Info appears as a neutral blue
518
+ &.info {
519
+ @include gradientBar(#5bc0de, #339bb9);
520
+ }
521
+ }
522
+
427
523
  // Base .btn styles
428
524
  .btn {
429
525
  // Button Base
430
526
  cursor: pointer;
431
527
  display: inline-block;
432
- @include vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
528
+ @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use @include gradientbar(); here since it does a three-color gradient
433
529
  padding: 5px 14px 6px;
434
530
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
435
531
  color: #333;
436
- font-size: 13px;
532
+ font-size: $basefont;
437
533
  line-height: normal;
438
534
  border: 1px solid #ccc;
439
535
  border-bottom-color: #bbb;
@@ -447,10 +543,15 @@ footer {
447
543
  text-decoration: none;
448
544
  }
449
545
 
546
+ // Focus state for keyboard and accessibility
547
+ &:focus {
548
+ outline: 1px dotted #666;
549
+ }
550
+
450
551
  // Primary Button Type
451
552
  &.primary {
452
- color:#fff;
453
- @include gradientBar($blue, $blueDark)
553
+ color: $white;
554
+ @include gradientBar($blue, $blueDark);
454
555
  }
455
556
 
456
557
  // Transitions
@@ -464,7 +565,7 @@ footer {
464
565
  &.disabled {
465
566
  cursor: default;
466
567
  background-image: none;
467
- @include reset-filter;
568
+ @include reset-filter();
468
569
  @include opacity(65);
469
570
  @include box-shadow(none);
470
571
  }
@@ -473,21 +574,21 @@ footer {
473
574
  // def because IE8 and below will drop it ;_;
474
575
  cursor: default;
475
576
  background-image: none;
476
- @include reset-filter;
577
+ @include reset-filter();
477
578
  @include opacity(65);
478
579
  @include box-shadow(none);
479
580
  }
480
581
 
481
582
  // Button Sizes
482
583
  &.large {
483
- font-size: 16px;
584
+ font-size: $basefont + 2px;
484
585
  line-height: normal;
485
586
  padding: 9px 14px 9px;
486
587
  @include border-radius(6px);
487
588
  }
488
589
  &.small {
489
590
  padding: 7px 9px 7px;
490
- font-size: 11px;
591
+ font-size: $basefont - 2px;
491
592
  }
492
593
  }
493
594
  // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -506,21 +607,45 @@ input[type=submit].btn {
506
607
  }
507
608
 
508
609
 
610
+ // CLOSE ICONS
611
+ // -----------
612
+ .close {
613
+ float: right;
614
+ color: $black;
615
+ font-size: 20px;
616
+ font-weight: bold;
617
+ line-height: $baseline * .75;
618
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
619
+ @include opacity(20);
620
+ &:hover {
621
+ color: $black;
622
+ text-decoration: none;
623
+ @include opacity(40);
624
+ }
625
+ }
626
+
627
+
509
628
  // ERROR STYLES
510
629
  // ------------
511
630
 
512
631
  // Base alert styles
513
632
  .alert-message {
514
- @include gradientBar(#fceec1, #eedc94); // warning by default
633
+ position: relative;
634
+ padding: 7px 15px;
515
635
  margin-bottom: $baseline;
516
- padding: 7px 14px;
517
636
  color: $grayDark;
637
+ @include gradientBar(#fceec1, #eedc94); // warning by default
518
638
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
519
639
  border-width: 1px;
520
640
  border-style: solid;
521
641
  @include border-radius(4px);
522
642
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
523
643
 
644
+ // Adjust close icon
645
+ .close {
646
+ *margin-top: 3px; /* IE7 spacing */
647
+ }
648
+
524
649
  // Remove extra margin from content
525
650
  h5 {
526
651
  line-height: $baseline;
@@ -537,32 +662,23 @@ input[type=submit].btn {
537
662
  // Provide actions with buttons
538
663
  @include box-shadow(0 1px 0 rgba(255,255,255,.25));
539
664
  }
540
- .close {
541
- float: right;
542
- margin-top: -2px;
543
- color: $black;
544
- font-size: 20px;
545
- font-weight: bold;
546
- text-shadow: 0 1px 0 rgba(255,255,255,1);
547
- @include opacity(20);
548
- &:hover {
549
- color: $black;
550
- text-decoration: none;
551
- @include opacity(40);
552
- }
553
- }
554
665
 
555
666
  &.block-message {
556
667
  background-image: none;
557
668
  background-color: lighten(#fceec1, 5%);
558
- @include reset-filter;
669
+ @include reset-filter();
559
670
  padding: 14px;
560
671
  border-color: #fceec1;
561
672
  @include box-shadow(none);
562
-
563
- p {
673
+ ul, p {
564
674
  margin-right: 30px;
565
675
  }
676
+ ul {
677
+ margin-bottom: 0;
678
+ }
679
+ li {
680
+ color: $grayDark;
681
+ }
566
682
  .alert-actions {
567
683
  margin-top: 5px;
568
684
  }
@@ -642,6 +758,10 @@ input[type=submit].btn {
642
758
  border: 1px solid rgba(0,0,0,.05);
643
759
  @include border-radius(4px);
644
760
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
761
+ blockquote {
762
+ border-color: #ddd;
763
+ border-color: rgba(0,0,0,.15);
764
+ }
645
765
  }
646
766
 
647
767
 
@@ -649,21 +769,28 @@ input[type=submit].btn {
649
769
  // ------
650
770
 
651
771
  .modal-backdrop {
652
- background-color: rgba(0,0,0,.5);
772
+ background-color: $black;
653
773
  position: fixed;
654
774
  top: 0;
655
775
  left: 0;
656
776
  right: 0;
657
777
  bottom: 0;
658
- z-index: 1000;
778
+ z-index: 10000;
779
+ // Fade for backdrop
780
+ &.fade { opacity: 0; }
659
781
  }
782
+
783
+ .modal-backdrop, .modal-backdrop.fade.in {
784
+ @include opacity(80);
785
+ }
786
+
660
787
  .modal {
661
788
  position: fixed;
662
789
  top: 50%;
663
790
  left: 50%;
664
- z-index: 2000;
791
+ z-index: 11000;
665
792
  width: 560px;
666
- margin: -280px 0 0 -250px;
793
+ margin: -250px 0 0 -250px;
667
794
  background-color: $white;
668
795
  border: 1px solid #999;
669
796
  border: 1px solid rgba(0,0,0,.3);
@@ -671,33 +798,31 @@ input[type=submit].btn {
671
798
  @include border-radius(6px);
672
799
  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
673
800
  @include background-clip(padding-box);
801
+ .close { margin-top: 7px; }
802
+ &.fade {
803
+ @include transition(e('opacity .3s linear, top .3s ease-out'));
804
+ top: -25%;
805
+ }
806
+ &.fade.in { top: 50%; }
674
807
  }
675
808
  .modal-header {
676
809
  border-bottom: 1px solid #eee;
677
- padding: 5px 20px;
678
- .close {
679
- position: absolute;
680
- right: 10px;
681
- top: 10px;
682
- color: #999;
683
- line-height:10px;
684
- font-size: 18px;
685
- }
810
+ padding: 5px 15px;
686
811
  }
687
812
  .modal-body {
688
- padding: 20px;
813
+ padding: 15px;
689
814
  }
690
815
  .modal-footer {
691
816
  background-color: #f5f5f5;
692
- padding: 14px 20px 15px;
817
+ padding: 14px 15px 15px;
693
818
  border-top: 1px solid #ddd;
694
819
  @include border-radius(0 0 6px 6px);
695
- @include box-shadow(inset 0 1px 0 #fff);
820
+ @include box-shadow(inset 0 1px 0 $white);
696
821
  @include clearfix();
697
822
  margin-bottom: 0;
698
823
  .btn {
699
824
  float: right;
700
- margin-left: 10px;
825
+ margin-left: 5px;
701
826
  }
702
827
  }
703
828
 
@@ -705,7 +830,6 @@ input[type=submit].btn {
705
830
  // POPOVER ARROWS
706
831
  // --------------
707
832
 
708
-
709
833
  @mixin popover-arrow-above($arrowWidth: 5px) {
710
834
  bottom: 0;
711
835
  left: 50%;
@@ -739,7 +863,6 @@ input[type=submit].btn {
739
863
  border-right: $arrowWidth solid #000;
740
864
  }
741
865
 
742
-
743
866
  // TWIPSY
744
867
  // ------
745
868
 
@@ -751,6 +874,9 @@ input[type=submit].btn {
751
874
  font-size: 11px;
752
875
  z-index: 1000;
753
876
  @include opacity(80);
877
+ &.fade.in {
878
+ @include opacity(80);
879
+ }
754
880
  &.above .twipsy-arrow { @include popover-arrow-above(); }
755
881
  &.left .twipsy-arrow { @include popover-arrow-left(); }
756
882
  &.below .twipsy-arrow { @include popover-arrow-below(); }
@@ -758,7 +884,7 @@ input[type=submit].btn {
758
884
  }
759
885
  .twipsy-inner {
760
886
  padding: 3px 8px;
761
- background-color: #000;
887
+ background-color: $black;
762
888
  color: white;
763
889
  text-align: center;
764
890
  max-width: 200px;
@@ -792,8 +918,8 @@ input[type=submit].btn {
792
918
  height: 0;
793
919
  }
794
920
  .inner {
795
- background: #333;
796
- background: rgba(0,0,0,.8);
921
+ background-color: $black;
922
+ background-color: rgba(0,0,0,.8);
797
923
  padding: 3px;
798
924
  overflow: hidden;
799
925
  width: 280px;
@@ -816,4 +942,62 @@ input[type=submit].btn {
816
942
  margin-bottom: 0;
817
943
  }
818
944
  }
819
- }
945
+ }
946
+
947
+
948
+ // PATTERN ANIMATIONS
949
+ // ------------------
950
+
951
+ .fade {
952
+ @include transition(opacity .15s linear);
953
+ opacity: 0;
954
+ &.in {
955
+ opacity: 1;
956
+ }
957
+ }
958
+
959
+
960
+ // LABELS
961
+ // ------
962
+
963
+ .label {
964
+ padding: 1px 3px 2px;
965
+ background-color: $grayLight;
966
+ font-size: $basefont * .75;
967
+ font-weight: bold;
968
+ color: $white;
969
+ text-transform: uppercase;
970
+ @include border-radius(3px);
971
+ &.important { background-color: #c43c35; }
972
+ &.warning { background-color: $orange; }
973
+ &.success { background-color: $green; }
974
+ &.notice { background-color: lighten($blue, 25%); }
975
+ }
976
+
977
+
978
+ // MEDIA GRIDS
979
+ // -----------
980
+
981
+ .media-grid {
982
+ margin-left: -20px;
983
+ margin-bottom: 0;
984
+ @include clearfix();
985
+ li {
986
+ display: inline;
987
+ }
988
+ a {
989
+ float: left;
990
+ padding: 4px;
991
+ margin: 0 0 20px 20px;
992
+ border: 1px solid #ddd;
993
+ @include border-radius(4px);
994
+ @include box-shadow(0 1px 1px rgba(0,0,0,.075));
995
+ img {
996
+ display: block;
997
+ }
998
+ &:hover {
999
+ border-color: $linkColor;
1000
+ @include box-shadow(0 1px 4px rgba(0,105,214,.25));
1001
+ }
1002
+ }
1003
+ }