bootstrap-generators 2.0.1 → 2.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (127) hide show
  1. data/README.md +258 -33
  2. data/Rakefile +0 -59
  3. data/lib/bootstrap/generators/engine.rb +6 -1
  4. data/lib/bootstrap/generators/version.rb +1 -1
  5. data/lib/generators/bootstrap/install/install_generator.rb +10 -2
  6. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +120 -15
  7. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +206 -0
  8. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css +2 -0
  9. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.less +5 -4
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.scss +3 -2
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +2 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +5 -4
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +3 -2
  14. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +3 -0
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +2 -2
  17. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +1 -1
  18. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +1 -1
  19. data/test/fixtures/application.js +3 -0
  20. data/test/lib/generators/bootstrap/install_generator_test.rb +4 -3
  21. data/test/test_helper.rb +8 -1
  22. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  23. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  24. data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
  25. data/vendor/assets/javascripts/bootstrap-button.js +29 -33
  26. data/vendor/assets/javascripts/bootstrap-carousel.js +33 -21
  27. data/vendor/assets/javascripts/bootstrap-collapse.js +47 -26
  28. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  29. data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
  30. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  31. data/vendor/assets/javascripts/bootstrap-scrollspy.js +44 -18
  32. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  33. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  34. data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
  35. data/vendor/assets/javascripts/bootstrap-typeahead.js +29 -15
  36. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/accordion.less +5 -0
  37. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/alerts.less +2 -14
  38. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/bootstrap.less +2 -2
  39. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/breadcrumbs.less +2 -0
  40. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/button-groups.less +76 -33
  41. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/buttons.less +32 -24
  42. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/carousel.less +0 -0
  43. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/close.less +12 -1
  44. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/code.less +6 -6
  45. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/component-animations.less +7 -5
  46. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/dropdowns.less +58 -45
  47. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/forms.less +205 -144
  48. data/vendor/twitter/bootstrap/less/grid.less +5 -0
  49. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/hero-unit.less +3 -1
  50. data/vendor/twitter/bootstrap/less/labels-badges.less +55 -0
  51. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/layouts.less +1 -1
  52. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/mixins.less +235 -179
  53. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/modals.less +13 -6
  54. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navbar.less +131 -72
  55. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navs.less +53 -43
  56. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pager.less +6 -0
  57. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pagination.less +1 -0
  58. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/popovers.less +0 -0
  59. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/progress-bars.less +27 -5
  60. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/reset.less +8 -3
  61. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +26 -0
  62. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +149 -0
  63. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +17 -0
  64. data/vendor/twitter/bootstrap/less/responsive-navbar.less +153 -0
  65. data/vendor/twitter/bootstrap/less/responsive-utilities.less +41 -0
  66. data/vendor/twitter/bootstrap/less/responsive.less +48 -0
  67. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/scaffolding.less +4 -4
  68. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/sprites.less +42 -9
  69. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tables.less +46 -20
  70. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/thumbnails.less +14 -2
  71. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tooltip.less +0 -0
  72. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/type.less +27 -13
  73. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/utilities.less +0 -0
  74. data/vendor/twitter/bootstrap/less/variables.less +206 -0
  75. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/wells.less +10 -0
  76. data/vendor/{assets/stylesheets/scss/accordion.scss → twitter/bootstrap/sass/_accordion.scss} +5 -0
  77. data/vendor/{assets/stylesheets/scss/alerts.scss → twitter/bootstrap/sass/_alerts.scss} +3 -15
  78. data/vendor/{assets/stylesheets/scss/breadcrumbs.scss → twitter/bootstrap/sass/_breadcrumbs.scss} +2 -0
  79. data/vendor/{assets/stylesheets/scss/button-groups.scss → twitter/bootstrap/sass/_button-groups.scss} +76 -33
  80. data/vendor/{assets/stylesheets/scss/buttons.scss → twitter/bootstrap/sass/_buttons.scss} +33 -25
  81. data/vendor/{assets/stylesheets/scss/carousel.scss → twitter/bootstrap/sass/_carousel.scss} +1 -1
  82. data/vendor/{assets/stylesheets/scss/close.scss → twitter/bootstrap/sass/_close.scss} +12 -1
  83. data/vendor/{assets/stylesheets/scss/code.scss → twitter/bootstrap/sass/_code.scss} +7 -7
  84. data/vendor/{assets/stylesheets/scss/component-animations.scss → twitter/bootstrap/sass/_component-animations.scss} +9 -7
  85. data/vendor/{assets/stylesheets/scss/dropdowns.scss → twitter/bootstrap/sass/_dropdowns.scss} +58 -45
  86. data/vendor/{assets/stylesheets/scss/forms.scss → twitter/bootstrap/sass/_forms.scss} +205 -145
  87. data/vendor/twitter/bootstrap/sass/_grid.scss +5 -0
  88. data/vendor/{assets/stylesheets/scss/hero-unit.scss → twitter/bootstrap/sass/_hero-unit.scss} +3 -1
  89. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +52 -0
  90. data/vendor/{assets/stylesheets/scss/layouts.scss → twitter/bootstrap/sass/_layouts.scss} +2 -2
  91. data/vendor/{assets/stylesheets/scss/mixins.scss → twitter/bootstrap/sass/_mixins.scss} +246 -182
  92. data/vendor/{assets/stylesheets/scss/modals.scss → twitter/bootstrap/sass/_modals.scss} +14 -7
  93. data/vendor/{assets/stylesheets/scss/navbar.scss → twitter/bootstrap/sass/_navbar.scss} +132 -73
  94. data/vendor/{assets/stylesheets/scss/navs.scss → twitter/bootstrap/sass/_navs.scss} +53 -43
  95. data/vendor/{assets/stylesheets/scss/pager.scss → twitter/bootstrap/sass/_pager.scss} +6 -0
  96. data/vendor/{assets/stylesheets/scss/pagination.scss → twitter/bootstrap/sass/_pagination.scss} +1 -0
  97. data/vendor/{assets/stylesheets/scss/popovers.scss → twitter/bootstrap/sass/_popovers.scss} +0 -0
  98. data/vendor/{assets/stylesheets/scss/progress-bars.scss → twitter/bootstrap/sass/_progress-bars.scss} +27 -5
  99. data/vendor/{assets/stylesheets/scss/reset.scss → twitter/bootstrap/sass/_reset.scss} +8 -3
  100. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +26 -0
  101. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +149 -0
  102. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +17 -0
  103. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +153 -0
  104. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +41 -0
  105. data/vendor/{assets/stylesheets/scss/scaffolding.scss → twitter/bootstrap/sass/_scaffolding.scss} +4 -4
  106. data/vendor/{assets/stylesheets/scss/sprites.scss → twitter/bootstrap/sass/_sprites.scss} +40 -7
  107. data/vendor/{assets/stylesheets/scss/tables.scss → twitter/bootstrap/sass/_tables.scss} +37 -32
  108. data/vendor/{assets/stylesheets/scss/thumbnails.scss → twitter/bootstrap/sass/_thumbnails.scss} +14 -2
  109. data/vendor/{assets/stylesheets/scss/tooltip.scss → twitter/bootstrap/sass/_tooltip.scss} +1 -1
  110. data/vendor/{assets/stylesheets/scss/type.scss → twitter/bootstrap/sass/_type.scss} +27 -13
  111. data/vendor/{assets/stylesheets/scss/utilities.scss → twitter/bootstrap/sass/_utilities.scss} +0 -0
  112. data/vendor/twitter/bootstrap/sass/_variables.scss +204 -0
  113. data/vendor/{assets/stylesheets/scss/wells.scss → twitter/bootstrap/sass/_wells.scss} +10 -0
  114. data/vendor/{assets/stylesheets/scss → twitter/bootstrap/sass}/bootstrap.scss +3 -3
  115. data/vendor/twitter/bootstrap/sass/responsive.scss +48 -0
  116. metadata +93 -84
  117. data/lib/generators/bootstrap/install/templates/assets/javascripts/bootstrap-generators.js +0 -1
  118. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.less +0 -98
  119. data/vendor/assets/stylesheets/bootstrap.css +0 -3363
  120. data/vendor/assets/stylesheets/less/grid.less +0 -8
  121. data/vendor/assets/stylesheets/less/labels.less +0 -32
  122. data/vendor/assets/stylesheets/less/responsive.less +0 -327
  123. data/vendor/assets/stylesheets/less/variables.less +0 -107
  124. data/vendor/assets/stylesheets/scss/grid.scss +0 -8
  125. data/vendor/assets/stylesheets/scss/labels.scss +0 -32
  126. data/vendor/assets/stylesheets/scss/responsive.scss +0 -327
  127. data/vendor/assets/stylesheets/scss/variables.scss +0 -107
