bootstrap-sass 2.0.2 → 2.0.3

Sign up to get free protection for your applications and to get access to all the features.

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 {