less-rails-bootstrap 2.3.3 → 3.0.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. data/.gitignore +1 -0
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +7 -11
  4. data/lib/less/rails/bootstrap/version.rb +1 -1
  5. data/scripts/update_bootstrap.sh +37 -8
  6. data/test/cases/usage_css_spec.rb +15 -12
  7. data/test/cases/usage_js_spec.rb +4 -4
  8. data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
  9. data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
  10. data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
  11. data/test/spec_helper.rb +1 -2
  12. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
  13. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
  14. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
  15. data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
  16. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
  17. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
  18. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
  19. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
  20. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
  21. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
  22. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
  23. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
  24. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
  25. data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
  26. data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
  27. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
  28. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
  29. data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
  30. data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
  31. data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
  32. data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
  33. data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
  34. data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
  35. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
  36. data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
  37. data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
  38. data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
  39. data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
  40. data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
  41. data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
  42. data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
  43. data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
  44. data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
  45. data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
  46. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
  47. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
  48. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
  49. data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
  50. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
  51. data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
  52. data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
  53. data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
  54. data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
  55. data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
  56. metadata +41 -44
  57. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  58. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  59. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
  60. data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
  61. data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
  62. data/vendor/frameworks/twitter/bootstrap.less +0 -1
  63. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
  64. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
  65. data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
  66. data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
  67. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
  68. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
  69. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
  70. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
  71. data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
  72. data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -2,81 +2,105 @@
2
2
  // Modals
3
3
  // --------------------------------------------------
4
4
 
