anjlab-bootstrap-rails 2.0.1.1 → 2.0.2.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.
Files changed (42) hide show
  1. data/README.md +2 -1
  2. data/lib/bootstrap-rails/version.rb +1 -1
  3. data/vendor/assets/javascripts/bootstrap-alert.js +1 -1
  4. data/vendor/assets/javascripts/bootstrap-button.js +1 -1
  5. data/vendor/assets/javascripts/bootstrap-carousel.js +7 -3
  6. data/vendor/assets/javascripts/bootstrap-collapse.js +4 -2
  7. data/vendor/assets/javascripts/bootstrap-dropdown.js +1 -1
  8. data/vendor/assets/javascripts/bootstrap-modal.js +1 -1
  9. data/vendor/assets/javascripts/bootstrap-popover.js +1 -1
  10. data/vendor/assets/javascripts/bootstrap-scrollspy.js +1 -1
  11. data/vendor/assets/javascripts/bootstrap-tab.js +1 -1
  12. data/vendor/assets/javascripts/bootstrap-tooltip.js +2 -2
  13. data/vendor/assets/javascripts/bootstrap-transition.js +1 -1
  14. data/vendor/assets/javascripts/bootstrap-typeahead.js +7 -7
  15. data/vendor/assets/stylesheets/alerts.scss +2 -14
  16. data/vendor/assets/stylesheets/badges.scss +36 -0
  17. data/vendor/assets/stylesheets/bootstrap.scss +2 -1
  18. data/vendor/assets/stylesheets/breadcrumbs.scss +2 -0
  19. data/vendor/assets/stylesheets/button-groups.scss +31 -7
  20. data/vendor/assets/stylesheets/buttons.scss +17 -13
  21. data/vendor/assets/stylesheets/code.scss +2 -2
  22. data/vendor/assets/stylesheets/component-animations.scss +3 -1
  23. data/vendor/assets/stylesheets/dropdowns.scss +45 -27
  24. data/vendor/assets/stylesheets/forms.scss +75 -42
  25. data/vendor/assets/stylesheets/grid.scss +2 -5
  26. data/vendor/assets/stylesheets/hero-unit.scss +3 -1
  27. data/vendor/assets/stylesheets/labels.scss +8 -2
  28. data/vendor/assets/stylesheets/mixins.scss +174 -135
  29. data/vendor/assets/stylesheets/modals.scss +12 -5
  30. data/vendor/assets/stylesheets/navbar.scss +77 -35
  31. data/vendor/assets/stylesheets/navs.scss +19 -9
  32. data/vendor/assets/stylesheets/pager.scss +6 -0
  33. data/vendor/assets/stylesheets/pagination.scss +1 -0
  34. data/vendor/assets/stylesheets/progress-bars.scss +15 -1
  35. data/vendor/assets/stylesheets/reset.scss +1 -1
  36. data/vendor/assets/stylesheets/responsive.scss +72 -28
  37. data/vendor/assets/stylesheets/scaffolding.scss +4 -4
  38. data/vendor/assets/stylesheets/tables.scss +15 -13
  39. data/vendor/assets/stylesheets/type.scss +21 -5
  40. data/vendor/assets/stylesheets/variables.scss +92 -6
  41. data/vendor/assets/stylesheets/wells.scss +10 -0
  42. metadata +12 -11
@@ -3,10 +3,13 @@
3
3
 
4
4
  // Base
5
5
  .label {
6
- padding: 2px 4px 3px;
7
- font-size: $baseFontSize * .85;
6
+ padding: 1px 4px 2px;
7
+ font-size: $baseFontSize * .846;
8
8
  font-weight: bold;
9
+ line-height: 13px; // ensure proper line-height if floated
9
10
  color: $white;
11
+ vertical-align: middle;
12
+ white-space: nowrap;
10
13
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
11
14
  background-color: $grayLight;
12
15
  @include border-radius(3px);
@@ -30,3 +33,6 @@
30
33
 
31
34
  .label-info { background-color: $infoText; }
32
35
  .label-info:hover { background-color: darken($infoText, 10%); }
36
+
37
+ .label-inverse { background-color: $grayDark; }
38
+ .label-inverse:hover { background-color: darken($grayDark, 10%); }
@@ -98,6 +98,14 @@
98
98
  white-space: nowrap;
99
99
  }
100
100
 
