sass-twitter-bootstrap 2.0.1 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  2. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
  8. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
  9. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
  11. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
  12. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
  13. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
  14. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
  15. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
  16. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  18. data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
  19. data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
  20. data/vendor/assets/stylesheets/tests/navbar.html +39 -38
  21. data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
  22. data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
  23. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
  24. data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
  25. data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
  26. data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
  27. data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
  28. data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
  29. data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
  30. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
  31. data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
  32. data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
  33. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
  34. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
  35. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
  36. data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
  37. data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
  38. data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
  39. data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
  40. data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
  41. data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
  42. data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
  43. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
  44. data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
  45. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
  46. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
  47. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
  48. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
  49. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
  50. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
  51. data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
  52. data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
  53. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
  54. data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
  55. data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
  56. data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
  57. data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
  58. data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
  59. data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
  60. data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
  61. metadata +10 -7
  62. data/vendor/assets/stylesheets/tests/buttons.html +0 -139
  63. data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
  64. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
  65. data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
  66. data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,8 +1,11 @@
1
- // MODALS
2
- // ------
1
+ //
2
+ // Modals
3
+ // --------------------------------------------------
3
4
 
4
- // Recalculate z-index where appropriate
5
- .modal-open {
5
+
6
+ // Recalculate z-index where appropriate,
7
+ // but only apply to elements within modal
8
+ .modal-open .modal {
6
9
  .dropdown-menu { z-index: $zindexDropdown + $zindexModal; }
7
10
  .dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
8
11
  .popover { z-index: $zindexPopover + $zindexModal; }
@@ -33,7 +36,6 @@
33
36
  top: 50%;
34
37
  left: 50%;
35
38
  z-index: $zindexModal;
36
- max-height: 500px;
37
39
  overflow: auto;
38
40
  width: 560px;
39
41
  margin: -250px 0 0 -280px;
@@ -45,8 +47,7 @@
45
47
  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
46
48
  @include background-clip(padding-box);
47
49
  &.fade {
48
- @include transition(opacity .3s linear);
49
- // @include transition(top .3s ease-out);
50
+ @include transition(#{opacity .3s linear, top .3s ease-out});
50
51
  top: -25%;
51
52
  }
52
53
  &.fade.in { top: 50%; }
@@ -56,14 +57,21 @@
56
57
  border-bottom: 1px solid #eee;
57
58
  // Close icon
58
59
  .close { margin-top: 2px; }
60
+ // Heading
61
+ h3 {
62
+ margin: 0;
63
+ line-height: 30px;
64
+ }
59
65
  }
60
66
 
61
- // Body (where all modal content resises)
67
+ // Body (where all modal content resides)
62
68
  .modal-body {
69
+ overflow-y: auto;
70
+ max-height: 400px;
63
71
  padding: 15px;
64
72
  }
65
73
  // Remove bottom margin if need be
66
- .modal-body .modal-form {
74
+ .modal-form {
67
75
  margin-bottom: 0;
68
76
  }
69
77
 
@@ -71,14 +79,20 @@
71
79
  .modal-footer {
72
80
  padding: 14px 15px 15px;
73
81
  margin-bottom: 0;
82
+ text-align: right; // right align buttons
74
83
  background-color: #f5f5f5;
75
84
  border-top: 1px solid #ddd;
76
85
  @include border-radius(0 0 6px 6px);
77
86
  @include box-shadow(inset 0 1px 0 $white);
78
- @include clearfix();
79
- .btn {
80
- float: right;
87
+ @include clearfix(); // clear it in case folks use .pull-* classes on buttons
88
+
89
+ // Properly space out buttons
90
+ .btn + .btn {
81
91
  margin-left: 5px;
82
92
  margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
83
93
  }
94
+ // but override that for button groups
95
+ .btn-group .btn + .btn {
96
+ margin-left: -1px;
97
+ }
84
98
  }
@@ -1,103 +1,119 @@
1
- // NAVBAR (FIXED AND STATIC)
2
- // -------------------------
1
+ //
2
+ // Navbars (Redux)
3
+ // --------------------------------------------------
3
4
 
4
5
 
5
6
  // COMMON STYLES
6
7
  // -------------
7
8
 
9
+ // Base class and wrapper
8
10
  .navbar {
9
11
  overflow: visible;
10
12
  margin-bottom: $baseLineHeight;
13
+ color: $navbarText;
14
+
15
+ // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
16
+ *position: relative;
17
+ *z-index: 2;
11
18
  }
12
19
 
13
- // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
20
+ // Inner for background effects
21
+ // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
14
22
  .navbar-inner {
23
+ min-height: $navbarHeight;
15
24
  padding-left: 20px;
16
25
  padding-right: 20px;
17
26
  @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
27
+ border: 1px solid $navbarBorder;
18
28
  @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);
21
- }
29
+ @include box-shadow(0 1px 4px rgba(0,0,0,.065));
22
30
 
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));
31
+ // Prevent floats from breaking the navbar
32
+ @include clearfix();
41
33
  }