5
- // Background
6
- .modal-backdrop {
5
+ // .modal-open - body class for killing the scroll
6
+ // .modal - container to scroll within
7
+ // .modal-dialog - positioning shell for the actual modal
8
+ // .modal-content - actual modal w/ bg and corners and shit
9
+
10
+ // Kill the scroll on the body
11
+ .modal-open {
12
+ overflow: hidden;
13
+ }
14
+
15
+ // Container that the modal scrolls within
16
+ .modal {
17
+ display: none;
18
+ overflow: auto;
19
+ overflow-y: scroll;
7
20
  position: fixed;
8
21
  top: 0;
9
22
  right: 0;
10
23
  bottom: 0;
11
24
  left: 0;
12
- z-index: @zindexModalBackdrop;
13
- background-color: @black;
14
- // Fade for backdrop
15
- &.fade { opacity: 0; }
25
+ z-index: @zindex-modal-background;
26
+
27
+ // When fading in the modal, animate it to slide down
28
+ &.fade .modal-dialog {
29
+ .translate(0, -25%);
30
+ .transition-transform(~"0.3s ease-out");
31
+ }
32
+ &.fade.in .modal-dialog { .translate(0, 0)}
16
33
  }
17
34
 
18
- .modal-backdrop,
19
- .modal-backdrop.fade.in {
20
- .opacity(80);
35
+ // Shell div to position the modal with bottom padding
36
+ .modal-dialog {
37
+ position: relative;
38
+ top: 0;
39
+ left: 0;
40
+ right: 0;
41
+ width: auto;
42
+ padding: 10px;
43
+ z-index: (@zindex-modal-background + 10);
21
44
  }
22
45
 
23
- // Base modal
24
- .modal {
25
- position: fixed;
26
- top: 10%;
27
- left: 50%;
28
- z-index: @zindexModal;
29
- width: 560px;
30
- margin-left: -280px;
31
- background-color: @white;
32
- border: 1px solid #999;
33
- border: 1px solid rgba(0,0,0,.3);
34
- *border: 1px solid #999; /* IE6-7 */
35
- .border-radius(6px);
36
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
46
+ // Actual modal
47
+ .modal-content {
48
+ position: relative;
49
+ background-color: @modal-content-bg;
50
+ border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
51
+ border: 1px solid @modal-content-border-color;
52
+ border-radius: @border-radius-large;
53
+ .box-shadow(0 3px 9px rgba(0,0,0,.5));
37
54
  .background-clip(padding-box);
38
55
  // Remove focus outline from opened modal
39
56
  outline: none;
57
+ }
40
58
 
41
- &.fade {
42
- .transition(e('opacity .3s linear, top .3s ease-out'));
43
- top: -25%;
44
- }
45
- &.fade.in { top: 10%; }
59
+ // Modal background
60
+ .modal-backdrop {
61
+ position: fixed;
62
+ top: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ left: 0;
66
+ z-index: (@zindex-modal-background - 10);
67
+ background-color: @modal-backdrop-bg;
68
+ // Fade for backdrop
69
+ &.fade { .opacity(0); }
70
+ &.fade.in { .opacity(.5); }
46
71
  }
72
+
73
+ // Modal header
74
+ // Top section of the modal w/ title and dismiss
47
75
  .modal-header {
48
- padding: 9px 15px;
49
- border-bottom: 1px solid #eee;
50
- // Close icon
51
- .close { margin-top: 2px; }
52
- // Heading
53
- h3 {
54
- margin: 0;
55
- line-height: 30px;
56
- }
76
+ padding: @modal-title-padding;
77
+ border-bottom: 1px solid @modal-header-border-color;
78
+ min-height: (@modal-title-padding + @modal-title-line-height);
79
+ }
80
+ // Close icon
81
+ .modal-header .close {
82
+ margin-top: -2px;
57
83
  }
58
84
 
59
- // Body (where all modal content resides)
85
+ // Title text within header
86
+ .modal-title {
87
+ margin: 0;
88
+ line-height: @modal-title-line-height;
89
+ }
90
+
91
+ // Modal body
92
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
60
93
  .modal-body {
61
94
  position: relative;
62
- overflow-y: auto;
63
- max-height: 400px;
64
- padding: 15px;
65
- }
66
- // Remove bottom margin if need be
67
- .modal-form {
68
- margin-bottom: 0;
95
+ padding: @modal-inner-padding;
69
96
  }
70
97
 
71
98
  // Footer (for actions)
72
99
  .modal-footer {
73
- padding: 14px 15px 15px;
74
- margin-bottom: 0;
100
+ margin-top: 15px;
101
+ padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
75
102
  text-align: right; // right align buttons
76
- background-color: #f5f5f5;
77
- border-top: 1px solid #ddd;
78
- .border-radius(0 0 6px 6px);
79
- .box-shadow(inset 0 1px 0 @white);
103
+ border-top: 1px solid @modal-footer-border-color;
80
104
  .clearfix(); // clear it in case folks use .pull-* classes on buttons
81
105
 
82
106
  // Properly space out buttons
@@ -93,3 +117,20 @@
93
117
  margin-left: 0;
94
118
  }
95
119
  }
120
+
121
+ // Scale up the modal
122
+ @media screen and (min-width: @screen-tablet) {
123
+
124
+ .modal-dialog {
125
+ left: 50%;
126
+ right: auto;
127
+ width: 560px;
128
+ margin-left: -280px;
129
+ padding-top: 30px;
130
+ padding-bottom: 30px;
131
+ }
132
+ .modal-content {
133
+ .box-shadow(0 5px 15px rgba(0,0,0,.5));
134
+ }
135
+
136
+ }
@@ -1,497 +1,380 @@
1
1
  //
2
- // Navbars (Redux)
2
+ // Navbars
3
3
  // --------------------------------------------------
4
4
 
5
-
6
- // COMMON STYLES
7
- // -------------
8
-
9
- // Base class and wrapper
5
+ // Wrapper and base class
10
6
  .navbar {
11
- overflow: visible;
12
- margin-bottom: @baseLineHeight;
13
-
14
- // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15
- *position: relative;
16
- *z-index: 2;
17
- }
18
-
19
- // Inner for background effects
20
- // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21
- .navbar-inner {
22
- min-height: @navbarHeight;
23
- padding-left: 20px;
24
- padding-right: 20px;
25
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26
- border: 1px solid @navbarBorder;
27
- .border-radius(@baseBorderRadius);
28
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
7
+ position: relative;
8
+ min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
9
+ margin-bottom: 20px;
10
+ padding-left: @navbar-padding-horizontal;
11
+ padding-right: @navbar-padding-horizontal;
12
+ background-color: @navbar-bg;
13
+ border-radius: @border-radius-base;
29
14
 
30
15
  // Prevent floats from breaking the navbar
31
16
  .clearfix();
32
17
  }
33
18
 
34
- // Set width to auto for default container
35
- // We then reset it for fixed navbars in the #gridSystem mixin
36
- .navbar .container {
37
- width: auto;
38
- }
39
-
40
- // Override the default collapsed state
41
- .nav-collapse.collapse {
42
- height: auto;
43
- overflow: visible;
44
- }
45
-
46
-
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,
60
- &:focus {
61
- text-decoration: none;
62
- }
63
- }
64
-
65
- // Plain text in topbar
66
- // -------------------------
67
- .navbar-text {
68
- margin-bottom: 0;
69
- line-height: @navbarHeight;
70
- color: @navbarText;
71
- }
72
-
73
- // Janky solution for now to account for links outside the .nav
19
+ // Navbar nav links
74
20
  // -------------------------
75
- .navbar-link {
76
- color: @navbarLinkColor;
77
- &:hover,
78
- &:focus {
79
- color: @navbarLinkColorHover;
80
- }
81
- }
82
-
83
- // Dividers in navbar
84
- // -------------------------
85
- .navbar .divider-vertical {
86
- height: @navbarHeight;
87
- margin: 0 9px;
88
- border-left: 1px solid @navbarBackground;
89
- border-right: 1px solid @navbarBackgroundHighlight;
90
- }
91
-
92
- // Buttons in navbar
93
- // -------------------------
94
- .navbar .btn,
95
- .navbar .btn-group {
96
- .navbarVerticalAlign(30px); // Vertically center in navbar
97
- }
98
- .navbar .btn-group .btn,
99
- .navbar .input-prepend .btn,
100
- .navbar .input-append .btn,
101
- .navbar .input-prepend .btn-group,
102
- .navbar .input-append .btn-group {
103
- margin-top: 0; // then undo the margin here so we don't accidentally double it
104
- }
105
21
 
106
- // Navbar forms
107
- // -------------------------
108
- .navbar-form {
109
- margin-bottom: 0; // remove default bottom margin
110
- .clearfix();
111
- input,
112
- select,
113
- .radio,
114
- .checkbox {
115
- .navbarVerticalAlign(30px); // Vertically center in navbar
116
- }
117
- input,
118
- select,
119
- .btn {
120
- display: inline-block;
121
- margin-bottom: 0;
22
+ .navbar-nav {
23
+ // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
24
+ margin-top: 10px;
25
+ margin-bottom: 15px;
26
+
27
+ > li > a {
28
+ padding-top: ((@navbar-height - @line-height-computed) / 2);
29
+ padding-bottom: ((@navbar-height - @line-height-computed) / 2);
30
+ color: @navbar-link-color;
31
+ line-height: 20px;
32
+ border-radius: @border-radius-base;
33
+ &:hover,
34
+ &:focus {
35
+ color: @navbar-link-hover-color;
36
+ background-color: @navbar-link-hover-bg;
37
+ }
122
38
  }
123
- input[type="image"],
124
- input[type="checkbox"],
125
- input[type="radio"] {
126
- margin-top: 3px;
39
+ > .active > a {
40
+ &,
41
+ &:hover,
42
+ &:focus {
43
+ color: @navbar-link-active-color;
44
+ background-color: @navbar-link-active-bg;
45
+ }
127
46
  }
128
- .input-append,
129
- .input-prepend {
130
- margin-top: 5px;
131
- white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
132
- input {
133
- margin-top: 0; // remove the margin on top since it's on the parent
47
+ > .disabled > a {
48
+ &,
49
+ &:hover,
50
+ &:focus {
51
+ color: @navbar-link-disabled-color;
52
+ background-color: @navbar-link-disabled-bg;
134
53
  }
135
54
  }
136
- }
137
55
 
138
- // Navbar search
139
- // -------------------------
140
- .navbar-search {
141
- position: relative;
142
- float: left;
143
- .navbarVerticalAlign(30px); // Vertically center in navbar
144
- margin-bottom: 0;
145
- .search-query {
146
- margin-bottom: 0;
147
- padding: 4px 14px;
148
- #font > .sans-serif(13px, normal, 1);
149
- .border-radius(15px); // redeclare because of specificity of the type attribute
56
+ // Right aligned contents
57
+ // Make them full width first so that they align properly on mobile
58
+ &.pull-right {
59
+ width: 100%;
150
60
  }
151
61
  }
152
62
 
153
63
 
154
64
 
155
- // Static navbar
156
- // -------------------------
65
+ //
66
+ // Navbar alignment options
67
+ // --------------------------------------------------
157
68
 
69
+ // Static navbar
158
70
  .navbar-static-top {
159
- position: static;
160
- margin-bottom: 0; // remove 18px margin for default navbar
161
- .navbar-inner {
162
- .border-radius(0);
163
- }
71
+ border-radius: 0;
164
72
  }
165
73
 
166
-
167
-
168
- // Fixed navbar
169
- // -------------------------
170
-
171
- // Shared (top/bottom) styles
74
+ // Fix the top/bottom navbars when screen real estate supports it
172
75
  .navbar-fixed-top,
173
76
  .navbar-fixed-bottom {
174
77
  position: fixed;
175
78
  right: 0;
176
79
  left: 0;
177
- z-index: @zindexFixedNavbar;
178
- margin-bottom: 0; // remove 18px margin for default navbar
179
- }
180
- .navbar-fixed-top .navbar-inner,
181
- .navbar-static-top .navbar-inner {
182
- border-width: 0 0 1px;
183
- }
184
- .navbar-fixed-bottom .navbar-inner {
185
- border-width: 1px 0 0;
80
+ z-index: @zindex-navbar-fixed;
81
+ border-radius: 0;
186
82
  }
187
- .navbar-fixed-top .navbar-inner,
188
- .navbar-fixed-bottom .navbar-inner {
189
- padding-left: 0;
190
- padding-right: 0;
191
- .border-radius(0);
192
- }
193
-
194
- // Reset container width
195
- // Required here as we reset the width earlier on and the grid mixins don't override early enough
196
- .navbar-static-top .container,
197
- .navbar-fixed-top .container,
198
- .navbar-fixed-bottom .container {
199
- #grid > .core > .span(@gridColumns);
200
- }
201
-
202
- // Fixed to top
203
83
  .navbar-fixed-top {
204
84
  top: 0;
205
85
  }
206
- .navbar-fixed-top,
207
- .navbar-static-top {
208
- .navbar-inner {
209
- .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
210
- }
211
- }
212
-
213
- // Fixed to bottom
214
86
  .navbar-fixed-bottom {
215
87
  bottom: 0;
216
- .navbar-inner {
217
- .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
218
- }
88
+ margin-bottom: 0; // override .navbar defaults
219
89
  }
220
90
 
221
91
 
222
92
 
223
- // NAVIGATION
224
- // ----------
93
+ //
94
+ // Navbar optional components
95
+ // --------------------------------------------------
225
96
 
226
- .navbar .nav {
227
- position: relative;
228
- left: 0;
97
+ // Brand/project name
98
+ .navbar-brand {
229
99
  display: block;
230
- float: left;
231
- margin: 0 10px 0 0;
232
- }
233
- .navbar .nav.pull-right {
234
- float: right; // redeclare due to specificity
235
- margin-right: 0; // remove margin on float right nav
236
- }
237
- .navbar .nav > li {
238
- float: left;
100
+ max-width: 200px;
101
+ margin-left: auto;
102
+ margin-right: auto;
103
+ padding: @navbar-padding-vertical @navbar-padding-horizontal;
104
+ font-size: @font-size-large;
105
+ font-weight: 500;
106
+ line-height: @line-height-computed;
107
+ color: @navbar-brand-color;
108
+ text-align: center;
109
+ &:hover,
110
+ &:focus {
111
+ color: @navbar-brand-hover-color;
112
+ text-decoration: none;
113
+ background-color: @navbar-brand-hover-bg;
114
+ }
239
115
  }
240
116
 
241
- // Links
242
- .navbar .nav > li > a {
243
- float: none;
244
- // Vertically center the text given @navbarHeight
245
- padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
246
- color: @navbarLinkColor;
247
- text-decoration: none;
248
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
249
- }
250
- .navbar .nav .dropdown-toggle .caret {
251
- margin-top: 8px;
252
- }
117
+ // Collapsible navbar toggle
118
+ .navbar-toggle {
119
+ position: absolute;
120
+ top: floor((@navbar-height - 32) / 2);
121
+ right: 10px;
122
+ width: 48px;
123
+ height: 32px;
124
+ padding: 8px 12px;
125
+ background-color: transparent;
126
+ border: 1px solid @navbar-toggle-border-color;
127
+ border-radius: @border-radius-base;
253
128
 
254
- // Hover/focus
255
- .navbar .nav > li > a:focus,
256
- .navbar .nav > li > a:hover {
257
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
258
- color: @navbarLinkColorHover;
259
- text-decoration: none;
260
- }
129
+ &:hover,
130
+ &:focus {
131
+ background-color: @navbar-toggle-hover-bg;
132
+ }
261
133
 
262
- // Active nav items
263
- .navbar .nav > .active > a,
264
- .navbar .nav > .active > a:hover,
265
- .navbar .nav > .active > a:focus {
266
- color: @navbarLinkColorActive;
267
- text-decoration: none;
268
- background-color: @navbarLinkBackgroundActive;
269
- .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
134
+ // Bars
135
+ .icon-bar {
136
+ display: block;
137
+ width: 22px;
138
+ height: 2px;
139
+ background-color: @navbar-toggle-icon-bar-bg;
140
+ border-radius: 1px;
141
+ }
142
+ .icon-bar + .icon-bar {
143
+ margin-top: 4px;
144
+ }
270
145
  }
271
146
 
272
- // Navbar button for toggling navbar items in responsive layouts
273
- // These definitions need to come after '.navbar .btn'
274
- .navbar .btn-navbar {
275
- display: none;
276
- float: right;
277
- padding: 7px 10px;
278
- margin-left: 5px;
279
- margin-right: 5px;
280
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
281
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
282
- }
283
- .navbar .btn-navbar .icon-bar {
284
- display: block;
285
- width: 18px;
286
- height: 2px;
287
- background-color: #f5f5f5;
288
- .border-radius(1px);
289
- .box-shadow(0 1px 0 rgba(0,0,0,.25));
290
- }
291
- .btn-navbar .icon-bar + .icon-bar {
292
- margin-top: 3px;
147
+ // Navbar form
148
+ .navbar-form {
149
+ .form-inline();
150
+ .navbar-vertical-align(@input-height-base); // Vertically center in navbar
293
151
  }
294
152
 
295
-
296
-
297
153
  // Dropdown menus
298
- // --------------
299
154
 
300
155
  // Menu position and menu carets
301
- .navbar .nav > li > .dropdown-menu {
302
- &:before {
303
- content: '';
304
- display: inline-block;
305
- border-left: 7px solid transparent;
306
- border-right: 7px solid transparent;
307
- border-bottom: 7px solid #ccc;
308
- border-bottom-color: @dropdownBorder;
309
- position: absolute;
310
- top: -7px;
311
- left: 9px;
312
- }
313
- &:after {
314
- content: '';
315
- display: inline-block;
316
- border-left: 6px solid transparent;
317
- border-right: 6px solid transparent;
318
- border-bottom: 6px solid @dropdownBackground;
319
- position: absolute;
320
- top: -6px;
321
- left: 10px;
322
- }
156
+ .navbar-nav > li > .dropdown-menu {
157
+ margin-top: 0;
158
+ border-top-left-radius: 0;
159
+ border-top-right-radius: 0;
323
160
  }
324
161
  // Menu position and menu caret support for dropups via extra dropup class
325
- .navbar-fixed-bottom .nav > li > .dropdown-menu {
326
- &:before {
327
- border-top: 7px solid #ccc;
328
- border-top-color: @dropdownBorder;
329
- border-bottom: 0;
330
- bottom: -7px;
331
- top: auto;
332
- }
333
- &:after {
334
- border-top: 6px solid @dropdownBackground;
335
- border-bottom: 0;
336
- bottom: -6px;
337
- top: auto;
162
+ .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
163
+ border-bottom-left-radius: 0;
164
+ border-bottom-right-radius: 0;
165
+ }
166
+
167
+ // Dropdown menu items and carets
168
+ .navbar-nav {
169
+ // Caret should match text color on hover
170
+ > .dropdown > a:hover .caret,
171
+ > .dropdown > a:focus .caret {
172
+ border-top-color: @navbar-link-hover-color;
173
+ border-bottom-color: @navbar-link-hover-color;
338
174
  }
339
- }
340
-
341
- // Caret should match text color on hover/focus
342
- .navbar .nav li.dropdown > a:hover .caret,
343
- .navbar .nav li.dropdown > a:focus .caret {
344
- border-top-color: @navbarLinkColorHover;
345
- border-bottom-color: @navbarLinkColorHover;
346
- }
347
175
 
348
- // Remove background color from open dropdown
349
- .navbar .nav li.dropdown.open > .dropdown-toggle,
350
- .navbar .nav li.dropdown.active > .dropdown-toggle,
351
- .navbar .nav li.dropdown.open.active > .dropdown-toggle {
352
- background-color: @navbarLinkBackgroundActive;
353
- color: @navbarLinkColorActive;
354
- }
355
- .navbar .nav li.dropdown > .dropdown-toggle .caret {
356
- border-top-color: @navbarLinkColor;
357
- border-bottom-color: @navbarLinkColor;
358
- }
359
- .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
360
- .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
361
- .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
362
- border-top-color: @navbarLinkColorActive;
363
- border-bottom-color: @navbarLinkColorActive;
176
+ // Remove background color from open dropdown
177
+ > .open > a {
178
+ &,
179
+ &:hover,
180
+ &:focus {
181
+ background-color: @navbar-link-active-bg;
182
+ color: @navbar-link-active-color;
183
+ .caret {
184
+ border-top-color: @navbar-link-active-color;
185
+ border-bottom-color: @navbar-link-active-color;
186
+ }
187
+ }
188
+ }
189
+ > .dropdown > a .caret {
190
+ border-top-color: @navbar-link-color;
191
+ border-bottom-color: @navbar-link-color;
192
+ }
364
193
  }
365
194
 
366
195
  // Right aligned menus need alt position
367
- .navbar .pull-right > li > .dropdown-menu,
368
- .navbar .nav > li > .dropdown-menu.pull-right {
196
+ .navbar-nav.pull-right > li > .dropdown-menu,
197
+ .navbar-nav > li > .dropdown-menu.pull-right {
369
198
  left: auto;
370
199
  right: 0;
371
- &:before {
372
- left: auto;
373
- right: 12px;
374
- }
375
- &:after {
376
- left: auto;
377
- right: 13px;
378
- }
379
- .dropdown-menu {
380
- left: auto;
381
- right: 100%;
382
- margin-left: 0;
383
- margin-right: -1px;
384
- .border-radius(6px 0 6px 6px);
385
- }
386
200
  }
387
201
 
388
202
 
389
- // Inverted navbar
390
- // -------------------------
391
203
 
392
- .navbar-inverse {
204
+ // Inverse navbar
205
+ // --------------------------------------------------
393
206
 
394
- .navbar-inner {
395
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
396
- border-color: @navbarInverseBorder;
397
- }
207
+ .navbar-inverse {
208
+ background-color: @navbar-inverse-bg;
398
209
 
399
- .brand,
400
- .nav > li > a {
401
- color: @navbarInverseLinkColor;
402
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
210
+ .navbar-brand {
211
+ color: @navbar-inverse-brand-color;
403
212
  &:hover,
404
213
  &:focus {
405
- color: @navbarInverseLinkColorHover;
214
+ color: @navbar-inverse-brand-hover-color;
215
+ background-color: @navbar-inverse-brand-hover-bg;
406
216
  }
407
217
  }
408
218
 
409
- .brand {
410
- color: @navbarInverseBrandColor;
411
- }
412
-
413
219
  .navbar-text {
414
- color: @navbarInverseText;
220
+ color: @navbar-inverse-color;
415
221
  }
416
222
 
417
- .nav > li > a:focus,
418
- .nav > li > a:hover {
419
- background-color: @navbarInverseLinkBackgroundHover;
420
- color: @navbarInverseLinkColorHover;
421
- }
223
+ .navbar-nav {
224
+ > li > a {
225
+ color: @navbar-inverse-link-color;
422
226
 
423
- .nav .active > a,
424
- .nav .active > a:hover,
425
- .nav .active > a:focus {
426
- color: @navbarInverseLinkColorActive;
427
- background-color: @navbarInverseLinkBackgroundActive;
227
+ &:hover,
228
+ &:focus {
229
+ color: @navbar-inverse-link-hover-color;
230
+ background-color: @navbar-inverse-link-hover-bg;
231
+ }
232
+ }
233
+ > .active > a {
234
+ &,
235
+ &:hover,
236
+ &:focus {
237
+ color: @navbar-inverse-link-active-color;
238
+ background-color: @navbar-inverse-link-active-bg;
239
+ }
240
+ }
241
+ > .disabled > a {
242
+ &,
243
+ &:hover,
244
+ &:focus {
245
+ color: @navbar-inverse-link-disabled-color;
246
+ background-color: @navbar-inverse-link-disabled-bg;
247
+ }
248
+ }
428
249
  }
429
250
 
430
- // Inline text links
431
- .navbar-link {
432
- color: @navbarInverseLinkColor;
251
+ // Darken the responsive nav toggle
252
+ .navbar-toggle {
253
+ border-color: @navbar-inverse-toggle-border-color;
433
254
  &:hover,
434
255
  &:focus {
435
- color: @navbarInverseLinkColorHover;
256
+ background-color: @navbar-inverse-toggle-hover-bg;
257
+ }
258
+ .icon-bar {
259
+ background-color: @navbar-inverse-toggle-icon-bar-bg;
436
260
  }
437
- }
438
-
439
- // Dividers in navbar
440
- .divider-vertical {
441
- border-left-color: @navbarInverseBackground;
442
- border-right-color: @navbarInverseBackgroundHighlight;
443
261
  }
444
262
 
445
263
  // Dropdowns
446
- .nav li.dropdown.open > .dropdown-toggle,
447
- .nav li.dropdown.active > .dropdown-toggle,
448
- .nav li.dropdown.open.active > .dropdown-toggle {
449
- background-color: @navbarInverseLinkBackgroundActive;
450
- color: @navbarInverseLinkColorActive;
451
- }
452
- .nav li.dropdown > a:hover .caret,
453
- .nav li.dropdown > a:focus .caret {
454
- border-top-color: @navbarInverseLinkColorActive;
455
- border-bottom-color: @navbarInverseLinkColorActive;
456
- }
457
- .nav li.dropdown > .dropdown-toggle .caret {
458
- border-top-color: @navbarInverseLinkColor;
459
- border-bottom-color: @navbarInverseLinkColor;
264
+ .navbar-nav {
265
+ > .open > a {
266
+ &,
267
+ &:hover,
268
+ &:focus {
269
+ background-color: @navbar-inverse-link-active-bg;
270
+ color: @navbar-inverse-link-active-color;
271
+ }
272
+ }
273
+ > .dropdown > a:hover .caret {
274
+ border-top-color: @navbar-inverse-link-hover-color;
275
+ border-bottom-color: @navbar-inverse-link-hover-color;
276
+ }
277
+ > .dropdown > a .caret {
278
+ border-top-color: @navbar-inverse-link-color;
279
+ border-bottom-color: @navbar-inverse-link-color;
280
+ }
281
+ > .open > a {
282
+ &,
283
+ &:hover,
284
+ &:focus {
285
+ .caret {
286
+ border-top-color: @navbar-inverse-link-active-color;
287
+ border-bottom-color: @navbar-inverse-link-active-color;
288
+ }
289
+ }
290
+ }
460
291
  }
461
- .nav li.dropdown.open > .dropdown-toggle .caret,
462
- .nav li.dropdown.active > .dropdown-toggle .caret,
463
- .nav li.dropdown.open.active > .dropdown-toggle .caret {
464
- border-top-color: @navbarInverseLinkColorActive;
465
- border-bottom-color: @navbarInverseLinkColorActive;
292
+ }
293
+
294
+
295
+
296
+ // Responsive navbar
297
+ // --------------------------------------------------
298
+
299
+ @media screen and (min-width: @grid-float-breakpoint) {
300
+
301
+ .navbar-brand {
302
+ float: left;
303
+ margin-left: -(@navbar-padding-horizontal);
304
+ margin-right: 5px;
466
305
  }
306
+ .navbar-nav {
307
+ float: left;
308
+ // undo margin to make nav extend full height of navbar
309
+ margin-top: 0;
310
+ margin-bottom: 0;
467
311
 
468
- // Navbar search
469
- .navbar-search {
470
- .search-query {
471
- color: @white;
472
- background-color: @navbarInverseSearchBackground;
473
- border-color: @navbarInverseSearchBorder;
474
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
475
- .transition(none);
476
- .placeholder(@navbarInverseSearchPlaceholderColor);
477
-
478
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
479
- &:focus,
480
- &.focused {
481
- padding: 5px 15px;
482
- color: @grayDark;
483
- text-shadow: 0 1px 0 @white;
484
- background-color: @navbarInverseSearchBackgroundFocus;
485
- border: 0;
486
- .box-shadow(0 0 3px rgba(0,0,0,.15));
487
- outline: 0;
312
+ > li {
313
+ float: left;
314
+ > a {
315
+ border-radius: 0;
488
316
  }
489
317
  }
318
+
319
+ &.pull-right {
320
+ float: right;
321
+ width: auto;
322
+ }
490
323
  }
491
324
 
492
- // Navbar collapse button
493
- .btn-navbar {
494
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
325
+ // Required to make the collapsing navbar work on regular desktops
326
+ .navbar-toggle {
327
+ position: relative;
328
+ top: auto;
329
+ left: auto;
330
+ display: none;
331
+ }
332
+ .nav-collapse.collapse {
333
+ display: block !important;
334
+ height: auto !important;
335
+ overflow: visible !important;
495
336
  }
496
337
 
497
338
  }
339
+
340
+
341
+
342
+ // Buttons in navbars
343
+ //
344
+ // Vertically center a button within a navbar (when *not* in a form).
345
+
346
+ .navbar-btn {
347
+ margin-top: ((@navbar-height - @input-height-base) / 2);
348
+ }
349
+
350
+
351
+
352
+ // Text in navbars
353
+ //
354
+ // Add a class to make any element properly align itself vertically within the navbars.
355
+
356
+ .navbar-text {
357
+ .navbar-vertical-align(@line-height-computed);
358
+ }
359
+
360
+
361
+
362
+ // Links in navbars
363
+ //
364
+ // Add a class to ensure links outside the navbar nav are colored correctly.
365
+
366
+ // Default navbar variables
367
+ .navbar-link {
368
+ color: @navbar-link-color;
369
+ &:hover {
370
+ color: @navbar-link-hover-color;
371
+ }
372
+ }
373
+
374
+ // Use the inverse navbar variables
375
+ .navbar-inverse .navbar-link {
376
+ color: @navbar-inverse-link-color;
377
+ &:hover {
378
+ color: @navbar-inverse-link-hover-color;
379
+ }
380
+ }