101
+ // New image replacement
102
+ // -------------------------
103
+ // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
104
+ .hide-text {
105
+ overflow: hidden;
106
+ text-indent: 100%;
107
+ white-space: nowrap;
108
+ }
101
109
 
102
110
 
103
111
  // FONTS
@@ -137,125 +145,27 @@
137
145
  }
138
146
 
139
147
 
140
-
141
-
142
- // GRID SYSTEM
148
+ // FORMS
143
149
  // --------------------------------------------------
144
150
 
145
- // Site container
146
- // -------------------------
147
- @mixin container-fixed() {
148
- width: $gridRowWidth;
149
- margin-left: auto;
150
- margin-right: auto;
151
- @include clearfix();
152
- }
153
-
154
- // Le grid system
155
- // -------------------------
156
-
157
- // Setup the mixins to be used
158
- @mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
159
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
160
- }
161
-
162
- @mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
163
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
164
- }
165
-
166
- @mixin grid-system-grid-column($gridGutterWidth) {
167
- float: left;
168
- margin-left: $gridGutterWidth;
169
- }
170
-
171
- // Take these values and mixins, and make 'em do their thang
172
- @mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
173
- // Row surrounds the columns
174
- .row {
175
- margin-left: $gridGutterWidth * -1;
176
- @include clearfix();
177
- }
178
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
179
- [class*="span"] {
180
- @include grid-system-grid-column($gridGutterWidth);
181
- }
182
- // Default columns
183
- @for $i from 1 through 12 {
184
- .span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
185
- }
186
- .container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
187
- // Offset column options
188
- @for $i from 1 through 11 {
189
- .offset#{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); }
190
- }
191
- }
192
-
193
- // Fluid grid system
194
- // -------------------------
195
-
196
- // Setup the mixins to be used
197
- @mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
198
- //TODO: check floid
199
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
200
- }
201
- @mixin fluid-grid-system-grid-column($fluidGridGutterWidth) {
202
- float: left;
203
- margin-left: $fluidGridGutterWidth;
204
- }
205
- // Take these values and mixins, and make 'em do their thang
206
- @mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
207
- // Row surrounds the columns
208
- .row-fluid {
209
- width: 100%;
210
- @include clearfix();
211
-
212
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
213
- > [class*="span"] {
214
- @include fluid-grid-system-grid-column($fluidGridGutterWidth);
215
- }
216
- > [class*="span"]:first-child {
217
- margin-left: 0;
218
- }
219
- // Default columns
220
- @for $i from 1 through 12 {
221
- .span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
222
- }
223
- }
151
+ // Box sizing
152
+ @mixin box-sizing($boxmodel) {
153
+ -webkit-box-sizing: $boxmodel;
154
+ -moz-box-sizing: $boxmodel;
155
+ -ms-box-sizing: $boxmodel;
156
+ box-sizing: $boxmodel;
224
157
  }
225
158
 
226
- // Input grid system
227
- // -------------------------
228
- @mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
229
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
230
- }
231
- @mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
232
- input,
233
- textarea,
234
- .uneditable-input {
235
- @for $i from 1 through 12 {
236
- &.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
237
- }
238
- }
239
- }
240
159
 
241
- // Make a Grid
242
- // -------------------------
243
- // Use .make-row and .make-column to assign semantic layouts grid system behavior
244
- @mixin make-row() {
245
- margin-left: $gridGutterWidth * -1;
246
- @include clearfix();
247
- }
248
- @mixin make-column($columns: 1) {
249
- float: left;
250
- margin-left: $gridGutterWidth;
251
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
160
+ // Block level inputs
161
+ @mixin input-block-level {
162
+ display: block;
163
+ width: 100%;
164
+ min-height: 28px; /* Make inputs at least the height of their button counterpart */
165
+ /* Makes inputs behave like true block-level elements */
166
+ @include box-sizing(border-box);
252
167
  }
253
168
 
254
-
255
-
256
- // Form field states (used in forms.less)
257
- // --------------------------------------------------
258
-
259
169
  // Mixin for form field states
260
170
  @mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
261
171
  // Set the text color
@@ -365,14 +275,6 @@
365
275
  background-size: $size;
366
276
  }
367
277
 
368
-
369
- // Box sizing
370
- @mixin box-sizing($boxmodel) {
371
- -webkit-box-sizing: $boxmodel;
372
- -moz-box-sizing: $boxmodel;
373
- box-sizing: $boxmodel;
374
- }
375
-
376
278
  // User select
377
279
  // For selecting text on the page
