sass-twitter-bootstrap 2.0.1 → 2.1.1

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 (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
  }