bootstrap-sass 2.0.2 → 2.0.3

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.

Files changed (44) hide show
  1. data/README.md +26 -10
  2. data/lib/bootstrap-sass.rb +24 -13
  3. data/lib/bootstrap-sass/{compass_extensions.rb → compass_functions.rb} +0 -0
  4. data/lib/bootstrap-sass/engine.rb +0 -2
  5. data/lib/bootstrap-sass/{config/sass_extentions.rb → rails_functions.rb} +0 -0
  6. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  7. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  8. data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
  9. data/vendor/assets/javascripts/bootstrap-button.js +29 -33
  10. data/vendor/assets/javascripts/bootstrap-carousel.js +27 -19
  11. data/vendor/assets/javascripts/bootstrap-collapse.js +45 -26
  12. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  13. data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
  14. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  15. data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
  16. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  17. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  18. data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
  19. data/vendor/assets/javascripts/bootstrap-typeahead.js +24 -10
  20. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +100 -68
  21. data/vendor/assets/stylesheets/_bootstrap.scss +11 -2
  22. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +5 -0
  23. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +51 -31
  24. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +15 -11
  25. data/vendor/assets/stylesheets/bootstrap/_close.scss +12 -1
  26. data/vendor/assets/stylesheets/bootstrap/_code.scss +4 -4
  27. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +4 -4
  28. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +16 -22
  29. data/vendor/assets/stylesheets/bootstrap/_forms.scss +58 -37
  30. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
  31. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -1
  32. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +99 -73
  33. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +61 -40
  34. data/vendor/assets/stylesheets/bootstrap/_navs.scss +27 -26
  35. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +15 -6
  36. data/vendor/assets/stylesheets/bootstrap/_reset.scss +3 -3
  37. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +25 -5
  38. data/vendor/assets/stylesheets/bootstrap/_tables.scss +17 -6
  39. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +14 -0
  40. data/vendor/assets/stylesheets/bootstrap/_type.scss +7 -6
  41. data/vendor/assets/stylesheets/bootstrap/_variables.scss +52 -9
  42. metadata +10 -22
  43. data/vendor/assets/stylesheets/bootstrap/_badges.scss +0 -36
  44. data/vendor/assets/stylesheets/bootstrap/_labels.scss +0 -38
@@ -0,0 +1,50 @@
1
+ // LABELS & BADGES
2
+ // ---------------
3
+
4
+ // Base classes
5
+ .label, .badge {
6
+ font-size: $baseFontSize * .846;
7
+ font-weight: bold;
8
+ line-height: 14px; // ensure proper line-height if floated
9
+ color: $white;
10
+ vertical-align: baseline;
11
+ white-space: nowrap;
12
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
13
+ background-color: $grayLight;
14
+ }
15
+ // Set unique padding and border-radii
16
+ .label {
17
+ padding: 1px 4px 2px;
18
+ @include border-radius(3px);
19
+ }
20
+ .badge {
21
+ padding: 1px 9px 2px;
22
+ @include border-radius(9px);
23
+ }
24
+
25
+ // Hover state, but only for links
26
+ a {
27
+ &.label:hover, &.badge:hover {
28
+ color: $white;
29
+ text-decoration: none;
30
+ cursor: pointer;
31
+ }
32
+ }
33
+
34
+ // Colors
35
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
36
+ // Important (red)
37
+ .label-important, .badge-important { background-color: $errorText; }
38
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
39
+ // Warnings (orange)
40
+ .label-warning, .badge-warning { background-color: $orange; }
41
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
42
+ // Success (green)
43
+ .label-success, .badge-success { background-color: $successText; }
44
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
45
+ // Info (turquoise)
46
+ .label-info, .badge-info { background-color: $infoText; }
47
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
48
+ // Inverse (black)
49
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
50
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
@@ -11,7 +11,7 @@
11
11
 
12
12
  // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
13
  .container-fluid {
14
- padding-left: $gridGutterWidth;
15
14
  padding-right: $gridGutterWidth;
15
+ padding-left: $gridGutterWidth;
16
16
  @include clearfix();
17
17
  }
@@ -71,11 +71,11 @@
71
71
 
72
72
  // Sizing shortcuts
73
73
  // -------------------------
