less-rails-bootstrap 2.3.3 → 3.0.0.rc1

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