@@ -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;
@@ -45,7 +44,7 @@
45
44
  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
46
45
  @include background-clip(padding-box);
47
46
  &.fade {
48
- @include transition(#{'opacity .3s linear, top .3s ease-out'});
47
+ @include transition(#{opacity .3s linear, top .3s ease-out});
49
48
  top: -25%;
50
49
  }
51
50
  &.fade.in { top: 50%; }
@@ -57,12 +56,14 @@
57
56
  .close { margin-top: 2px; }
58
57
  }
59
58
 
60
- // Body (where all modal content resises)
59
+ // Body (where all modal content resides)
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,42 +6,30 @@
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
  }
12
16
 
13
17
  // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
14
18
  .navbar-inner {
19
+ min-height: $navbarHeight;
15
20
  padding-left: 20px;
16
21
  padding-right: 20px;
17
22
  @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
18
23
  @include border-radius(4px);
19
- $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
20
- @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)});
21
25
  }
22
26
 
23
- // Navbar button for toggling navbar items in responsive layouts
24
- .btn-navbar {
25
- display: none;
26
- float: right;
27
- padding: 7px 10px;
28
- margin-left: 5px;
29
- margin-right: 5px;
30
- @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
31
- $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
32
- @include box-shadow($shadow);
33
- }
34
- .btn-navbar .icon-bar {
35
- display: block;
36
- width: 18px;
37
- height: 2px;
38
- background-color: #f5f5f5;
39
- @include border-radius(1px);
40
- @include box-shadow(0 1px 0 rgba(0,0,0,.25));
41
- }
42
- .btn-navbar .icon-bar + .icon-bar {
43
- margin-top: 3px;
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;
44
31
  }