42
- .btn-navbar .icon-bar + .icon-bar {
43
- margin-top: 3px;
34
+
35
+ // Set width to auto for default container
36
+ // We then reset it for fixed navbars in the #gridSystem mixin
37
+ .navbar .container {
38
+ width: auto;
44
39
  }
40
+
45
41
  // Override the default collapsed state
46
42
  .nav-collapse.collapse {
47
43
  height: auto;
48
44
  }
49
45
 
50
46
 
51
- // Brand, links, text, and buttons
52
- .navbar {
53
- // Hover and active states
54
- .brand:hover {
47
+ // Brand: website or project name
48
+ // -------------------------
49
+ .navbar .brand {
50
+ float: left;
51
+ display: block;
52
+ // Vertically center the text given $navbarHeight
53
+ padding: (($navbarHeight - $baseLineHeight) / 2) 20px (($navbarHeight - $baseLineHeight) / 2);
54
+ margin-left: -20px; // negative indent to left-align the text down the page
55
+ font-size: 20px;
56
+ font-weight: 200;
57
+ color: $navbarBrandColor;
58
+ text-shadow: 0 1px 0 $navbarBackgroundHighlight;
59
+ &:hover {
55
60
  text-decoration: none;
56
61
  }
57
- // Website or project name
58
- .brand {
59
- float: left;
60
- display: block;
61
- padding: 8px 20px 12px;
62
- margin-left: -20px; // negative indent to left-align the text down the page
63
- font-size: 20px;
64
- font-weight: 200;
65
- line-height: 1;
66
- color: $white;
67
- }
68
- // Plain text in topbar
69
- .navbar-text {
70
- margin-bottom: 0;
71
- line-height: 40px;
72
- color: $navbarText;
73
- a:hover {
74
- color: $white;
75
- background-color: transparent;
76
- }
77
- }
78
- // Buttons in navbar
79
- .btn,
80
- .btn-group {
81
- margin-top: 5px; // make buttons vertically centered in navbar
82
- }
83
- .btn-group .btn {
84
- margin-top: 0; // then undo the margin here so we don't accidentally double it
62
+ }
63
+
64
+ // Plain text in topbar
65
+ // -------------------------
66
+ .navbar-text {
67
+ margin-bottom: 0;
68
+ line-height: $navbarHeight;
69
+ }
70
+
71
+ // Janky solution for now to account for links outside the .nav
72
+ // -------------------------
73
+ .navbar-link {
74
+ color: $navbarLinkColor;
75
+ &:hover {
76
+ color: $navbarLinkColorHover;
85
77
  }
86
78
  }
87
79
 
80
+ // Dividers in navbar
81
+ // -------------------------
82
+ .navbar .divider-vertical {
83
+ height: $navbarHeight;
84
+ margin: 0 9px;
85
+ border-left: 1px solid $navbarBackground;
86
+ border-right: 1px solid $navbarBackgroundHighlight;
87
+ }
88
+
89
+ // Buttons in navbar
90
+ // -------------------------
91
+ .navbar .btn,
92
+ .navbar .btn-group {
93
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
94
+ }
95
+ .navbar .btn-group .btn,
96
+ .navbar .input-prepend .btn,
97
+ .navbar .input-append .btn {
98
+ margin-top: 0; // then undo the margin here so we don't accidentally double it
99
+ }
100
+
88
101
  // Navbar forms
102
+ // -------------------------
89
103
  .navbar-form {
90
104
  margin-bottom: 0; // remove default bottom margin
91
105
  @include clearfix();
92
106
  input,
93
- select {
94
- display: inline-block;
95
- margin-top: 5px;
96
- margin-bottom: 0;
97
- }
107
+ select,
98
108
  .radio,
99
109
  .checkbox {
100
- margin-top: 5px;
110
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
111
+ }
112
+ input,
113
+ select,
114
+ .btn {
115
+ display: inline-block;
116
+ margin-bottom: 0;
101
117
  }
102
118
  input[type="image"],
103
119
  input[type="checkbox"],
@@ -115,63 +131,90 @@
115
131
  }
116
132
 
117
133
  // Navbar search
134
+ // -------------------------
118
135
  .navbar-search {
119
136
  position: relative;
120
137
  float: left;
121
- margin-top: 6px;
138
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
122
139
  margin-bottom: 0;
123
140
  .search-query {
124
- padding: 4px 9px;
141
+ margin-bottom: 0;
142
+ padding: 4px 14px;
125
143
  @include font-sans-serif(13px, normal, 1);
126
- 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);
133
- @include transition(none);
134
-
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);
143
- }
144
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
145
- &:focus,
146
- &.focused {
147
- padding: 5px 10px;
148
- color: $grayDark;
149
- text-shadow: 0 1px 0 $white;
150
- background-color: $white;
151
- border: 0;
152
- @include box-shadow(0 0 3px rgba(0,0,0,.15));
153
- outline: 0;
154
- }
144
+ @include border-radius(15px); // redeclare because of specificity of the type attribute
155
145
  }
156
146
  }
157
147
 
158
148
 
159
- // FIXED NAVBAR
160
- // ------------
161
149
 
162
- .navbar-fixed-top {
150
+ // Static navbar
151
+ // -------------------------
152
+
153
+ .navbar-static-top {
154
+ position: static;
155
+ width: 100%;
156
+ margin-bottom: 0; // remove 18px margin for default navbar
157
+ .navbar-inner {
158
+ @include border-radius(0);
159
+ }
160
+ }
161
+
162
+
163
+
164
+ // Fixed navbar
165
+ // -------------------------
166
+
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 default navbar
168
175
  }
169
- .navbar-fixed-top .navbar-inner {
176
+ .navbar-fixed-top .navbar-inner,
177
+ .navbar-static-top .navbar-inner {
178
+ border-width: 0 0 1px;
179
+ }
180
+ .navbar-fixed-bottom .navbar-inner {
181
+ border-width: 1px 0 0;
182
+ }
183
+ .navbar-fixed-top .navbar-inner,
184
+ .navbar-fixed-bottom .navbar-inner {
170
185
  padding-left: 0;
171
186
  padding-right: 0;
172
187
  @include border-radius(0);
173
188
  }
174
189
 
190
+ // Reset container width
191
+ // Required here as we reset the width earlier on and the grid mixins don't override early enough
192
+ .navbar-static-top .container,
193
+ .navbar-fixed-top .container,
194
+ .navbar-fixed-bottom .container {
195
+ @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
196
+ }
197
+
198
+ // Fixed to top
199
+ .navbar-fixed-top {
200
+ top: 0;
201
+ }
202
+ .navbar-fixed-top,
203
+ .navbar-static-top {
204
+ .navbar-inner {
205
+ @include box-shadow(#{inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)});
206
+ }
207
+ }
208
+
209
+ // Fixed to bottom
210
+ .navbar-fixed-bottom {
211
+ bottom: 0;
212
+ .navbar-inner {
213
+ @include box-shadow(#{inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)});
214
+ }
215
+ }
216
+
217
+
175
218
 
176
219
  // NAVIGATION
177
220
  // ----------
@@ -185,22 +228,27 @@
185
228
  }
186
229
  .navbar .nav.pull-right {
187
230
  float: right; // redeclare due to specificity
231
+ margin-right: 0; // remove margin on float right nav
188
232
  }
189
233
  .navbar .nav > li {
190
- display: block;
191
234
  float: left;
192
235
  }
193
236
 
194
237
  // Links
195
238
  .navbar .nav > li > a {
196
239
  float: none;
197
- padding: 10px 10px 11px;
198
- line-height: 19px;
240
+ // Vertically center the text given $navbarHeight
241
+ padding: (($navbarHeight - $baseLineHeight) / 2) 15px (($navbarHeight - $baseLineHeight) / 2);
199
242
  color: $navbarLinkColor;
200
243
  text-decoration: none;
201
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
244
+ text-shadow: 0 1px 0 $navbarBackgroundHighlight;
245
+ }
246
+ .navbar .nav .dropdown-toggle .caret {
247
+ margin-top: 8px;
202
248
  }
249
+
203
250
  // Hover
251
+ .navbar .nav > li > a:focus,
204
252
  .navbar .nav > li > a:hover {
205
253
  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
206
254
  color: $navbarLinkColorHover;
@@ -208,27 +256,38 @@
208
256
  }
209
257
 
210
258
  // Active nav items
211
- .navbar .nav .active > a,
212
- .navbar .nav .active > a:hover {
213
- color: $navbarLinkColorHover;
259
+ .navbar .nav > .active > a,
260
+ .navbar .nav > .active > a:hover,
261
+ .navbar .nav > .active > a:focus {
262
+ color: $navbarLinkColorActive;
214
263
  text-decoration: none;
215
- background-color: $navbarBackground;
264
+ background-color: $navbarLinkBackgroundActive;
265
+ -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
266
+ -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
267
+ box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
216
268
  }
217
269
 
218
- // Dividers (basically a vertical hr)
219
- .navbar .divider-vertical {
220
- height: $navbarHeight;
221
- width: 1px;
222
- margin: 0 9px;
223
- overflow: hidden;
224
- background-color: $navbarBackground;
225
- border-right: 1px solid $navbarBackgroundHighlight;
270
+ // Navbar button for toggling navbar items in responsive layouts
271
+ // These definitions need to come after '.navbar .btn'
272
+ .navbar .btn-navbar {
273
+ display: none;
274
+ float: right;
275
+ padding: 7px 10px;
276
+ margin-left: 5px;
277
+ margin-right: 5px;
278
+ @include buttonBackground(darken($navbarBackgroundHighlight, 5%), darken($navbarBackground, 5.25%));
279
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
226
280
  }
227
-
228
- // Secondary (floated right) nav in topbar
229
- .navbar .nav.pull-right {
230
- margin-left: 10px;
231
- margin-right: 0;
281
+ .navbar .btn-navbar .icon-bar {
282
+ display: block;
283
+ width: 18px;
284
+ height: 2px;
285
+ background-color: #f5f5f5;
286
+ @include border-radius(1px);
287
+ @include box-shadow(0 1px 0 rgba(0,0,0,.25));
288
+ }
289
+ .btn-navbar .icon-bar + .icon-bar {
290
+ margin-top: 3px;
232
291
  }
233
292
 
234
293
 
@@ -237,16 +296,14 @@
237
296
  // --------------
238
297
 
239
298
  // Menu position and menu carets
240
- .navbar .dropdown-menu {
241
- margin-top: 1px;
242
- @include border-radius(4px);
299
+ .navbar .nav > li > .dropdown-menu {
243
300
  &:before {
244
301
  content: '';
245
302
  display: inline-block;
246
303
  border-left: 7px solid transparent;
247
304
  border-right: 7px solid transparent;
248
305
  border-bottom: 7px solid #ccc;
249
- border-bottom-color: rgba(0,0,0,.2);
306
+ border-bottom-color: $dropdownBorder;
250
307
  position: absolute;
251
308
  top: -7px;
252
309
  left: 9px;
@@ -256,36 +313,50 @@
256
313
  display: inline-block;
257
314
  border-left: 6px solid transparent;
258
315
  border-right: 6px solid transparent;
259
- border-bottom: 6px solid $white;
316
+ border-bottom: 6px solid $dropdownBackground;
260
317
  position: absolute;
261
318
  top: -6px;
262
319
  left: 10px;
263
320
  }
264
321
  }
265
-
266
- // Dropdown toggle caret
267
- .navbar .nav .dropdown-toggle .caret,
268
- .navbar .nav .open.dropdown .caret {
269
- border-top-color: $white;
270
- }
271
- .navbar .nav .active .caret {
272
- @include opacity(100);
322
+ // Menu position and menu caret support for dropups via extra dropup class
323
+ .navbar-fixed-bottom .dropdown-menu {
324
+ &:before {
325
+ border-top: 7px solid #ccc;
326
+ border-top-color: $dropdownBorder;
327
+ border-bottom: 0;
328
+ bottom: -7px;
329
+ top: auto;
330
+ }
331
+ &:after {
332
+ border-top: 6px solid $dropdownBackground;
333
+ border-bottom: 0;
334
+ bottom: -6px;
335
+ top: auto;
336
+ }
273
337
  }
274
338
 
275
339
  // 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 {
279
- background-color: transparent;
340
+ .navbar .nav li.dropdown.open > .dropdown-toggle,
341
+ .navbar .nav li.dropdown.active > .dropdown-toggle,
342
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle {
343
+ background-color: $navbarLinkBackgroundActive;
344
+ color: $navbarLinkColorActive;
280
345
  }
281
-
282
- // Dropdown link on hover
283
- .navbar .nav .active > .dropdown-toggle:hover {
284
- color: $white;
346
+ .navbar .nav li.dropdown > .dropdown-toggle .caret {
347
+ border-top-color: $navbarLinkColor;
348
+ border-bottom-color: $navbarLinkColor;
349
+ }
350
+ .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
351
+ .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
352
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
353
+ border-top-color: $navbarLinkColorActive;
354
+ border-bottom-color: $navbarLinkColorActive;
285
355
  }
286
356
 
287
357
  // Right aligned menus need alt position
288
- .navbar .nav.pull-right .dropdown-menu {
358
+ .navbar .pull-right > li > .dropdown-menu,
359
+ .navbar .nav > li > .dropdown-menu.pull-right {
289
360
  left: auto;
290
361
  right: 0;
291
362
  &:before {
@@ -296,4 +367,108 @@
296
367
  left: auto;
297
368
  right: 13px;
298
369
  }
370
+ .dropdown-menu {
371
+ left: auto;
372
+ right: 100%;
373
+ margin-left: 0;
374
+ margin-right: -1px;
375
+ @include border-radius(6px 0 6px 6px);
376
+ }
377
+ }
378
+
379
+
380
+ // Inverted navbar
381
+ // -------------------------
382
+
383
+ .navbar-inverse {
384
+ color: $navbarInverseText;
385
+
386
+ .navbar-inner {
387
+ @include gradient-vertical($navbarInverseBackgroundHighlight, $navbarInverseBackground);
388
+ border-color: $navbarInverseBorder;
389
+ }
390
+
391
+ .brand,
392
+ .nav > li > a {
393
+ color: $navbarInverseLinkColor;
394
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
395
+ &:hover {
396
+ color: $navbarInverseLinkColorHover;
397
+ }
398
+ }
399
+
400
+ .nav > li > a:focus,
401
+ .nav > li > a:hover {
402
+ background-color: $navbarInverseLinkBackgroundHover;
403
+ color: $navbarInverseLinkColorHover;
404
+ }
405
+
406
+ .nav .active > a,
407
+ .nav .active > a:hover,
408
+ .nav .active > a:focus {
409
+ color: $navbarInverseLinkColorActive;
410
+ background-color: $navbarInverseLinkBackgroundActive;
411
+ }
412
+
413
+ // Inline text links
414
+ .navbar-link {
415
+ color: $navbarInverseLinkColor;
416
+ &:hover {
417
+ color: $navbarInverseLinkColorHover;
418
+ }
419
+ }
420
+
421
+ // Dividers in navbar
422
+ .divider-vertical {
423
+ border-left-color: $navbarInverseBackground;
424
+ border-right-color: $navbarInverseBackgroundHighlight;
425
+ }
426
+
427
+ // Dropdowns
428
+ .nav li.dropdown.open > .dropdown-toggle,
429
+ .nav li.dropdown.active > .dropdown-toggle,
430
+ .nav li.dropdown.open.active > .dropdown-toggle {
431
+ background-color: $navbarInverseLinkBackgroundActive;
432
+ color: $navbarInverseLinkColorActive;
433
+ }
434
+ .nav li.dropdown > .dropdown-toggle .caret {
435
+ border-top-color: $navbarInverseLinkColor;
436
+ border-bottom-color: $navbarInverseLinkColor;
437
+ }
438
+ .nav li.dropdown.open > .dropdown-toggle .caret,
439
+ .nav li.dropdown.active > .dropdown-toggle .caret,
440
+ .nav li.dropdown.open.active > .dropdown-toggle .caret {
441
+ border-top-color: $navbarInverseLinkColorActive;
442
+ border-bottom-color: $navbarInverseLinkColorActive;
443
+ }
444
+
445
+ // Navbar search
446
+ .navbar-search {
447
+ .search-query {
448
+ color: $white;
449
+ background-color: $navbarInverseSearchBackground;
450
+ border-color: $navbarInverseSearchBorder;
451
+ @include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)});
452
+ @include transition(none);
453
+ @include placeholder($navbarInverseSearchPlaceholderColor);
454
+
455
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
456
+ &:focus,
457
+ &.focused {
458
+ padding: 5px 15px;
459
+ color: $grayDark;
460
+ text-shadow: 0 1px 0 $white;
461
+ background-color: $navbarInverseSearchBackgroundFocus;
462
+ border: 0;
463
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
464
+ outline: 0;
465
+ }
466
+ }
467
+ }
468
+
469
+ // Navbar collapse button
470
+ .btn-navbar {
471
+ @include buttonBackground(darken($navbarInverseBackgroundHighlight, 5%), darken($navbarInverseBackground, 5%));
472
+ }
473
+
299
474
  }