bootstrapped 1.0.1 → 2.0.3

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 (60) hide show
  1. data/.gitmodules +3 -0
  2. data/README.rdoc +7 -1
  3. data/bootstrapped.gemspec +1 -1
  4. data/lib/bootstrapped/engine.rb +1 -1
  5. data/lib/bootstrapped/version.rb +2 -1
  6. data/vendor/assets/javascripts/bootstrap-alert.js +28 -29
  7. data/vendor/assets/javascripts/bootstrap-button.js +32 -34
  8. data/vendor/assets/javascripts/bootstrap-carousel.js +34 -19
  9. data/vendor/assets/javascripts/bootstrap-collapse.js +47 -26
  10. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  11. data/vendor/assets/javascripts/bootstrap-modal.js +26 -18
  12. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  13. data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
  14. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  15. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  16. data/vendor/assets/javascripts/bootstrap-transition.js +31 -21
  17. data/vendor/assets/javascripts/bootstrap-typeahead.js +30 -16
  18. data/vendor/assets/stylesheets/twitter/bootstrap/static/bootstrap-responsive.css +808 -0
  19. data/vendor/assets/stylesheets/twitter/bootstrap/static/bootstrap.css +2314 -850
  20. data/vendor/less/twitter/bootstrap/less/accordion.less +5 -0
  21. data/vendor/less/twitter/bootstrap/less/alerts.less +2 -14
  22. data/vendor/less/twitter/bootstrap/less/bootstrap.less +2 -2
  23. data/vendor/less/twitter/bootstrap/less/breadcrumbs.less +3 -1
  24. data/vendor/less/twitter/bootstrap/less/button-groups.less +78 -34
  25. data/vendor/less/twitter/bootstrap/less/buttons.less +53 -27
  26. data/vendor/less/twitter/bootstrap/less/carousel.less +0 -0
  27. data/vendor/less/twitter/bootstrap/less/close.less +12 -1
  28. data/vendor/less/twitter/bootstrap/less/code.less +18 -5
  29. data/vendor/less/twitter/bootstrap/less/component-animations.less +9 -7
  30. data/vendor/less/twitter/bootstrap/less/dropdowns.less +59 -47
  31. data/vendor/less/twitter/bootstrap/less/forms.less +167 -98
  32. data/vendor/less/twitter/bootstrap/less/grid.less +2 -5
  33. data/vendor/less/twitter/bootstrap/less/hero-unit.less +3 -1
  34. data/vendor/less/twitter/bootstrap/less/labels-badges.less +55 -0
  35. data/vendor/less/twitter/bootstrap/less/layouts.less +1 -1
  36. data/vendor/less/twitter/bootstrap/less/mixins.less +261 -167
  37. data/vendor/less/twitter/bootstrap/less/modals.less +22 -4
  38. data/vendor/less/twitter/bootstrap/less/navbar.less +147 -75
  39. data/vendor/less/twitter/bootstrap/less/navs.less +72 -53
  40. data/vendor/less/twitter/bootstrap/less/pager.less +6 -0
  41. data/vendor/less/twitter/bootstrap/less/pagination.less +1 -0
  42. data/vendor/less/twitter/bootstrap/less/popovers.less +0 -0
  43. data/vendor/less/twitter/bootstrap/less/progress-bars.less +27 -5
  44. data/vendor/less/twitter/bootstrap/less/reset.less +4 -4
  45. data/vendor/less/twitter/bootstrap/less/responsive-1200px-min.less +26 -0
  46. data/vendor/less/twitter/bootstrap/less/responsive-767px-max.less +149 -0
  47. data/vendor/less/twitter/bootstrap/less/responsive-768px-979px.less +17 -0
  48. data/vendor/less/twitter/bootstrap/less/responsive-navbar.less +146 -0
  49. data/vendor/less/twitter/bootstrap/less/responsive-utilities.less +41 -0
  50. data/vendor/less/twitter/bootstrap/less/responsive.less +14 -289
  51. data/vendor/less/twitter/bootstrap/less/scaffolding.less +4 -4
  52. data/vendor/less/twitter/bootstrap/less/sprites.less +47 -12
  53. data/vendor/less/twitter/bootstrap/less/tables.less +59 -22
  54. data/vendor/less/twitter/bootstrap/less/thumbnails.less +15 -3
  55. data/vendor/less/twitter/bootstrap/less/tooltip.less +0 -0
  56. data/vendor/less/twitter/bootstrap/less/type.less +30 -12
  57. data/vendor/less/twitter/bootstrap/less/utilities.less +0 -0
  58. data/vendor/less/twitter/bootstrap/less/variables.less +119 -13
  59. data/vendor/less/twitter/bootstrap/less/wells.less +10 -0
  60. metadata +30 -22