32
+
45
33
  // Override the default collapsed state
46
34
  .nav-collapse.collapse {
47
35
  height: auto;
@@ -50,6 +38,7 @@
50
38
 
51
39
  // Brand, links, text, and buttons
52
40
  .navbar {
41
+ color: $navbarText;
53
42
  // Hover and active states
54
43
  .brand:hover {
55
44
  text-decoration: none;
@@ -58,30 +47,34 @@
58
47
  .brand {
59
48
  float: left;
60
49
  display: block;
61
- 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);
62
53
  margin-left: -20px; // negative indent to left-align the text down the page
63
54
  font-size: 20px;
64
55
  font-weight: 200;
65
56
  line-height: 1;
66
- color: $white;
57
+ color: $navbarBrandColor;
67
58
  }
68
59
  // Plain text in topbar
69
60
  .navbar-text {
70
61
  margin-bottom: 0;
71
- line-height: 40px;
72
- color: $navbarText;
73
- a:hover {
74
- color: $white;
75
- background-color: transparent;
62
+ line-height: $navbarHeight;
63
+ }
64
+ // Janky solution for now to account for links outside the .nav
65
+ .navbar-link {
66
+ color: $navbarLinkColor;
67
+ &:hover {
68
+ color: $navbarLinkColorHover;
76
69
  }
77
70
  }
78
71
  // Buttons in navbar
79
72
  .btn,
80
73
  .btn-group {
81
- margin-top: 5px; // make buttons vertically centered in navbar
74
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
82
75
  }
83
76
  .btn-group .btn {
84
- margin-top: 0; // then undo the margin here so we don't accidentally double it
77
+ margin: 0; // then undo the margin here so we don't accidentally double it
85
78
  }
86
79
  }
87
80
 
@@ -90,15 +83,16 @@
90
83
  margin-bottom: 0; // remove default bottom margin
91
84
  @include clearfix();
92
85
  input,
86
+ select,
87
+ .radio,
88
+ .checkbox {
89
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
90
+ }
91
+ input,
93
92
  select {
94
93
  display: inline-block;
95
- margin-top: 5px;
96
94
  margin-bottom: 0;
97
95
  }
98
- .radio,
99
- .checkbox {
100
- margin-top: 5px;
101
- }
102
96
  input[type="image"],
103
97
  input[type="checkbox"],
104
98
  input[type="radio"] {
@@ -118,36 +112,26 @@
118
112
  .navbar-search {
119
113
  position: relative;
120
114
  float: left;
121
- margin-top: 6px;
115
+ @include navbarVerticalAlign(28px); // Vertically center in navbar
122
116
  margin-bottom: 0;
123
117
  .search-query {
124
118
  padding: 4px 9px;
125
119
  @include font-sans-serif(13px, normal, 1);
126
120
  color: $white;
127
- color: rgba(255,255,255,.75);
128
- background: #666;
129
- background: rgba(255,255,255,.3);
130
- border: 1px solid #111;
131
- $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
132
- @include box-shadow($shadow);
121
+ background-color: $navbarSearchBackground;
122
+ border: 1px solid $navbarSearchBorder;
123
+ @include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)});
133
124
  @include transition(none);
134
125
 
135
- // Placeholder text gets special styles; can't be bundled together though for some reason
136
- @include placeholder($grayLighter);
126
+ @include placeholder($navbarSearchPlaceholderColor);
137
127
 
138
- // Hover states
139
- &:hover {
140
- color: $white;
141
- background-color: $grayLight;
142
- background-color: rgba(255,255,255,.5);
143
- }
144
128
  // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
145
129
  &:focus,
146
130
  &.focused {
147
131
  padding: 5px 10px;
148
132
  color: $grayDark;
149
133
  text-shadow: 0 1px 0 $white;
150
- background-color: $white;
134
+ background-color: $navbarSearchBackgroundFocus;
151
135
  border: 0;
152
136
  @include box-shadow(0 0 3px rgba(0,0,0,.15));
153
137
  outline: 0;
@@ -156,22 +140,42 @@
156
140
  }
157
141
 
158
142
 
143
+
159
144
  // FIXED NAVBAR
160
145
  // ------------
161
146
 
162
- .navbar-fixed-top {
147
+ // Shared (top/bottom) styles
148
+ .navbar-fixed-top,
149
+ .navbar-fixed-bottom {
163
150
  position: fixed;
164
- top: 0;
165
151
  right: 0;
166
152
  left: 0;
167
153
  z-index: $zindexFixedNavbar;
154
+ margin-bottom: 0; // remove 18px margin for static navbar
168
155
  }
169
- .navbar-fixed-top .navbar-inner {
156
+ .navbar-fixed-top .navbar-inner,
157
+ .navbar-fixed-bottom .navbar-inner {
170
158
  padding-left: 0;
171
159
  padding-right: 0;
172
160
  @include border-radius(0);
173
161
  }
174
162
 
163
+ .navbar-fixed-top .container,
164
+ .navbar-fixed-bottom .container {
165
+ @include core-span($gridColumns);
166
+ }
167
+
168
+ // Fixed to top
169
+ .navbar-fixed-top {
170
+ top: 0;
171
+ }
172
+
173
+ // Fixed to bottom
174
+ .navbar-fixed-bottom {
175
+ bottom: 0;
176
+ }
177
+
178
+
175
179
 
176
180
  // NAVIGATION
177
181
  // ----------
@@ -194,12 +198,29 @@
194
198
  // Links
195
199
  .navbar .nav > li > a {
196
200
  float: none;
197
- padding: 10px 10px 11px;
201
+ // Vertically center the text given $navbarHeight
202
+ $elementHeight: 20px;
203
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
198
204
  line-height: 19px;
199
205
  color: $navbarLinkColor;
200
206
  text-decoration: none;
201
207
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
202
208
  }
209
+ // Buttons
210
+ .navbar .btn {
211
+ display: inline-block;
212
+ padding: 4px 10px 4px;
213
+ // Vertically center the button given @navbarHeight
214
+ $elementHeight: 28px;
215
+ margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
216
+ line-height: $baseLineHeight;
217
+ }
218
+ .navbar .btn-group {
219
+ margin: 0;
220
+ // Vertically center the button given @navbarHeight
221
+ $elementHeight: 28px;
222
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
223
+ }
203
224
  // Hover
204
225
  .navbar .nav > li > a:hover {
205
226
  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -210,9 +231,9 @@
210
231
  // Active nav items
211
232
  .navbar .nav .active > a,
212
233
  .navbar .nav .active > a:hover {
213
- color: $navbarLinkColorHover;
234
+ color: $navbarLinkColorActive;
214
235
  text-decoration: none;
215
- background-color: $navbarBackground;
236
+ background-color: $navbarLinkBackgroundActive;
216
237
  }
217
238
 
218
239
  // Dividers (basically a vertical hr)
@@ -231,6 +252,28 @@
231
252
  margin-right: 0;
232
253
  }
233
254
 
255
+ // Navbar button for toggling navbar items in responsive layouts
256
+ // These definitions need to come after '.navbar .btn'
257
+ .navbar .btn-navbar {
258
+ display: none;
259
+ float: right;
260
+ padding: 7px 10px;
261
+ margin-left: 5px;
262
+ margin-right: 5px;
263
+ @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
264
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
265
+ }
266
+ .navbar .btn-navbar .icon-bar {
267
+ display: block;
268
+ width: 18px;
269
+ height: 2px;
270
+ background-color: #f5f5f5;
271
+ @include border-radius(1px);
272
+ @include box-shadow(0 1px 0 rgba(0,0,0,.25));
273
+ }
274
+ .btn-navbar .icon-bar + .icon-bar {
275
+ margin-top: 3px;
276
+ }
234
277
 
235
278
 
236
279
  // Dropdown menus
@@ -238,15 +281,13 @@
238
281
 
239
282
  // Menu position and menu carets
240
283
  .navbar .dropdown-menu {
241
- margin-top: 1px;
242
- @include border-radius(4px);
243
284
  &:before {
244
285
  content: '';
245
286
  display: inline-block;
246
287
  border-left: 7px solid transparent;
247
288
  border-right: 7px solid transparent;
248
289
  border-bottom: 7px solid #ccc;
249
- border-bottom-color: rgba(0,0,0,.2);
290
+ border-bottom-color: $dropdownBorder;
250
291
  position: absolute;
251
292
  top: -7px;
252
293
  left: 9px;
@@ -256,36 +297,54 @@
256
297
  display: inline-block;
257
298
  border-left: 6px solid transparent;
258
299
  border-right: 6px solid transparent;
259
- border-bottom: 6px solid $white;
300
+ border-bottom: 6px solid $dropdownBackground;
260
301
  position: absolute;
261
302
  top: -6px;
262
303
  left: 10px;
263
304
  }
264
305
  }
265
-
306
+ // Menu position and menu caret support for dropups via extra dropup class
307
+ .navbar-fixed-bottom .dropdown-menu {
308
+ &:before {
309
+ border-top: 7px solid #ccc;
310
+ border-top-color: $dropdownBorder;
311
+ border-bottom: 0;
312
+ bottom: -7px;
313
+ top: auto;
314
+ }
315
+ &:after {
316
+ border-top: 6px solid $dropdownBackground;
317
+ border-bottom: 0;
318
+ bottom: -6px;
319
+ top: auto;
320
+ }
321
+ }
266
322
  // Dropdown toggle caret
267
- .navbar .nav .dropdown-toggle .caret,
268
- .navbar .nav .open.dropdown .caret {
323
+ .navbar .nav li.dropdown .dropdown-toggle .caret,
324
+ .navbar .nav li.dropdown.open .caret {
269
325
  border-top-color: $white;
326
+ border-bottom-color: $white;
270
327
  }
271
- .navbar .nav .active .caret {
328
+ .navbar .nav li.dropdown.active .caret {
272
329
  @include opacity(100);
273
330
  }
274
331
 
275
332
  // Remove background color from open dropdown
276
- .navbar .nav .open > .dropdown-toggle,
277
- .navbar .nav .active > .dropdown-toggle,
278
- .navbar .nav .open.active > .dropdown-toggle {
333
+ .navbar .nav li.dropdown.open > .dropdown-toggle,
334
+ .navbar .nav li.dropdown.active > .dropdown-toggle,
335
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle {
279
336
  background-color: transparent;
280
337
  }
281
338
 
282
339
  // Dropdown link on hover
283
- .navbar .nav .active > .dropdown-toggle:hover {
340
+ .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
284
341
  color: $white;
285
342
  }
286
343
 
287
344
  // Right aligned menus need alt position
288
- .navbar .nav.pull-right .dropdown-menu {
345
+ // TODO: rejigger this at some point to simplify the selectors
346
+ .navbar .pull-right .dropdown-menu,
347
+ .navbar .dropdown-menu.pull-right {
289
348
  left: auto;
290
349
  right: 0;
291
350
  &:before {
@@ -296,4 +355,4 @@
296
355
  left: auto;
297
356
  right: 13px;
298
357
  }
299
- }
358
+ }
@@ -21,6 +21,11 @@
21
21
  background-color: $grayLighter;
22
22
  }
23
23
 
24
+ // Redeclare pull classes because of specifity
25
+ .nav > .pull-right {
26
+ float: right;
27
+ }
28
+
24
29
  // Nav headers (for dropdowns and lists)
25
30
  .nav .nav-header {
26
31
  display: block;
@@ -42,8 +47,8 @@
42
47
  // --------
43
48
 
44
49
  .nav-list {
45
- padding-left: 14px;
46
- padding-right: 14px;
50
+ padding-left: 15px;
51
+ padding-right: 15px;
47
52
  margin-bottom: 0;
48
53
  }
49
54
  .nav-list > li > a,
@@ -55,8 +60,8 @@
55
60
  .nav-list > li > a {
56
61
  padding: 3px 15px;
57
62
  }
58
- .nav-list .active > a,
59
- .nav-list .active > a:hover {
63
+ .nav-list > .active > a,
64
+ .nav-list > .active > a:hover {
60
65
  color: $white;
61
66
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
62
67
  background-color: $linkColor;
@@ -64,6 +69,10 @@
64
69
  .nav-list [class^="icon-"] {
65
70
  margin-right: 2px;
66
71
  }
72
+ // Dividers (basically an hr) within the dropdown
73
+ .nav-list .divider {
74
+ @include nav-divider();
75
+ }
67
76
 
68
77
 
69
78
 
@@ -94,16 +103,15 @@
94
103
  .nav-tabs {
95
104
  border-bottom: 1px solid #ddd;
96
105
  }
97
-
98
106
  // Make the list-items overlay the bottom border
99
107
  .nav-tabs > li {
100
108
  margin-bottom: -1px;
101
109
  }
102
-
103
110
  // Actual tabs (as links)
104
111
  .nav-tabs > li > a {
105
- padding-top: 9px;
106
- padding-bottom: 9px;
112
+ padding-top: 8px;
113
+ padding-bottom: 8px;
114
+ line-height: $baseLineHeight;
107
115
  border: 1px solid transparent;
108
116
  @include border-radius(4px 4px 0 0);
109
117
  &:hover {
@@ -120,6 +128,7 @@
120
128
  cursor: default;
121
129
  }
122
130
 
131
+
123
132
  // PILLS
124
133
  // -----
125
134
 
@@ -133,8 +142,8 @@
133
142
  }
134
143
 
135
144
  // Active state
136
- .nav-pills .active > a,
137
- .nav-pills .active > a:hover {
145
+ .nav-pills > .active > a,
146
+ .nav-pills > .active > a:hover {
138
147
  color: $white;
139
148
  background-color: $linkColor;
140
149
  }
@@ -184,14 +193,11 @@
184
193
  // DROPDOWNS
185
194
  // ---------
186
195
 
187
- // Position the menu
188
- .nav-tabs .dropdown-menu,
189
- .nav-pills .dropdown-menu {
190
- margin-top: 1px;
191
- border-width: 1px;
196
+ .nav-tabs .dropdown-menu {
197
+ @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
192
198
  }
193
199
  .nav-pills .dropdown-menu {
194
- @include border-radius(4px);
200
+ @include border-radius(4px); // make rounded corners match the pills
195
201
  }
196
202
 
197
203
  // Default dropdown links
@@ -200,11 +206,13 @@
200
206
  .nav-tabs .dropdown-toggle .caret,
201
207
  .nav-pills .dropdown-toggle .caret {
202
208
  border-top-color: $linkColor;
209
+ border-bottom-color: $linkColor;
203
210
  margin-top: 6px;
204
211
  }
205
212
  .nav-tabs .dropdown-toggle:hover .caret,
206
213
  .nav-pills .dropdown-toggle:hover .caret {
207
214
  border-top-color: $linkColorHover;
215
+ border-bottom-color: $linkColorHover;
208
216
  }
209
217
 
210
218
  // Active dropdown links
@@ -212,6 +220,7 @@
212
220
  .nav-tabs .active .dropdown-toggle .caret,
213
221
  .nav-pills .active .dropdown-toggle .caret {
214
222
  border-top-color: $grayDark;
223
+ border-bottom-color: $grayDark;
215
224
  }
216
225
 
217
226
  // Active:hover dropdown links
@@ -225,15 +234,16 @@
225
234
  // -------------------------
226
235
  .nav-tabs .open .dropdown-toggle,
227
236
  .nav-pills .open .dropdown-toggle,
228
- .nav > .open.active > a:hover {
237
+ .nav > li.dropdown.open.active > a:hover {
229
238
  color: $white;
230
239
  background-color: $grayLight;
231
240
  border-color: $grayLight;
232
241
  }
233
- .nav .open .caret,
234
- .nav .open.active .caret,
235
- .nav .open a:hover .caret {
242
+ .nav li.dropdown.open .caret,
243
+ .nav li.dropdown.open.active .caret,
244
+ .nav li.dropdown.open a:hover .caret {
236
245
  border-top-color: $white;
246
+ border-bottom-color: $white;
237
247
  @include opacity(100);
238
248
  }
239
249
 
@@ -256,13 +266,13 @@
256
266
  @include clearfix();
257
267
  }
258
268
  .tab-content {
259
- overflow: hidden; // prevent content from running below tabs
269
+ overflow: auto; // prevent content from running below tabs
260
270
  }
261
271
 
262
272
  // Remove border on bottom, left, right
263
- .tabs-below .nav-tabs,
264
- .tabs-right .nav-tabs,
265
- .tabs-left .nav-tabs {
273
+ .tabs-below > .nav-tabs,
274
+ .tabs-right > .nav-tabs,
275
+ .tabs-left > .nav-tabs {
266
276
  border-bottom: 0;
267
277
  }
268
278
 
@@ -280,22 +290,22 @@
280
290
  // BOTTOM
281
291
  // ------
282
292
 
283
- .tabs-below .nav-tabs {
293
+ .tabs-below > .nav-tabs {
284
294
  border-top: 1px solid #ddd;
285
295
  }
286
- .tabs-below .nav-tabs > li {
296
+ .tabs-below > .nav-tabs > li {
287
297
  margin-top: -1px;
288
298
  margin-bottom: 0;
289
299
  }
290
- .tabs-below .nav-tabs > li > a {
300
+ .tabs-below > .nav-tabs > li > a {
291
301
  @include border-radius(0 0 4px 4px);
292
302
  &:hover {
293
303
  border-bottom-color: transparent;
294
304
  border-top-color: #ddd;
295
305
  }
296
306
  }
297
- .tabs-below .nav-tabs .active > a,
298
- .tabs-below .nav-tabs .active > a:hover {
307
+ .tabs-below > .nav-tabs > .active > a,
308
+ .tabs-below > .nav-tabs > .active > a:hover {
299
309
  border-color: transparent #ddd #ddd #ddd;
300
310
  }
301
311
 
@@ -303,51 +313,51 @@
303
313
  // ------------
304
314
 
305
315
  // Common styles
306
- .tabs-left .nav-tabs > li,
307
- .tabs-right .nav-tabs > li {
316
+ .tabs-left > .nav-tabs > li,
317
+ .tabs-right > .nav-tabs > li {
308
318
  float: none;
309
319
  }
310
- .tabs-left .nav-tabs > li > a,
311
- .tabs-right .nav-tabs > li > a {
320
+ .tabs-left > .nav-tabs > li > a,
321
+ .tabs-right > .nav-tabs > li > a {
312
322
  min-width: 74px;
313
323
  margin-right: 0;
314
324
  margin-bottom: 3px;
315
325
  }
316
326
 
317
327
  // Tabs on the left
318
- .tabs-left .nav-tabs {
328
+ .tabs-left > .nav-tabs {
319
329
  float: left;
320
330
  margin-right: 19px;
321
331
  border-right: 1px solid #ddd;
322
332
  }
323
- .tabs-left .nav-tabs > li > a {
333
+ .tabs-left > .nav-tabs > li > a {
324
334
  margin-right: -1px;
325
335
  @include border-radius(4px 0 0 4px);
326
336
  }
327
- .tabs-left .nav-tabs > li > a:hover {
337
+ .tabs-left > .nav-tabs > li > a:hover {
328
338
  border-color: $grayLighter #ddd $grayLighter $grayLighter;
329
339
  }
330
- .tabs-left .nav-tabs .active > a,
331
- .tabs-left .nav-tabs .active > a:hover {
340
+ .tabs-left > .nav-tabs .active > a,
341
+ .tabs-left > .nav-tabs .active > a:hover {
332
342
  border-color: #ddd transparent #ddd #ddd;
333
343
  *border-right-color: $white;
334
344
  }
335
345
 
336
346
  // Tabs on the right
337
- .tabs-right .nav-tabs {
347
+ .tabs-right > .nav-tabs {
338
348
  float: right;
339
349
  margin-left: 19px;
340
350
  border-left: 1px solid #ddd;
341
351
  }
342
- .tabs-right .nav-tabs > li > a {
352
+ .tabs-right > .nav-tabs > li > a {
343
353
  margin-left: -1px;
344
354
  @include border-radius(0 4px 4px 0);
345
355
  }
346
- .tabs-right .nav-tabs > li > a:hover {
356
+ .tabs-right > .nav-tabs > li > a:hover {
347
357
  border-color: $grayLighter $grayLighter $grayLighter #ddd;
348
358
  }
349
- .tabs-right .nav-tabs .active > a,
350
- .tabs-right .nav-tabs .active > a:hover {
359
+ .tabs-right > .nav-tabs .active > a,
360
+ .tabs-right > .nav-tabs .active > a:hover {
351
361
  border-color: #ddd #ddd #ddd transparent;
352
362
  *border-left-color: $white;
353
363
  }