74
- @mixin size($height: 5px, $width: 5px) {
74
+ @mixin size($height, $width) {
75
75
  width: $width;
76
76
  height: $height;
77
77
  }
78
- @mixin square($size: 5px) {
78
+ @mixin square($size) {
79
79
  @include size($size, $size);
80
80
  }
81
81
 
@@ -98,26 +98,28 @@
98
98
  white-space: nowrap;
99
99
  }
100
100
 
101
- // New image replacement
101
+ // CSS image replacement
102
102
  // -------------------------
103
- // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
103
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
104
104
  @mixin hide-text() {
105
- overflow: hidden;
106
- text-indent: 100%;
107
- white-space: nowrap;
105
+ font: 0/0 a;
106
+ color: transparent;
107
+ text-shadow: none;
108
+ background-color: transparent;
109
+ border: 0;
108
110
  }
109
111
 
110
112
 
111
113
  // FONTS
112
114
  // --------------------------------------------------
113
115
  @mixin font-family-serif() {
114
- font-family: Georgia, "Times New Roman", Times, serif;
116
+ font-family: $serifFontFamily;
115
117
  }
116
118
  @mixin font-family-sans-serif() {
117
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
119
+ font-family: $sansFontFamily;
118
120
  }
119
121
  @mixin font-family-monospace() {
120
- font-family: Menlo, Monaco, "Courier New", monospace;
122
+ font-family: $monoFontFamily;
121
123
  }
122
124
  @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
123
125
  font-size: $size;
@@ -145,9 +147,8 @@
145
147
  @mixin input-block-level() {
146
148
  display: block;
147
149
  width: 100%;
148
- min-height: 28px; /* Make inputs at least the height of their button counterpart */
149
- /* Makes inputs behave like true block-level elements */
150
- @include box-sizing(border-box);
150
+ min-height: 28px; // Make inputs at least the height of their button counterpart
151
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
151
152
  }
152
153
 
153
154
 
@@ -179,14 +180,14 @@
179
180
  // --------------------------------------------------
180
181
 
181
182
  // Border Radius
182
- @mixin border-radius($radius: 5px) {
183
+ @mixin border-radius($radius) {
183
184
  -webkit-border-radius: $radius;
184
185
  -moz-border-radius: $radius;
185
186
  border-radius: $radius;
186
187
  }
187
188
 
188
189
  // Drop shadows
189
- @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
190
+ @mixin box-shadow($shadow) {
190
191
  -webkit-box-shadow: $shadow;
191
192
  -moz-box-shadow: $shadow;
192
193
  box-shadow: $shadow;
@@ -216,7 +217,7 @@
216
217
  -o-transform: scale($ratio);
217
218
  transform: scale($ratio);
218
219
  }
219
- @mixin translate($x: 0, $y: 0) {
220
+ @mixin translate($x, $y) {
220
221
  -webkit-transform: translate($x, $y);
221
222
  -moz-transform: translate($x, $y);
222
223
  -ms-transform: translate($x, $y);
@@ -224,7 +225,7 @@
224
225
  transform: translate($x, $y);
225
226
  }
226
227
 
227
- @mixin skew($x: 0, $y: 0) {
228
+ @mixin skew($x, $y) {
228
229
  -webkit-transform: skew($x, $y);
229
230
  -moz-transform: skew($x, $y);
230
231
  -ms-transform: skew($x, $y);
@@ -232,7 +233,7 @@
232
233
  transform: skew($x, $y);
233
234
  }
234
235
 
235
- @mixin translate3d($x: 0, $y: 0, $z: 0) {
236
+ @mixin translate3d($x, $y, $z) {
236
237
  -webkit-transform: translate($x, $y, $z);
237
238
  -moz-transform: translate($x, $y, $z);
238
239
  -ms-transform: translate($x, $y, $z);
@@ -240,6 +241,17 @@
240
241
  transform: translate($x, $y, $z);
241
242
  }
242
243
 
244
+ // Backface visibility
245
+ // Prevent browsers from flickering when using CSS 3D transforms.
246
+ // Default value is `visible`, but can be changed to `hidden
247
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
248
+ @mixin backface-visibility($visibility){
249
+ -webkit-backface-visibility: $visibility;
250
+ -moz-backface-visibility: $visibility;
251
+ -ms-backface-visibility: $visibility;
252
+ backface-visibility: $visibility;
253
+ }
254
+
243
255
  // Background clipping
244
256
  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
245
257
  @mixin background-clip($clip) {
@@ -270,18 +282,19 @@
270
282
  @mixin user-select($select) {
271
283
  -webkit-user-select: $select;
272
284
  -moz-user-select: $select;
285
+ -ms-user-select: $select;
273
286
  -o-user-select: $select;
274
287
  user-select: $select;
275
288
  }
276
289
 
277
290
  // Resize anything
278
- @mixin resizable($direction: both) {
291
+ @mixin resizable($direction) {
279
292
  resize: $direction; // Options: horizontal, vertical, both
280
293
  overflow: auto; // Safari fix
281
294
  }
282
295
 
283
296
  // CSS3 Content Columns
284
- @mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
297
+ @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
285
298
  -webkit-column-count: $columnCount;
286
299
  -moz-column-count: $columnCount;
287
300
  column-count: $columnCount;
@@ -293,7 +306,7 @@
293
306
  // Opacity
294
307
  @mixin opacity($opacity: 1) {
295
308
  opacity: $opacity;
296
- filter: alpha(opacity=$opacity * 100);
309
+ filter: alpha(opacity=#{$opacity * 100});
297
310
  }
298
311
 
299
312
 
@@ -391,18 +404,17 @@
391
404
  // -------------------
392
405
  // Dividers (basically an hr) within dropdowns and nav lists
393
406
  @mixin nav-divider() {
394
- height: 1px;
395
- margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
396
- overflow: hidden;
397
- background-color: #e5e5e5;
398
- border-bottom: 1px solid $white;
399
-
400
407
  // IE7 needs a set width since we gave a height. Restricting just
401
408
  // to IE7 to keep the 1px left/right space in other browsers.
402
409
  // It is unclear where IE is getting the extra space that we need
403
410
  // to negative-margin away, but so it goes.
404
411
  *width: 100%;
412
+ height: 1px;
413
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
405
414
  *margin: -5px 0 5px;
415
+ overflow: hidden;
416
+ background-color: #e5e5e5;
417
+ border-bottom: 1px solid $white;
406
418
  }
407
419
 
408
420
  // Button backgrounds
@@ -410,11 +422,13 @@
410
422
  @mixin buttonBackground($startColor, $endColor) {
411
423
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
412
424
  @include gradientBar($startColor, $endColor);
425
+ *background-color: $endColor; // Darken IE7 buttons by default so they stand out more given they won't have borders
413
426
  @include reset-filter();
414
427
 
415
428
  // in these cases the gradient won't cover the background, so we override
416
429
  &:hover, &:active, &.active, &.disabled, &[disabled] {
417
430
  background-color: $endColor;
431
+ *background-color: darken($endColor, 5%);
418
432
  }
419
433
 
420
434
  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -472,8 +486,8 @@
472
486
 
473
487
  // Centered container element
474
488
  @mixin container-fixed() {
475
- margin-left: auto;
476
489
  margin-right: auto;
490
+ margin-left: auto;
477
491
  @include clearfix();
478
492
  }
479
493
 
@@ -490,83 +504,95 @@
490
504
  margin-left: $gridGutterWidth * -1;
491
505
  @include clearfix();
492
506
  }
493
- @mixin makeColumn($columns: 1) {
507
+ @mixin makeColumn($columns: 1, $offset: 0) {
494
508
  float: left;
495
- margin-left: $gridGutterWidth;
509
+ margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
496
510
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
497
511
  }
498
512
 
499
513
  // The Grid
500
- @mixin gridCore($gridColumnWidth, $gridGutterWidth) {
501
- [class*="span"] {
502
- float: left;
503
- margin-left: $gridGutterWidth;
504
- }
505
-
506
- @for $i from 1 through $gridColumns {
507
- .span#{$i} { @include gridCoreSpan($i, $gridColumnWidth, $gridGutterWidth) }
514
+ @mixin gridCore($columnWidth, $gutterWidth) {
515
+ .row {
516
+ margin-left: $gutterWidth * -1;
517
+ @include clearfix();
508
518
  }
509
519
 
510
- @for $i from 1 through $gridColumns {
511
- .offset#{$i} { @include gridCoreOffset($i, $gridColumnWidth, $gridGutterWidth) }
520
+ [class*="span"] {
521
+ float: left;
522
+ margin-left: $gutterWidth;
512
523
  }
513
524
 
514
- .row {
515
- margin-left: $gridGutterWidth * -1;
516
- @include clearfix();
517
- }
525
+ // Set the container width, and override it for fixed navbars in media queries
526
+ .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }
518
527
 
519
- .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
520
- @include gridCoreSpan($gridColumns, $gridColumnWidth, $gridGutterWidth);
528
+ @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
529
+ @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
530
+ }
531
+ @mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
532
+ @for $i from 1 through $cols {
533
+ .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
521
534
  }
522
535
  }
523
-
524
- @mixin gridCoreSpan($columns, $gridColumnWidth, $gridGutterWidth) {
525
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
536
+ @mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
537
+ width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
526
538
  }
527
-
528
- @mixin gridCoreOffset($columns, $gridColumnWidth, $gridGutterWidth) {
529
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
539
+ @mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
540
+ @for $i from 1 through $cols {
541
+ .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
542
+ }
543
+ }
544
+ @mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
545
+ margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
530
546
  }
531
547
 
532
- @mixin gridFluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
548
+ @mixin gridFluid($columnWidth, $gutterWidth) {
533
549
  .row-fluid {
534
550
  width: 100%;
535
551
  @include clearfix();
536
- > [class*="span"] {
552
+ [class*="span"] {
553
+ @include input-block-level();
537
554
  float: left;
538
- margin-left: $fluidGridGutterWidth;
555
+ margin-left: $gutterWidth;
556
+ *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
539
557
  }
540
- > [class*="span"]:first-child {
558
+ [class*="span"]:first-child {
541
559
  margin-left: 0;
542
560
  }
543
- @for $i from 1 through $gridColumns {
544
- > .span#{$i} { @include gridFluidSpan($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
545
- }
546
- }
547
- }
548
561
 
549
- @mixin gridFluidSpan($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
550
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
562
+ // generate .spanX
563
+ @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
564
+ }
551
565
  }
552
-
553
- @mixin gridInput($gridColumnWidth, $gridGutterWidth) {
554
- @for $i from 1 through $gridColumns {
555
- input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $gridColumnWidth, $gridGutterWidth); }
566
+ @mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
567
+ @for $i from 1 through $cols {
568
+ .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
556
569
  }
570
+ }
571
+ @mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
572
+ width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
573
+ *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
574
+ }
557
575
 
576
+ @mixin gridInput($columnWidth, $gutterWidth) {
558
577
  input, textarea, .uneditable-input {
559
578
  margin-left: 0; // override margin-left from core grid system
560
579
  }
561
- }
562
580
 
563
- @mixin gridInputSpan($columns, $gridColumWidth, $gridGutterWidth) {
564
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
581
+ // generate .spanX
582
+ @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
583
+ }
584
+ @mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
585
+ @for $i from 1 through $cols {
586
+ input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
587
+ }
588
+ }
589
+ @mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
590
+ width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
565
591
  }
566
592
 
567
- @mixin makeFluidColumn($columns) {
593
+ @mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
568
594
  // This isn't perfect, but it's better than nothing.
569
595
  float: left;
570
- margin-left: $fluidGridGutterWidth;
571
- @include gridFluidSpan($columns, $fluidGridColumnWidth, $fluidGridGutterWidth);
596
+ margin-left: $gutterWidth;
597
+ @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
572
598
  }
@@ -16,12 +16,12 @@
16
16
 
17
17
  // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
18
18
  .navbar-inner {
19
+ min-height: $navbarHeight;
19
20
  padding-left: 20px;
20
21
  padding-right: 20px;
21
22
  @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
22
23
  @include border-radius(4px);
23
- $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
24
- @include box-shadow($shadow);
24
+ @include box-shadow(#{0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)});
25
25
  }
26
26
 
27
27
  // Set width to auto for default container
@@ -30,28 +30,6 @@
30
30
  width: auto;
31
31
  }
32
32
 
33
- // Navbar button for toggling navbar items in responsive layouts
34
- .btn-navbar {
35
- display: none;
36
- float: right;
37
- padding: 7px 10px;
38
- margin-left: 5px;
39
- margin-right: 5px;
40
- @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
41
- $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
42
- @include box-shadow($shadow);
43
- }
44
- .btn-navbar .icon-bar {
45
- display: block;
46
- width: 18px;
47
- height: 2px;
48
- background-color: #f5f5f5;
49
- @include border-radius(1px);
50
- @include box-shadow(0 1px 0 rgba(0,0,0,.25));
51
- }
52
- .btn-navbar .icon-bar + .icon-bar {
53
- margin-top: 3px;
54
- }
55
33
  // Override the default collapsed state
56
34
  .nav-collapse.collapse {
57
35
  height: auto;
@@ -69,24 +47,33 @@
69
47
  .brand {
70
48
  float: left;
71
49
  display: block;
72
- padding: 8px 20px 12px;
50
+ // Vertically center the text given $navbarHeight
51
+ $elementHeight: 20px;
52
+ padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
73
53
  margin-left: -20px; // negative indent to left-align the text down the page
74
54
  font-size: 20px;
75
55
  font-weight: 200;
76
56
  line-height: 1;
77
- color: $white;
57
+ color: $navbarBrandColor;
78
58
  }
79
59
  // Plain text in topbar
80
60
  .navbar-text {
81
61
  margin-bottom: 0;
82
62
  line-height: $navbarHeight;
83
63
  }
64
+ // Janky solution for now to account for links outside the .nav
65
+ .navbar-link {
66
+ color: $navbarLinkColor;
67
+ &:hover {
68
+ color: $navbarLinkColorHover;
69
+ }
70
+ }
84
71
  // Buttons in navbar
85
72
  .btn, .btn-group {
86
73
  @include navbarVerticalAlign(30px); // Vertically center in navbar
87
74
  }
88
75
  .btn-group .btn {
89
- margin-top: 0; // then undo the margin here so we don't accidentally double it
76
+ margin: 0; // then undo the margin here so we don't accidentally double it
90
77
  }
91
78
  }
92
79
 
@@ -125,8 +112,7 @@
125
112
  color: $white;
126
113
  background-color: $navbarSearchBackground;
127
114
  border: 1px solid $navbarSearchBorder;
128
- $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
129
- @include box-shadow($shadow);
115
+ @include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)});
130
116
  @include transition(none);
131
117
 
132
118
  // Placeholder text gets special styles; can't be a grouped selector
@@ -198,12 +184,29 @@
198
184
  // Links
199
185
  .navbar .nav > li > a {
200
186
  float: none;
201
- padding: 10px 10px 11px;
187
+ // Vertically center the text given $navbarHeight
188
+ $elementHeight: 20px;
189
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
202
190
  line-height: 19px;
203
191
  color: $navbarLinkColor;
204
192
  text-decoration: none;
205
193
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
206
194
  }
195
+ // Buttons
196
+ .navbar .btn {
197
+ display: inline-block;
198
+ padding: 4px 10px 4px;
199
+ // Vertically center the button given $navbarHeight
200
+ $elementHeight: 20px;
201
+ margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
202
+ line-height: $baseLineHeight;
203
+ }
204
+ .navbar .btn-group {
205
+ margin: 0;
206
+ // Vertically center the button given @navbarHeight
207
+ $elementHeight: 28px;
208
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
209
+ }
207
210
  // Hover
208
211
  .navbar .nav > li > a:hover {
209
212
  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from :active
@@ -234,22 +237,40 @@
234
237
  margin-right: 0;
235
238
  }
236
239
 
237
-
240
+ // Navbar button for toggling navbar items in responsive layouts
241
+ // These definitions need to come after '.navbar .btn'
242
+ .navbar .btn-navbar {
243
+ display: none;
244
+ float: right;
245
+ padding: 7px 10px;
246
+ margin-left: 5px;
247
+ margin-right: 5px;
248
+ @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
249
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
250
+ }
251
+ .navbar .btn-navbar .icon-bar {
252
+ display: block;
253
+ width: 18px;
254
+ height: 2px;
255
+ background-color: #f5f5f5;
256
+ @include border-radius(1px);
257
+ @include box-shadow(0 1px 0 rgba(0,0,0,.25));
258
+ }
259
+ .btn-navbar .icon-bar + .icon-bar {
260
+ margin-top: 3px;
261
+ }
238
262
 
239
263
  // Dropdown menus
240
264
  // --------------
241
265
 
242
266
  // Menu position and menu carets
243
267
  .navbar .dropdown-menu {
244
- margin-top: 1px;
245
- @include border-radius(4px);
246
268
  &:before {
247
269
  content: '';
248
270
  display: inline-block;
249
271
  border-left: 7px solid transparent;
250
272
  border-right: 7px solid transparent;
251
- border-bottom: 7px solid #ccc;
252
- border-bottom-color: $dropdownBackground;
273
+ border-bottom: 7px solid $dropdownBorder;
253
274
  position: absolute;
254
275
  top: -7px;
255
276
  left: 9px;
@@ -284,27 +305,27 @@
284
305
  }
285
306
 
286
307
  // Dropdown toggle caret
287
- .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
308
+ .navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
288
309
  border-top-color: $white;
289
310
  border-bottom-color: $white;
290
311
  }
291
- .navbar .nav .active .caret {
312
+ .navbar .nav li.dropdown.active .caret {
292
313
  @include opacity(1);
293
314
  }
294
315
 
295
316
  // Remove background color from open dropdown
296
- .navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
317
+ .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
297
318
  background-color: transparent;
298
319
  }
299
320
 
300
321
  // Dropdown link on hover
301
- .navbar .nav .active > .dropdown-toggle:hover {
322
+ .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
302
323
  color: $white;
303
324
  }
304
325
 
305
326
  // Right aligned menus need alt position
306
327
  // TODO: rejigger this at some point to simplify the selectors
307
- .navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
328
+ .navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
308
329
  left: auto;
309
330
  right: 0;
310
331
  &:before {