@@ -4,17 +4,19 @@
4
4
  .hero-unit {
5
5
  padding: 60px;
6
6
  margin-bottom: 30px;
7
- background-color: #f5f5f5;
7
+ background-color: @heroUnitBackground;
8
8
  .border-radius(6px);
9
9
  h1 {
10
10
  margin-bottom: 0;
11
11
  font-size: 60px;
12
12
  line-height: 1;
13
+ color: @heroUnitHeadingColor;
13
14
  letter-spacing: -1px;
14
15
  }
15
16
  p {
16
17
  font-size: 18px;
17
18
  font-weight: 200;
18
19
  line-height: @baseLineHeight * 1.5;
20
+ color: @heroUnitLeadColor;
19
21
  }
20
22
  }
@@ -0,0 +1,55 @@
1
+ // LABELS & BADGES
2
+ // ---------------
3
+
4
+ // Base classes
5
+ .label,
6
+ .badge {
7
+ font-size: @baseFontSize * .846;
8
+ font-weight: bold;
9
+ line-height: 14px; // ensure proper line-height if floated
10
+ color: @white;
11
+ vertical-align: baseline;
12
+ white-space: nowrap;
13
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
14
+ background-color: @grayLight;
15
+ }
16
+ // Set unique padding and border-radii
17
+ .label {
18
+ padding: 1px 4px 2px;
19
+ .border-radius(3px);
20
+ }
21
+ .badge {
22
+ padding: 1px 9px 2px;
23
+ .border-radius(9px);
24
+ }
25
+
26
+ // Hover state, but only for links
27
+ a {
28
+ &.label:hover,
29
+ &.badge:hover {
30
+ color: @white;
31
+ text-decoration: none;
32
+ cursor: pointer;
33
+ }
34
+ }
35
+
36
+ // Colors
37
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
38
+ .label,
39
+ .badge {
40
+ // Important (red)
41
+ &-important { background-color: @errorText; }
42
+ &-important[href] { background-color: darken(@errorText, 10%); }
43
+ // Warnings (orange)
44
+ &-warning { background-color: @orange; }
45
+ &-warning[href] { background-color: darken(@orange, 10%); }
46
+ // Success (green)
47
+ &-success { background-color: @successText; }
48
+ &-success[href] { background-color: darken(@successText, 10%); }
49
+ // Info (turquoise)
50
+ &-info { background-color: @infoText; }
51
+ &-info[href] { background-color: darken(@infoText, 10%); }
52
+ // Inverse (black)
53
+ &-inverse { background-color: @grayDark; }
54
+ &-inverse[href] { background-color: darken(@grayDark, 10%); }
55
+ }
@@ -11,7 +11,7 @@
11
11
 
12
12
  // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
13
  .container-fluid {
14
- padding-left: @gridGutterWidth;
15
14
  padding-right: @gridGutterWidth;
15
+ padding-left: @gridGutterWidth;
16
16
  .clearfix();
17
17
  }
@@ -9,7 +9,7 @@
9
9
  // Clearfix
10
10
  // --------
11
11
  // For clearing floats like a boss h5bp.com/q