378
280
  @mixin user-select($select) {
@@ -473,8 +375,8 @@
473
375
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
474
376
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
475
377
  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
378
+ background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
476
379
  background-repeat: no-repeat;
477
- // Opera cannot do radial gradients yet
478
380
  }
479
381
  @mixin gradient-striped($color, $angle: -45deg) {
480
382
  background-color: $color;
@@ -500,8 +402,30 @@
500
402
  }
501
403
 
502
404
 
503
- // Mixin for generating button backgrounds
504
- // ---------------------------------------
405
+
406
+ // COMPONENT MIXINS
407
+ // --------------------------------------------------
408
+
409
+ // Horizontal dividers
410
+ // -------------------------
411
+ // Dividers (basically an hr) within dropdowns and nav lists
412
+ @mixin nav-divider() {
413
+ height: 1px;
414
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
415
+ overflow: hidden;
416
+ background-color: #e5e5e5;
417
+ border-bottom: 1px solid $white;
418
+
419
+ // IE7 needs a set width since we gave a height. Restricting just
420
+ // to IE7 to keep the 1px left/right space in other browsers.
421
+ // It is unclear where IE is getting the extra space that we need
422
+ // to negative-margin away, but so it goes.
423
+ *width: 100%;
424
+ *margin: -5px 0 5px;
425
+ }
426
+
427
+ // Button backgrounds
428
+ // ------------------
505
429
  @mixin button-background($startColor, $endColor) {
506
430
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
507
431
  @include gradient-bar($startColor, $endColor);
@@ -519,42 +443,157 @@
519
443
  }
520
444
  }
521
445
 
446
+ // Navbar vertical align
447
+ // -------------------------
448
+ // Vertically center elements in the navbar.
449
+ // Example: an element has a height of 30px, so write out `@include navbar-vertical-align(30px);` to calculate the appropriate top margin.
450
+ @mixin navbar-vertical-align($elementHeight) {
451
+ margin-top: ($navbarHeight - $elementHeight) / 2;
452
+ }
522
453
 
523
- // COMPONENT MIXINS
524
- // --------------------------------------------------
525
-
526
- // POPOVER ARROWS
454
+ // Popover arrows
527
455
  // -------------------------
528
456
  // For tipsies and popovers
