compass-bootstrap-rails 0.1.3.3 → 0.1.4.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.
@@ -25,7 +25,7 @@
25
25
  // Hover and active states
26
26
  // h3 for backwards compatibility
27
27
  h3 a:hover,
28
- .brand a:hover,
28
+ .brand:hover,
29
29
  ul .active > a {
30
30
  background-color: #333;
31
31
  background-color: rgba(255,255,255,.05);
@@ -74,12 +74,12 @@
74
74
  input {
75
75
  background-color: #444;
76
76
  background-color: rgba(255,255,255,.3);
77
- @include font-sans-serif(13px, normal, 1);
77
+ @include sans-serif(13px, normal, 1);
78
78
  padding: 4px 9px;
79
79
  color: $white;
80
80
  color: rgba(255,255,255,.75);
81
81
  border: 1px solid #111;
82
- @include border-radius(4px);
82
+ @include@include border-radius(4px);
83
83
  $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
84
  @include box-shadow($shadow);
85
85
  @include transition(none);
@@ -116,7 +116,7 @@
116
116
  .topbar-inner,
117
117
  .topbar .fill {
118
118
  background-color: #222;
119
- @include gradient-vertical(#333, #222);
119
+ @include vertical(#333, #222);
120
120
  $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
121
  @include box-shadow($shadow);
122
122
  }
@@ -193,7 +193,7 @@
193
193
  color: #999;
194
194
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
195
  &:hover {
196
- @include gradient-vertical(#292929,#191919);
196
+ @include vertical(#292929,#191919);
197
197
  color: $white;
198
198
  }
199
199
  }
@@ -278,7 +278,8 @@ a.menu:after,
278
278
  }
279
279
  }
280
280
 
281
- .topbar .dropdown-menu, .dropdown-menu {
281
+ .topbar .dropdown-menu,
282
+ .dropdown-menu {
282
283
  // Links within the dropdown menu
283
284
  a {
284
285
  display: block;
@@ -289,8 +290,9 @@ a.menu:after,
289
290
  color: $gray;
290
291
  text-shadow: 0 1px 0 $white;
291
292
  // Hover state
292
- &:hover {
293
- @include gradient-vertical(#eeeeee, #dddddd);
293
+ &:hover,
294
+ &.hover {
295
+ @include vertical(#eeeeee, #dddddd);
294
296
  color: $grayDark;
295
297
  text-decoration: none;
296
298
  $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
@@ -318,10 +320,13 @@ a.menu:after,
318
320
  }
319
321
 
320
322
 
321
- // Tabs and Pills
323
+ // TABS AND PILLS
324
+ // --------------
325
+
326
+ // Common styles
322
327
  .tabs,
323
328
  .pills {
324
- margin: 0 0 20px;
329
+ margin: 0 0 @baseline;
325
330
  padding: 0;
326
331
  list-style: none;
327
332
  @include clearfix();
@@ -333,18 +338,18 @@ a.menu:after,
333
338
  }
334
339
  }
335
340
 
336
- // Basic Tabs
341
+ // Tabs
337
342
  .tabs {
338
- float: left;
339
- width: 100%;
340
- border-bottom: 1px solid #ddd;
343
+ border-color: #ddd;
344
+ border-style: solid;
345
+ border-width: 0 0 1px;
341
346
  > li {
342
347
  position: relative; // For the dropdowns mostly
343
- top: 1px;
348
+ margin-bottom: -1px;
344
349
  > a {
345
350
  padding: 0 15px;
346
351
  margin-right: 2px;
347
- line-height: $baseline * 2;
352
+ line-height: ($baseline * 2) - 2;
348
353
  border: 1px solid transparent;
349
354
  @include border-radius(4px 4px 0 0);
350
355
  &:hover {
@@ -353,13 +358,19 @@ a.menu:after,
353
358
  border-color: #eee #eee #ddd;
354
359
  }
355
360
  }
356
- &.active > a {
361
+ // Active state, and it's :hover to override normal :hover
362
+ .active > a,
363
+ .active > a:hover {
357
364
  color: $gray;
358
365
  background-color: $white;
359
366
  border: 1px solid #ddd;
360
367
  border-bottom-color: transparent;
368
+ cursor: default;
361
369
  }
362
370
  }
371
+
372
+ // Dropdowns in tabs
373
+ .tabs {
363
374
  // first one for backwards compatibility
364
375
  .menu-dropdown,
365
376
  .dropdown-menu {
@@ -385,37 +396,43 @@ a.menu:after,
385
396
  border-top-color: #555;
386
397
  }
387
398
  }
388
- .tab-content {
389
- clear: both;
390
- }
391
399
 
392
- // Basic pill nav
400
+ // Pills
393
401
  .pills {
394
402
  a {
395
- margin: 5px 3px 5px 0;
403
+ margin: 5px 3px 5px 0;
396
404
  padding: 0 15px;
397
- text-shadow: 0 1px 1px $white;
398
405
  line-height: 30px;
406
+ text-shadow: 0 1px 1px $white;
399
407
  @include border-radius(15px);
400
408
  &:hover {
401
- background: $linkColorHover;
402
409
  color: $white;
403
410
  text-decoration: none;
404
411
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
412
+ background: $linkColorHover;
405
413
  }
406
414
  }
407
415
  .active a {
408
- background: $linkColor;
409
416
  color: $white;
410
417
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
418
+ background: $linkColor;
411
419
  }
412
420
  }
413
421
 
414
- .tab-content > *,
415
- .pill-content > * {
416
- display: none;
422
+
423
+ // Stacked pills
424
+ .pills-vertical > li {
425
+ float: none;
417
426
  }
418
427
 
428
+ // Tabbable areas
429
+ .tab-content,
430
+ .pill-content {
431
+ }
432
+ .tab-content > .tab-pane,
433
+ .pill-content > .pill-pane {
434
+ display: none;
435
+ }
419
436
  .tab-content > .active,
420
437
  .pill-content > .active {
421
438
  display:block;
@@ -426,9 +443,9 @@ a.menu:after,
426
443
  // -----------
427
444
 
428
445
  .breadcrumb {
429
- margin: 0 0 $baseline;
430
446
  padding: 7px 14px;
431
- @include gradient-vertical(#ffffff, #f5f5f5);
447
+ margin: 0 0 $baseline;
448
+ @include vertical(#ffffff, #f5f5f5);
432
449
  border: 1px solid #ddd;
433
450
  @include border-radius(3px);
434
451
  @include box-shadow(inset 0 1px 0 $white);
@@ -440,8 +457,6 @@ a.menu:after,
440
457
  padding: 0 5px;
441
458
  color: $grayLight;
442
459
  }
443
- a {
444
- }
445
460
  .active a {
446
461
  color: $grayDark;
447
462
  }
@@ -505,6 +520,11 @@ footer {
505
520
  &.info:hover {
506
521
  color: $white
507
522
  }
523
+ // Sets the close button to the middle of message
524
+ .close{
525
+ font-family: Arial, sans-serif;
526
+ line-height: 18px;
527
+ }
508
528
  // Danger and error appear as red
509
529
  &.danger,
510
530
  &.error {
@@ -525,7 +545,7 @@ footer {
525
545
  // Button Base
526
546
  cursor: pointer;
527
547
  display: inline-block;
528
- @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
548
+ @include vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
549
  padding: 5px 14px 6px;
530
550
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
551
  color: #333;
@@ -558,7 +578,8 @@ footer {
558
578
  @include transition(.1s linear all);
559
579
 
560
580
  // Active and Disabled states
561
- &:active {
581
+ &:active,
582
+ :active {
562
583
  $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
584
  @include box-shadow($shadow);
564
585
  }
@@ -594,15 +615,15 @@ footer {
594
615
  // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
616
  :root .alert-message,
596
617
  :root .btn {
597
- border-radius: 0 \0;
618
+ @include border-radius: 0 \0;
598
619
  }
599
620
 
600
621
  // Help Firefox not be a jerk about adding extra padding to buttons
601
622
  button.btn,
602
623
  input[type=submit].btn {
603
624
  &::-moz-focus-inner {
604
- padding: 0;
605
- border: 0;
625
+  padding: 0;
626
+  border: 0;
606
627
  }
607
628
  }
608
629
 
@@ -616,7 +637,7 @@ input[type=submit].btn {
616
637
  font-weight: bold;
617
638
  line-height: $baseline * .75;
618
639
  text-shadow: 0 1px 0 rgba(255,255,255,1);
619
- @include opacity(20);
640
+ @include opacity(25);
620
641
  &:hover {
621
642
  color: $black;
622
643
  text-decoration: none;
@@ -643,7 +664,20 @@ input[type=submit].btn {
643
664
 
644
665
  // Adjust close icon
645
666
  .close {
646
- *margin-top: 3px; /* IE7 spacing */
667
+ margin-top: 1px;
668
+ *margin-top: 0; /* For IE7 */
669
+ }
670
+
671
+ // Make links same color as text and stand out more
672
+ a {
673
+ font-weight: bold;
674
+ color: $grayDark;
675
+ }
676
+ &.danger p a,
677
+ &.error p a,
678
+ &.success p a,
679
+ &.info p a {
680
+ color: $white;
647
681
  }
648
682
 
649
683
  // Remove extra margin from content
@@ -700,6 +734,14 @@ input[type=submit].btn {
700
734
  background-color: lighten(#6bd0ee, 25%);
701
735
  border-color: lighten(#6bd0ee, 20%);
702
736
  }
737
+ // Change link color back
738
+ &.danger p a,
739
+ &.error p a,
740
+ &.success p a,
741
+ &.info p a {
742
+ color: $grayDark;
743
+ }
744
+
703
745
  }
704
746
  }
705
747
 
@@ -780,7 +822,8 @@ input[type=submit].btn {
780
822
  &.fade { opacity: 0; }
781
823
  }
782
824
 
783
- .modal-backdrop, .modal-backdrop.fade.in {
825
+ .modal-backdrop,
826
+ .modal-backdrop.fade.in {
784
827
  @include opacity(80);
785
828
  }
786
829
 
@@ -790,7 +833,7 @@ input[type=submit].btn {
790
833
  left: 50%;
791
834
  z-index: 11000;
792
835
  width: 560px;
793
- margin: -250px 0 0 -250px;
836
+ margin: -250px 0 0 -280px;
794
837
  background-color: $white;
795
838
  border: 1px solid #999;
796
839
  border: 1px solid rgba(0,0,0,.3);
@@ -812,6 +855,9 @@ input[type=submit].btn {
812
855
  .modal-body {
813
856
  padding: 15px;
814
857
  }
858
+ .modal-body form {
859
+ margin-bottom: 0;
860
+ }
815
861
  .modal-footer {
816
862
  background-color: #f5f5f5;
817
863
  padding: 14px 15px 15px;
@@ -826,41 +872,49 @@ input[type=submit].btn {
826
872
  }
827
873
  }
828
874
 
875
+ // Fix the stacking of these components when in modals
876
+ .modal .popover,
877
+ .modal .twipsy {
878
+ z-index: 12000;
879
+ }
880
+
829
881
 
830
882
  // POPOVER ARROWS
831
883
  // --------------
832
884
 
833
- @mixin popoverArrow-above($arrowWidth: 5px) {
834
- bottom: 0;
835
- left: 50%;
836
- margin-left: -$arrowWidth;
837
- border-left: $arrowWidth solid transparent;
838
- border-right: $arrowWidth solid transparent;
839
- border-top: $arrowWidth solid $black;
840
- }
841
- @mixin popoverArrow-left($arrowWidth: 5px) {
842
- top: 50%;
843
- right: 0;
844
- margin-top: -$arrowWidth;
845
- border-top: $arrowWidth solid transparent;
846
- border-bottom: $arrowWidth solid transparent;
847
- border-left: $arrowWidth solid $black;
848
- }
849
- @mixin popoverArrow-below($arrowWidth: 5px) {
850
- top: 0;
851
- left: 50%;
852
- margin-left: -$arrowWidth;
853
- border-left: $arrowWidth solid transparent;
854
- border-right: $arrowWidth solid transparent;
855
- border-bottom: $arrowWidth solid $black;
856
- }
857
- @mixin popoverArrow-right($arrowWidth: 5px) {
858
- top: 50%;
859
- left: 0;
860
- margin-top: -$arrowWidth;
861
- border-top: $arrowWidth solid transparent;
862
- border-bottom: $arrowWidth solid transparent;
863
- border-right: $arrowWidth solid $black;
885
+ #popoverArrow {
886
+ @mixin above($arrowWidth: 5px) {
887
+ bottom: 0;
888
+ left: 50%;
889
+ margin-left: -$arrowWidth;
890
+ border-left: $arrowWidth solid transparent;
891
+ border-right: $arrowWidth solid transparent;
892
+ border-top: $arrowWidth solid $black;
893
+ }
894
+ @mixin left($arrowWidth: 5px) {
895
+ top: 50%;
896
+ right: 0;
897
+ margin-top: -$arrowWidth;
898
+ border-top: $arrowWidth solid transparent;
899
+ border-bottom: $arrowWidth solid transparent;
900
+ border-left: $arrowWidth solid $black;
901
+ }
902
+ @mixin below($arrowWidth: 5px) {
903
+ top: 0;
904
+ left: 50%;
905
+ margin-left: -$arrowWidth;
906
+ border-left: $arrowWidth solid transparent;
907
+ border-right: $arrowWidth solid transparent;
908
+ border-bottom: $arrowWidth solid $black;
909
+ }
910
+ @mixin right($arrowWidth: 5px) {
911
+ top: 50%;
912
+ left: 0;
913
+ margin-top: -$arrowWidth;
914
+ border-top: $arrowWidth solid transparent;
915
+ border-bottom: $arrowWidth solid transparent;
916
+ border-right: $arrowWidth solid $black;
917
+ }
864
918
  }
865
919
 
866
920
  // TWIPSY
@@ -873,14 +927,14 @@ input[type=submit].btn {
873
927
  padding: 5px;
874
928
  font-size: 11px;
875
929
  z-index: 1000;
876
- @include opacity(80);
930
+ .opacity(80);
877
931
  &.fade.in {
878
932
  @include opacity(80);
879
933
  }
880
- &.above .twipsy-arrow { @include popoverArrow-above(); }
881
- &.left .twipsy-arrow { @include popoverArrow-left(); }
882
- &.below .twipsy-arrow { @include popoverArrow-below(); }
883
- &.right .twipsy-arrow { @include popoverArrow-right(); }
934
+ &.above .twipsy-arrow { @include above(); }
935
+ &.left .twipsy-arrow { @include left(); }
936
+ &.below .twipsy-arrow { @include below(); }
937
+ &.right .twipsy-arrow { @include right(); }
884
938
  }
885
939
  .twipsy-inner {
886
940
  padding: 3px 8px;
@@ -908,18 +962,18 @@ input[type=submit].btn {
908
962
  z-index: 1000;
909
963
  padding: 5px;
910
964
  display: none;
911
- &.above .arrow { @include popoverArrow-above(); }
912
- &.right .arrow { @include popoverArrow-right(); }
913
- &.below .arrow { @include popoverArrow-below(); }
914
- &.left .arrow { @include popoverArrow-left(); }
965
+ &.above .arrow { @include above(); }
966
+ &.right .arrow { @include right(); }
967
+ &.below .arrow { @include below(); }
968
+ &.left .arrow { @include left(); }
915
969
  .arrow {
916
970
  position: absolute;
917
971
  width: 0;
918
972
  height: 0;
919
973
  }
920
974
  .inner {
921
- background-color: $black;
922
- background-color: rgba(0,0,0,.8);
975
+ background: $black;
976
+ background: rgba(0,0,0,.8);
923
977
  padding: 3px;
924
978
  overflow: hidden;
925
979
  width: 280px;
@@ -962,11 +1016,12 @@ input[type=submit].btn {
962
1016
 
963
1017
  .label {
964
1018
  padding: 1px 3px 2px;
965
- background-color: $grayLight;
966
1019
  font-size: $basefont * .75;
967
1020
  font-weight: bold;
968
1021
  color: $white;
969
1022
  text-transform: uppercase;
1023
+ white-space: nowrap;
1024
+ background-color: $grayLight;
970
1025
  @include border-radius(3px);
971
1026
  &.important { background-color: #c43c35; }
972
1027
  &.warning { background-color: $orange; }
@@ -979,7 +1034,7 @@ input[type=submit].btn {
979
1034
  // -----------
980
1035
 
981
1036
  .media-grid {
982
- margin-left: -20px;
1037
+ margin-left: -@gridGutterWidth;
983
1038
  margin-bottom: 0;
984
1039
  @include clearfix();
985
1040
  li {
@@ -988,7 +1043,7 @@ input[type=submit].btn {
988
1043
  a {
989
1044
  float: left;
990
1045
  padding: 4px;
991
- margin: 0 0 20px 20px;
1046
+ margin: 0 0 @baseline @gridGutterWidth;
992
1047
  border: 1px solid #ddd;
993
1048
  @include border-radius(4px);
994
1049
  @include box-shadow(0 1px 1px rgba(0,0,0,.075));