12
- .clearfix() {
12
+ .clearfix {
13
13
  *zoom: 1;
14
14
  &:before,
15
15
  &:after {
@@ -25,7 +25,7 @@
25
25
  // ------------------
26
26
  .tab-focus() {
27
27
  // Default
28
- outline: thin dotted;
28
+ outline: thin dotted #333;
29
29
  // Webkit
30
30
  outline: 5px auto -webkit-focus-ring-color;
31
31
  outline-offset: -2px;
@@ -70,11 +70,11 @@
70
70
 
71
71
  // Sizing shortcuts
72
72
  // -------------------------
73
- .size(@height: 5px, @width: 5px) {
73
+ .size(@height, @width) {
74
74
  width: @width;
75
75
  height: @height;
76
76
  }
77
- .square(@size: 5px) {
77
+ .square(@size) {
78
78
  .size(@size, @size);
79
79
  }
80
80
 
@@ -89,6 +89,25 @@
89
89
  }
90
90
  }
91
91
 
92
+ // Text overflow
93
+ // -------------------------
94
+ // Requires inline-block or block for proper styling
95
+ .text-overflow() {
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ white-space: nowrap;
99
+ }
100
+
101
+ // CSS image replacement
102
+ // -------------------------
103
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
104
+ .hide-text {
105
+ font: 0/0 a;
106
+ color: transparent;
107
+ text-shadow: none;
108
+ background-color: transparent;
109
+ border: 0;
110
+ }
92
111
 
93
112
 
94
113
  // FONTS
@@ -97,13 +116,13 @@
97
116
  #font {
98
117
  #family {
99
118
  .serif() {
100
- font-family: Georgia, "Times New Roman", Times, serif;
119
+ font-family: @serifFontFamily;
101
120
  }
102
121
  .sans-serif() {
103
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
122
+ font-family: @sansFontFamily;
104
123
  }
105
124
  .monospace() {
106
- font-family: Menlo, Monaco, "Courier New", monospace;
125
+ font-family: @monoFontFamily;
107
126
  }
108
127
  }
109
128
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
@@ -126,140 +145,43 @@
126
145
  }
127
146
 
128
147
 
129
-
130
- // GRID SYSTEM
148
+ // FORMS
131
149
  // --------------------------------------------------
132
150
 
133
- // Site container
134
- // -------------------------
135
- .container-fixed() {
136
- width: @gridRowWidth;
137
- margin-left: auto;
138
- margin-right: auto;
139
- .clearfix();
140
- }
141
-
142
- // Le grid system
143
- // -------------------------
144
- #gridSystem {
145
- // Setup the mixins to be used
146
- .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
147
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
148
- }
149
- .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
150
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
151
- }
152
- .gridColumn(@gridGutterWidth) {
153
- float: left;
154
- margin-left: @gridGutterWidth;
155
- }
156
- // Take these values and mixins, and make 'em do their thang
157
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
158
- // Row surrounds the columns
159
- .row {
160
- margin-left: @gridGutterWidth * -1;
161
- .clearfix();
162
- }
163
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
164
- [class*="span"] {
165
- #gridSystem > .gridColumn(@gridGutterWidth);
166
- }
167
- // Default columns
168
- .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
169
- .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
170
- .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
171
- .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
172
- .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
173
- .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
174
- .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
175
- .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
176
- .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
177
- .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
178
- .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
179
- .span12,
180
- .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
181
- // Offset column options
182
- .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
183
- .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
184
- .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
185
- .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
186
- .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
187
- .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
188
- .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
189
- .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
190
- .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
191
- .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
192
- .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
193
- }
194
- }
195
-
196
- // Fluid grid system
197
- // -------------------------
198
- #fluidGridSystem {
199
- // Setup the mixins to be used
200
- .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
201
- width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
202
- }
203
- .gridColumn(@fluidGridGutterWidth) {
204
- float: left;
205
- margin-left: @fluidGridGutterWidth;
206
- }
207
- // Take these values and mixins, and make 'em do their thang
208
- .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
209
- // Row surrounds the columns
210
- .row-fluid {
211
- width: 100%;
212
- .clearfix();
213
-
214
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
215
- > [class*="span"] {
216
- #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
217
- }
218
- > [class*="span"]:first-child {
219
- margin-left: 0;
220
- }
221
- // Default columns
222
- .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
223
- .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
224
- .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
225
- .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
226
- .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
227
- .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
228
- .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
229
- .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
230
- .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
231
- .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
232
- .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
233
- .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
151
+ // Block level inputs
152
+ .input-block-level {
153
+ display: block;
154
+ width: 100%;
155
+ min-height: 28px; // Make inputs at least the height of their button counterpart
156
+ .box-sizing(border-box); // Makes inputs behave like true block-level elements
157
+ }
158
+
159
+
160
+ // Mixin for form field states
161
+ .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
162
+ // Set the text color
163
+ > label,
164
+ .help-block,
165
+ .help-inline {
166
+ color: @textColor;
167
+ }
168
+ // Style inputs accordingly
169
+ input,
170
+ select,
171
+ textarea {
172
+ color: @textColor;
173
+ border-color: @borderColor;
174
+ &:focus {
175
+ border-color: darken(@borderColor, 10%);
176
+ .box-shadow(0 0 6px lighten(@borderColor, 20%));
234
177
  }
235
178
  }
236
- }
237
-
238
-
239
-
240
- // Input grid system
241
- // -------------------------
242
- #inputGridSystem {
243
- .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
244
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
245
- }
246
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
247
- input,
248
- textarea,
249
- .uneditable-input {
250
- &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
251
- &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
252
- &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
253
- &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
254
- &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
255
- &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
256
- &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
257
- &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
258
- &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
259
- &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
260
- &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
261
- &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
262
- }
179
+ // Give a small background color for input-prepend/-append
180
+ .input-prepend .add-on,
181
+ .input-append .add-on {
182
+ color: @textColor;
183
+ background-color: @backgroundColor;
184
+ border-color: @textColor;
263
185
  }