529
- @mixin popover-arrow-top($arrowWidth: 5px) {
457
+ @mixin popover-arrow-top($arrowWidth: 5px, $color: $black) {
530
458
  bottom: 0;
531
459
  left: 50%;
532
460
  margin-left: -$arrowWidth;
533
461
  border-left: $arrowWidth solid transparent;
534
462
  border-right: $arrowWidth solid transparent;
535
- border-top: $arrowWidth solid $black;
463
+ border-top: $arrowWidth solid $color;
536
464
  }
537
- @mixin popover-arrow-left($arrowWidth: 5px) {
465
+ @mixin popover-arrow-left($arrowWidth: 5px, $color: $black) {
538
466
  top: 50%;
539
467
  right: 0;
540
468
  margin-top: -$arrowWidth;
541
469
  border-top: $arrowWidth solid transparent;
542
470
  border-bottom: $arrowWidth solid transparent;
543
- border-left: $arrowWidth solid $black;
471
+ border-left: $arrowWidth solid $color;
544
472
  }
545
- @mixin popover-arrow-bottom($arrowWidth: 5px) {
473
+ @mixin popover-arrow-bottom($arrowWidth: 5px, $color: $black) {
546
474
  top: 0;
547
475
  left: 50%;
548
476
  margin-left: -$arrowWidth;
549
477
  border-left: $arrowWidth solid transparent;
550
478
  border-right: $arrowWidth solid transparent;
551
- border-bottom: $arrowWidth solid $black;
479
+ border-bottom: $arrowWidth solid $color;
552
480
  }
553
- @mixin popover-arrow-right($arrowWidth: 5px) {
481
+ @mixin popover-arrow-right($arrowWidth: 5px, $color: $black) {
554
482
  top: 50%;
555
483
  left: 0;
556
484
  margin-top: -$arrowWidth;
557
485
  border-top: $arrowWidth solid transparent;
558
486
  border-bottom: $arrowWidth solid transparent;
559
- border-right: $arrowWidth solid $black;
487
+ border-right: $arrowWidth solid $color;
488
+ }
489
+
490
+ // Grid System
491
+ // -----------
492
+
493
+ // Centered container element
494
+ @mixin container-fixed() {
495
+ margin-left: auto;
496
+ margin-right: auto;
497
+ @include clearfix();
498
+ }
499
+
500
+ // Table columns
501
+ @mixin table-columns($columnSpan: 1) {
502
+ float: none; // undo default grid column styles
503
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
504
+ margin-left: 0; // undo default grid column styles
505
+ }
506
+
507
+ // Make a Grid
508
+ // Use @include make-row and @include make-column to assign semantic layouts grid system behavior
509
+ @mixin make-row() {
510
+ margin-left: $gridGutterWidth * -1;
511
+ @include clearfix();
512
+ }
513
+ @mixin make-column($columns: 1) {
514
+ float: left;
515
+ margin-left: $gridGutterWidth;
516
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
517
+ }
518
+
519
+ // The Grid
520
+
521
+ @mixin grid-core-span ($columns, $gridColumnWidth, $gridGutterWidth) {
522
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
523
+ }
524
+ @mixin grid-core-offset ($columns, $gridColumnWidth, $gridGutterWidth) {
525
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
526
+ }
527
+ @mixin grid-core-span-x($columns, $gridColumnWidth, $gridGutterWidth) {
528
+ @for $i from 1 through $columns {
529
+ .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth) }
530
+ }
531
+ }
532
+ @mixin grid-core-offset-x($columns, $gridColumnWidth, $gridGutterWidth) {
533
+ @for $i from 1 through $columns {
534
+ .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth) }
535
+ }
536
+ }
537
+ @mixin grid-core($gridColumnWidth, $gridGutterWidth) {
538
+ .row {
539
+ margin-left: $gridGutterWidth * -1;
540
+ @include clearfix();
541
+ }
542
+
543
+ [class*="span"] {
544
+ float: left;
545
+ margin-left: $gridGutterWidth;
546
+ }
547
+
548
+ // Set the container width, and override it for fixed navbars in media queries
549
+ .container,
550
+ .navbar-fixed-top .container,
551
+ .navbar-fixed-bottom .container { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth); }
552
+
553
+ // generate .spanX and .offsetX
554
+ @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
555
+ @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
556
+ }
557
+
558
+ @mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
559
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
560
+ }
561
+ @mixin grid-fluid-span-x($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
562
+ @for $i from 1 through $columns {
563
+ > .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth) }
564
+ }
565
+ }
566
+ @mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
567
+ .row-fluid {
568
+ width: 100%;
569
+ @include clearfix();
570
+ > [class*="span"] {
571
+ float: left;
572
+ margin-left: $fluidGridGutterWidth;
573
+ }
574
+ > [class*="span"]:first-child {
575
+ margin-left: 0;
576
+ }
577
+
578
+ // generate .spanX
579
+ @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
580
+ }
581
+ }
582
+ @mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
583
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
584
+ }
585
+ @mixin grid-input-span-x($columns, $gridColumnWidth, $gridGutterWidth) {
586
+ @for $i from 1 through $columns {
587
+ input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth) }
588
+ }
589
+ }
590
+ @mixin grid-input($gridColumnWidth, $gridGutterWidth) {
591
+ input,
592
+ textarea,
593
+ .uneditable-input {
594
+ margin-left: 0; // override margin-left from core grid system
595
+ }
596
+
597
+ // generate .spanX
598
+ @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
560
599
  }
@@ -33,7 +33,6 @@
33
33
  top: 50%;
34
34
  left: 50%;
35
35
  z-index: $zindexModal;
36
- max-height: 500px;
37
36
  overflow: auto;
38
37
  width: 560px;
39
38
  margin: -250px 0 0 -280px;
@@ -59,10 +58,12 @@
59
58
 
60
59
  // Body (where all modal content resises)
61
60
  .modal-body {
61
+ overflow-y: auto;
62
+ max-height: 400px;
62
63
  padding: 15px;
63
64
  }
64
65
  // Remove bottom margin if need be