264
186
  }
265
187
 
@@ -269,14 +191,14 @@
269
191
  // --------------------------------------------------
270
192
 
271
193
  // Border Radius
272
- .border-radius(@radius: 5px) {
194
+ .border-radius(@radius) {
273
195
  -webkit-border-radius: @radius;
274
196
  -moz-border-radius: @radius;
275
197
  border-radius: @radius;
276
198
  }
277
199
 
278
200
  // Drop shadows
279
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
201
+ .box-shadow(@shadow) {
280
202
  -webkit-box-shadow: @shadow;
281
203
  -moz-box-shadow: @shadow;
282
204
  box-shadow: @shadow;
@@ -306,27 +228,38 @@
306
228
  -o-transform: scale(@ratio);
307
229
  transform: scale(@ratio);
308
230
  }
309
- .translate(@x: 0, @y: 0) {
231
+ .translate(@x, @y) {
310
232
  -webkit-transform: translate(@x, @y);
311
233
  -moz-transform: translate(@x, @y);
312
234
  -ms-transform: translate(@x, @y);
313
235
  -o-transform: translate(@x, @y);
314
236
  transform: translate(@x, @y);
315
237
  }
316
- .skew(@x: 0, @y: 0) {
317
- -webkit-transform: translate(@x, @y);
318
- -moz-transform: translate(@x, @y);
319
- -ms-transform: translate(@x, @y);
320
- -o-transform: translate(@x, @y);
321
- transform: translate(@x, @y);
322
- }
323
- .skew(@x: 0, @y: 0) {
238
+ .skew(@x, @y) {
324
239
  -webkit-transform: skew(@x, @y);
325
240
  -moz-transform: skew(@x, @y);
326
241
  -ms-transform: skew(@x, @y);
327
242
  -o-transform: skew(@x, @y);
328
243
  transform: skew(@x, @y);
329
244
  }
245
+ .translate3d(@x, @y, @z) {
246
+ -webkit-transform: translate(@x, @y, @z);
247
+ -moz-transform: translate(@x, @y, @z);
248
+ -ms-transform: translate(@x, @y, @z);
249
+ -o-transform: translate(@x, @y, @z);
250
+ transform: translate(@x, @y, @z);
251
+ }
252
+
253
+ // Backface visibility
254
+ // Prevent browsers from flickering when using CSS 3D transforms.
255
+ // Default value is `visible`, but can be changed to `hidden
256
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
257
+ .backface-visibility(@visibility){
258
+ -webkit-backface-visibility: @visibility;
259
+ -moz-backface-visibility: @visibility;
260
+ -ms-backface-visibility: @visibility;
261
+ backface-visibility: @visibility;
262
+ }
330
263
 
331
264
  // Background clipping
332
265
  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@@ -349,6 +282,7 @@
349
282
  .box-sizing(@boxmodel) {
350
283
  -webkit-box-sizing: @boxmodel;
351
284
  -moz-box-sizing: @boxmodel;
285
+ -ms-box-sizing: @boxmodel;
352
286
  box-sizing: @boxmodel;
353
287
  }
354
288
 
@@ -357,18 +291,19 @@
357
291
  .user-select(@select) {
358
292
  -webkit-user-select: @select;
359
293
  -moz-user-select: @select;
294
+ -ms-user-select: @select;
360
295
  -o-user-select: @select;
361
296
  user-select: @select;
362
297
  }
363
298
 
364
299
  // Resize anything
365
- .resizable(@direction: both) {
300
+ .resizable(@direction) {
366
301
  resize: @direction; // Options: horizontal, vertical, both
367
302
  overflow: auto; // Safari fix
368
303
  }
369
304
 
370
305
  // CSS3 Content Columns
371
- .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
306
+ .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
372
307
  -webkit-column-count: @columnCount;
373
308
  -moz-column-count: @columnCount;
374
309
  column-count: @columnCount;
@@ -378,9 +313,9 @@
378
313
  }
379
314
 
380
315
  // Opacity
381
- .opacity(@opacity: 100) {
316
+ .opacity(@opacity) {
382
317
  opacity: @opacity / 100;
383
- filter: e(%("alpha(opacity=%d)", @opacity));
318
+ filter: ~"alpha(opacity=@{opacity})";
384
319
  }
385
320
 
386
321
 
@@ -456,8 +391,8 @@
456
391
  background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
457
392
  background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
458
393
  background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
394
+ background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
459
395
  background-repeat: no-repeat;
460
- // Opera cannot do radial gradients yet
461
396
  }
462
397
  .striped(@color, @angle: -45deg) {
463
398
  background-color: @color;
@@ -475,16 +410,39 @@
475
410
  }
476
411
 
477
412
 
478
- // Mixin for generating button backgrounds
479
- // ---------------------------------------
413
+
414
+ // COMPONENT MIXINS
415
+ // --------------------------------------------------
416
+
417
+ // Horizontal dividers
418
+ // -------------------------
419
+ // Dividers (basically an hr) within dropdowns and nav lists
420
+ .nav-divider() {
421
+ // IE7 needs a set width since we gave a height. Restricting just
422
+ // to IE7 to keep the 1px left/right space in other browsers.
423
+ // It is unclear where IE is getting the extra space that we need
424
+ // to negative-margin away, but so it goes.
425
+ *width: 100%;
426
+ height: 1px;
427
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
428
+ *margin: -5px 0 5px;
429
+ overflow: hidden;
430
+ background-color: #e5e5e5;
431
+ border-bottom: 1px solid @white;
432
+ }
433
+
434
+ // Button backgrounds
435
+ // ------------------
480
436
  .buttonBackground(@startColor, @endColor) {
481
437
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
482
438
  .gradientBar(@startColor, @endColor);
439
+ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
483
440
  .reset-filter();
484
441
 
485
442
  // in these cases the gradient won't cover the background, so we override
486
443
  &:hover, &:active, &.active, &.disabled, &[disabled] {
487
444
  background-color: @endColor;
445
+ *background-color: darken(@endColor, 5%);
488
446
  }
489
447
 
490
448
  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -494,44 +452,180 @@
494
452
  }
495
453
  }
496
454
 
455
+ // Navbar vertical align
456
+ // -------------------------
457
+ // Vertically center elements in the navbar.
458
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
459
+ .navbarVerticalAlign(@elementHeight) {
460
+ margin-top: (@navbarHeight - @elementHeight) / 2;
461
+ }
497
462
 
498
- // COMPONENT MIXINS
499
- // --------------------------------------------------
500
-
501
- // POPOVER ARROWS
463
+ // Popover arrows
502
464
  // -------------------------
503
465
  // For tipsies and popovers
504
466
  #popoverArrow {
505
- .top(@arrowWidth: 5px) {
467
+ .top(@arrowWidth: 5px, @color: @black) {
506
468
  bottom: 0;
507
469
  left: 50%;
508
470
  margin-left: -@arrowWidth;
509
471
  border-left: @arrowWidth solid transparent;
510
472
  border-right: @arrowWidth solid transparent;
511
- border-top: @arrowWidth solid @black;
473
+ border-top: @arrowWidth solid @color;
512
474
  }
513
- .left(@arrowWidth: 5px) {
475
+ .left(@arrowWidth: 5px, @color: @black) {
514
476
  top: 50%;
515
477
  right: 0;
516
478
  margin-top: -@arrowWidth;
517
479
  border-top: @arrowWidth solid transparent;
518
480
  border-bottom: @arrowWidth solid transparent;
519
- border-left: @arrowWidth solid @black;
481
+ border-left: @arrowWidth solid @color;
520
482
  }
521
- .bottom(@arrowWidth: 5px) {
483
+ .bottom(@arrowWidth: 5px, @color: @black) {
522
484
  top: 0;
523
485
  left: 50%;
524
486
  margin-left: -@arrowWidth;
525
487
  border-left: @arrowWidth solid transparent;
526
488
  border-right: @arrowWidth solid transparent;
527
- border-bottom: @arrowWidth solid @black;
489
+ border-bottom: @arrowWidth solid @color;
528
490
  }
529
- .right(@arrowWidth: 5px) {
491
+ .right(@arrowWidth: 5px, @color: @black) {
530
492
  top: 50%;
531
493
  left: 0;
532
494
  margin-top: -@arrowWidth;
533
495
  border-top: @arrowWidth solid transparent;
534
496
  border-bottom: @arrowWidth solid transparent;
535
- border-right: @arrowWidth solid @black;
497
+ border-right: @arrowWidth solid @color;
536
498
  }
537
499
  }
500
+
501
+ // Grid System
502
+ // -----------
503
+
504
+ // Centered container element
505
+ .container-fixed() {
506
+ margin-right: auto;
507
+ margin-left: auto;
508
+ .clearfix();
509
+ }
510
+
511
+ // Table columns
512
+ .tableColumns(@columnSpan: 1) {
513
+ float: none; // undo default grid column styles
514
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
515
+ margin-left: 0; // undo default grid column styles
516
+ }
517
+
518
+ // Make a Grid
519
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
520
+ .makeRow() {
521
+ margin-left: @gridGutterWidth * -1;
522
+ .clearfix();
523
+ }
524
+ .makeColumn(@columns: 1, @offset: 0) {
525
+ float: left;
526
+ margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
527
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
528
+ }
529
+
530
+ // The Grid
531
+ #grid {
532
+
533
+ .core (@gridColumnWidth, @gridGutterWidth) {
534
+
535
+ .spanX (@index) when (@index > 0) {
536
+ (~".span@{index}") { .span(@index); }
537
+ .spanX(@index - 1);
538
+ }
539
+ .spanX (0) {}
540
+
541
+ .offsetX (@index) when (@index > 0) {
542
+ (~".offset@{index}") { .offset(@index); }
543
+ .offsetX(@index - 1);
544
+ }
545
+ .offsetX (0) {}
546
+
547
+ .offset (@columns) {
548
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
549
+ }
550
+
551
+ .span (@columns) {
552
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
553
+ }
554
+
555
+ .row {
556
+ margin-left: @gridGutterWidth * -1;
557
+ .clearfix();
558
+ }
559
+
560
+ [class*="span"] {
561
+ float: left;
562
+ margin-left: @gridGutterWidth;
563
+ }
564
+
565
+ // Set the container width, and override it for fixed navbars in media queries
566
+ .container,
567
+ .navbar-fixed-top .container,
568
+ .navbar-fixed-bottom .container { .span(@gridColumns); }
569
+
570
+ // generate .spanX and .offsetX
571
+ .spanX (@gridColumns);
572
+ .offsetX (@gridColumns);
573
+
574
+ }
575
+
576
+ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
577
+
578
+ .spanX (@index) when (@index > 0) {
579
+ (~".span@{index}") { .span(@index); }
580
+ .spanX(@index - 1);
581
+ }
582
+ .spanX (0) {}
583
+
584
+ .span (@columns) {
585
+ width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
586
+ *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
587
+ }
588
+
589
+ .row-fluid {
590
+ width: 100%;
591
+ .clearfix();
592
+ [class*="span"] {
593
+ .input-block-level();
594
+ float: left;
595
+ margin-left: @fluidGridGutterWidth;
596
+ *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
597
+ }
598
+ [class*="span"]:first-child {
599
+ margin-left: 0;
600
+ }
601
+
602
+ // generate .spanX
603
+ .spanX (@gridColumns);
604
+ }
605
+
606
+ }
607
+
608
+ .input(@gridColumnWidth, @gridGutterWidth) {
609
+
610
+ .spanX (@index) when (@index > 0) {
611
+ (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
612
+ .spanX(@index - 1);
613
+ }
614
+ .spanX (0) {}
615
+
616
+ .span(@columns) {
617
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
618
+ }
619
+
620
+ input,
621
+ textarea,
622
+ .uneditable-input {
623
+ margin-left: 0; // override margin-left from core grid system
624
+ }
625
+
626
+ // generate .spanX
627
+ .spanX (@gridColumns);
628
+
629
+ }
630
+
631
+ }