65
- .modal-body .modal-form {
66
+ .modal-form {
66
67
  margin-bottom: 0;
67
68
  }
68
69
 
@@ -70,14 +71,20 @@
70
71
  .modal-footer {
71
72
  padding: 14px 15px 15px;
72
73
  margin-bottom: 0;
74
+ text-align: right; // right align buttons
73
75
  background-color: #f5f5f5;
74
76
  border-top: 1px solid #ddd;
75
77
  @include border-radius(0 0 6px 6px);
76
78
  @include box-shadow(inset 0 1px 0 $white);
77
- @include clearfix();
78
- .btn {
79
- float: right;
79
+ @include clearfix(); // clear it in case folks use .pull-* classes on buttons
80
+
81
+ // Properly space out buttons
82
+ .btn + .btn {
80
83
  margin-left: 5px;
81
84
  margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
82
85
  }
86
+ // but override that for button groups
87
+ .btn-group .btn + .btn {
88
+ margin-left: -1px;
89
+ }
83
90
  }
@@ -6,6 +6,10 @@
6
6
  // -------------
7
7
 
8
8
  .navbar {
9
+ // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
10
+ *position: relative;
11
+ *z-index: 2;
12
+
9
13
  overflow: visible;
10
14
  margin-bottom: $baseLineHeight;
11
15
  }
@@ -20,6 +24,12 @@
20
24
  @include box-shadow($shadow);
21
25
  }
22
26
 
27
+ // Set width to auto for default container
28
+ // We then reset it for fixed navbars in the #gridSystem mixin
29
+ .navbar .container {
30
+ width: auto;
31
+ }
32
+
23
33
  // Navbar button for toggling navbar items in responsive layouts
24
34
  .btn-navbar {
25
35
  display: none;
@@ -50,6 +60,7 @@
50
60
 
51
61
  // Brand, links, text, and buttons
52
62
  .navbar {
63
+ color: $navbarText;
53
64
  // Hover and active states
54
65
  .brand:hover {
55
66
  text-decoration: none;
@@ -68,17 +79,12 @@
68
79
  // Plain text in topbar
69
80
  .navbar-text {
70
81
  margin-bottom: 0;
71
- line-height: 40px;
72
- color: $navbarText;
73
- a:hover {
74
- color: $white;
75
- background-color: transparent;
76
- }
82
+ line-height: $navbarHeight;
77
83
  }
78
84
  // Buttons in navbar
79
85
  .btn,
80
86
  .btn-group {
81
- margin-top: 5px; // make buttons vertically centered in navbar
87
+ @include navbar-vertical-align(30px); // Vertically center in navbar
82
88
  }
83
89
  .btn-group .btn {
84
90
  margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -90,15 +96,16 @@
90
96
  margin-bottom: 0; // remove default bottom margin
91
97
  @include clearfix();
92
98
  input,
99
+ select,
100
+ .radio,
101
+ .checkbox {
102
+ @include navbar-vertical-align(30px); // Vertically center in navbar
103
+ }
104
+ input,
93
105
  select {
94
106
  display: inline-block;
95
- margin-top: 5px;
96
107
  margin-bottom: 0;
97
108
  }
98
- .radio,
99
- .checkbox {
100
- margin-top: 5px;
101
- }
102
109
  input[type="image"],
103
110
  input[type="checkbox"],
104
111
  input[type="radio"] {
@@ -118,36 +125,33 @@
118
125
  .navbar-search {
119
126
  position: relative;
120
127
  float: left;
121
- margin-top: 6px;
128
+ @include navbar-vertical-align(28px); // Vertically center in navbar
122
129
  margin-bottom: 0;
123
130
  .search-query {
124
131
  padding: 4px 9px;
125
132
  @include font-sans-serif(13px, normal, 1);
126
133
  color: $white;
127
- color: rgba(255,255,255,.75);
128
- background: #666;
129
- background: rgba(255,255,255,.3);
130
- border: 1px solid #111;
134
+ background-color: $navbarSearchBackground;
135
+ border: 1px solid $navbarSearchBorder;
131
136
  $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
132
137
  @include box-shadow($shadow);
133
138
  @include transition(none);
134
139
 
135
- // Placeholder text gets special styles; can't be bundled together though for some reason
136
- @include placeholder($grayLighter);
137
-
138
- // Hover states
139
- &:hover {
140
- color: $white;
141
- background-color: $grayLight;
142
- background-color: rgba(255,255,255,.5);
140
+ // Placeholder text gets special styles; can't be a grouped selector
141
+ &:-moz-placeholder {
142
+ color: $navbarSearchPlaceholderColor;
143
+ }
144
+ &::-webkit-input-placeholder {
145
+ color: $navbarSearchPlaceholderColor;
143
146
  }
147
+
144
148
  // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
145
149
  &:focus,
146
150
  &.focused {
147
151
  padding: 5px 10px;
148
152
  color: $grayDark;
149
153
  text-shadow: 0 1px 0 $white;
150
- background-color: $white;
154
+ background-color: $navbarSearchBackgroundFocus;
151
155
  border: 0;
152
156
  @include box-shadow(0 0 3px rgba(0,0,0,.15));
153
157
  outline: 0;
@@ -156,22 +160,42 @@
156
160
  }
157
161
 
158
162
 
163
+
159
164
  // FIXED NAVBAR
160
165
  // ------------
161
166
 
162
- .navbar-fixed-top {
167
+ // Shared (top/bottom) styles
168
+ .navbar-fixed-top,
169
+ .navbar-fixed-bottom {
163
170
  position: fixed;
164
- top: 0;
165
171
  right: 0;
166
172
  left: 0;
167
173
  z-index: $zindexFixedNavbar;
174
+ margin-bottom: 0; // remove 18px margin for static navbar
168
175
  }
169
- .navbar-fixed-top .navbar-inner {
176
+ .navbar-fixed-top .navbar-inner,
177
+ .navbar-fixed-bottom .navbar-inner {
170
178
  padding-left: 0;
171
179
  padding-right: 0;
172
180
  @include border-radius(0);
173
181
  }
174
182
 
183
+ .navbar-fixed-top .container,
184
+ .navbar-fixed-bottom .container {
185
+ @include grid-core-span($gridColumns);
186
+ }
187
+
188
+ // Fixed to top
189
+ .navbar-fixed-top {
190
+ top: 0;
191
+ }
192
+
193
+ // Fixed to bottom
194
+ .navbar-fixed-bottom {
195
+ bottom: 0;
196
+ }
197
+
198
+
175
199
 
176
200
  // NAVIGATION
177
201
  // ----------
@@ -210,9 +234,9 @@
210
234
  // Active nav items
211
235
  .navbar .nav .active > a,
212
236
  .navbar .nav .active > a:hover {
213
- color: $navbarLinkColorHover;
237
+ color: $navbarLinkColorActive;
214
238
  text-decoration: none;
215
- background-color: $navbarBackground;
239
+ background-color: $navbarLinkBackgroundActive;
216
240
  }
217
241
 
218
242
  // Dividers (basically a vertical hr)
@@ -246,7 +270,7 @@
246
270
  border-left: 7px solid transparent;
247
271
  border-right: 7px solid transparent;
248
272
  border-bottom: 7px solid #ccc;
249
- border-bottom-color: rgba(0,0,0,.2);
273
+ border-bottom-color: $dropdownBorder;
250
274
  position: absolute;
251
275
  top: -7px;
252
276
  left: 9px;
@@ -256,17 +280,33 @@
256
280
  display: inline-block;
257
281
  border-left: 6px solid transparent;
258
282
  border-right: 6px solid transparent;
259
- border-bottom: 6px solid $white;
283
+ border-bottom: 6px solid $dropdownBackground;
260
284
  position: absolute;
261
285
  top: -6px;
262
286
  left: 10px;
263
287
  }
264
288
  }
265
-
289
+ // Menu position and menu caret support for dropups via extra dropup class
290
+ .navbar-fixed-bottom .dropdown-menu {
291
+ &:before {
292
+ border-top: 7px solid #ccc;
293
+ border-top-color: $dropdownBorder;
294
+ border-bottom: 0;
295
+ bottom: -7px;
296
+ top: auto;
297
+ }
298
+ &:after {
299
+ border-top: 6px solid $dropdownBackground;
300
+ border-bottom: 0;
301
+ bottom: -6px;
302
+ top: auto;
303
+ }
304
+ }
266
305
  // Dropdown toggle caret
267
306
  .navbar .nav .dropdown-toggle .caret,
268
307
  .navbar .nav .open.dropdown .caret {
269
308
  border-top-color: $white;
309
+ border-bottom-color: $white;
270
310
  }
271
311
  .navbar .nav .active .caret {
272
312
  @include opacity(100);
@@ -285,7 +325,9 @@
285
325
  }
286
326
 
287
327
  // Right aligned menus need alt position
288
- .navbar .nav.pull-right .dropdown-menu {
328
+ // TODO: rejigger this at some point to simplify the selectors
329
+ .navbar .nav.pull-right .dropdown-menu,
330
+ .navbar .nav .dropdown-menu.pull-right {
289
331
  left: auto;
290
332
  right: 0;
291
333
  &:before {