anjlab-bootstrap-rails 3.0.0.rc1 → 3.0.0.rc2

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 (46) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -12
  3. data/Rakefile +3 -2
  4. data/app/assets/javascripts/twitter/bootstrap.js +2 -1
  5. data/app/assets/javascripts/twitter/bootstrap/button.js +4 -2
  6. data/app/assets/javascripts/twitter/bootstrap/carousel.js +6 -2
  7. data/app/assets/javascripts/twitter/bootstrap/collapse.js +2 -2
  8. data/app/assets/javascripts/twitter/bootstrap/modal.js +19 -16
  9. data/app/assets/javascripts/twitter/bootstrap/popover.js +7 -5
  10. data/app/assets/javascripts/twitter/bootstrap/tooltip.js +39 -21
  11. data/app/assets/javascripts/twitter/bootstrap/transition.js +2 -2
  12. data/app/assets/stylesheets/twitter/bootstrap/_alerts.scss +21 -19
  13. data/app/assets/stylesheets/twitter/bootstrap/_badges.scss +5 -5
  14. data/app/assets/stylesheets/twitter/bootstrap/_bootstrap.scss +1 -1
  15. data/app/assets/stylesheets/twitter/bootstrap/_button-groups.scss +96 -23
  16. data/app/assets/stylesheets/twitter/bootstrap/_buttons.scss +24 -18
  17. data/app/assets/stylesheets/twitter/bootstrap/_carousel.scss +10 -11
  18. data/app/assets/stylesheets/twitter/bootstrap/_close.scss +1 -1
  19. data/app/assets/stylesheets/twitter/bootstrap/_code.scss +4 -3
  20. data/app/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +23 -18
  21. data/app/assets/stylesheets/twitter/bootstrap/_forms.scss +65 -160
  22. data/app/assets/stylesheets/twitter/bootstrap/_grid.scss +244 -59
  23. data/app/assets/stylesheets/twitter/bootstrap/_input-groups.scss +127 -0
  24. data/app/assets/stylesheets/twitter/bootstrap/_labels.scss +12 -4
  25. data/app/assets/stylesheets/twitter/bootstrap/_list-group.scss +36 -36
  26. data/app/assets/stylesheets/twitter/bootstrap/_mixins.scss +227 -52
  27. data/app/assets/stylesheets/twitter/bootstrap/_modals.scss +6 -9
  28. data/app/assets/stylesheets/twitter/bootstrap/_navbar.scss +268 -82
  29. data/app/assets/stylesheets/twitter/bootstrap/_navs.scss +10 -18
  30. data/app/assets/stylesheets/twitter/bootstrap/_pagination.scss +5 -41
  31. data/app/assets/stylesheets/twitter/bootstrap/_panels.scss +83 -57
  32. data/app/assets/stylesheets/twitter/bootstrap/_popovers.scss +0 -2
  33. data/app/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +2 -8
  34. data/app/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss +76 -21
  35. data/app/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +18 -2
  36. data/app/assets/stylesheets/twitter/bootstrap/_tables.scss +1 -1
  37. data/app/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +2 -2
  38. data/app/assets/stylesheets/twitter/bootstrap/_tooltip.scss +1 -1
  39. data/app/assets/stylesheets/twitter/bootstrap/_type.scss +19 -13
  40. data/app/assets/stylesheets/twitter/bootstrap/_utilities.scss +3 -2
  41. data/app/assets/stylesheets/twitter/bootstrap/_variables.scss +86 -46
  42. data/app/assets/stylesheets/twitter/bootstrap/_wells.scss +2 -2
  43. data/lib/bootstrap-rails/version.rb +1 -1
  44. data/vendor/assets/javascripts/holder.js +419 -0
  45. metadata +4 -3
  46. data/app/assets/stylesheets/twitter/bootstrap/_accordion.scss +0 -31
@@ -20,7 +20,7 @@ legend {
20
20
  margin-bottom: $line-height-computed;
21
21
  font-size: ($font-size-base * 1.5);
22
22
  line-height: inherit;
23
- color: $gray-dark;
23
+ color: $legend-color;
24
24
  border: 0;
25
25
  border-bottom: 1px solid $legend-border-color;
26
26
  }
@@ -77,7 +77,7 @@ input[type="checkbox"]:focus {
77
77
  // See https://github.com/twbs/bootstrap/issues/8350 for more.
78
78
  input[type="number"] {
79
79
  &::-webkit-outer-spin-button,
80
- &::-webkit-inner-spin-button {
80
+ &::-webkit-inner-spin-button {
81
81
  height: auto;
82
82
  }
83
83
  }
@@ -121,7 +121,7 @@ input[type="number"] {
121
121
  padding: $padding-base-vertical $padding-base-horizontal;
122
122
  font-size: $font-size-base;
123
123
  line-height: $line-height-base;
124
- color: $gray;
124
+ color: $input-color;
125
125
  vertical-align: middle;
126
126
  background-color: $input-bg;
127
127
  border: 1px solid $input-border;
@@ -129,13 +129,9 @@ input[type="number"] {
129
129
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
130
130
  @include transition((border-color ease-in-out .15s, box-shadow ease-in-out .15s));
131
131
 
132
- &:focus {
133
- border-color: rgba(82,168,236,.8);
134
- outline: 0;
135
- @include box-shadow((inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)));
136
- }
132
+ // Customize the `:focus` state to imitate native WebKit styles.
133
+ @include form-control-focus();
137
134
  }
138
-
139
135
  // Disabled and read-only inputs
140
136
  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
141
137
  // disabled if the fieldset is disabled. Due to implementation difficulty,
@@ -211,37 +207,10 @@ textarea.form-control {
211
207
  }
212
208
 
213
209
 
214
-
215
210
  // Form control sizing
216
- //
217
- // Relative text size, padding, and border-radii changes for form controls. For
218
- // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
219
- // element gets special love because it's special, and that's a fact!
211
+ @include input-size(".input-sm", $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
220
212
 
221
- .form-control {
222
- &.input-large {
223
- height: $input-height-large;
224
- padding: $padding-large-vertical $padding-large-horizontal;
225
- font-size: $font-size-large;
226
- border-radius: $border-radius-large;
227
- }
228
- &.input-small {
229
- height: $input-height-small;
230
- padding: $padding-small-vertical $padding-small-horizontal;
231
- font-size: $font-size-small;
232
- border-radius: $border-radius-small;
233
- }
234
- }
235
- select {
236
- &.input-large {
237
- height: $input-height-large;
238
- line-height: $input-height-large;
239
- }
240
- &.input-small {
241
- height: $input-height-small;
242
- line-height: $input-height-small;
243
- }
244
- }
213
+ @include input-size(".input-lg", $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
245
214
 
246
215
 
247
216
  // Form control feedback states
@@ -262,6 +231,17 @@ select {
262
231
  }
263
232
 
264
233
 
234
+ // Static form control text
235
+ //
236
+ // Apply class to a `p` element to make any string of text align with labels in
237
+ // a horizontal form layout.
238
+
239
+ .form-control-static {
240
+ margin-bottom: 0; // Remove default margin from `p`
241
+ padding-top: $padding-base-vertical;
242
+ }
243
+
244
+
265
245
  // Help text
266
246
  //
267
247
  // Apply to any element you wish to create light text for placement immediately
@@ -276,138 +256,63 @@ select {
276
256
 
277
257
 
278
258
 
279
- // Input groups
280
- // --------------------------------------------------
281
-
282
- // Base styles
283
- // -------------------------
284
- .input-group {
285
- display: table;
286
- border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
287
-
288
- // Undo padding and float of grid classes
289
- &.col {
290
- float: none;
291
- padding-left: 0;
292
- padding-right: 0;
293
- }
294
-
295
- .form-control {
296
- width: 100%;
297
- margin-bottom: 0;
298
- }
299
- }
300
-
301
- // Display as table-cell
302
- // -------------------------
303
- .input-group-addon,
304
- .input-group-btn,
305
- .input-group .form-control {
306
- display: table-cell;
307
-
308
- &:not(:first-child):not(:last-child) {
309
- border-radius: 0;
310
- }
311
- }
312
- // Addon and addon wrapper for buttons
313
- .input-group-addon,
314
- .input-group-btn {
315
- width: 1%;
316
- white-space: nowrap;
317
- vertical-align: middle; // Match the inputs
318
- }
319
-
320
- // Text input groups
321
- // -------------------------
322
- .input-group-addon {
323
- @include box-sizing(border-box);
324
- padding: $padding-base-vertical $padding-base-horizontal;
325
- font-size: $font-size-base;
326
- font-weight: normal;
327
- line-height: $line-height-base;
328
- text-align: center;
329
- background-color: $gray-lighter;
330
- border: 1px solid $input-group-addon-border-color;
331
- border-radius: $border-radius-base;
332
-
333
- &.input-small {
334
- padding: $padding-small-vertical $padding-small-horizontal;
335
- font-size: $font-size-small;
336
- border-radius: $border-radius-small;
337
- }
338
- &.input-large {
339
- padding: $padding-large-vertical $padding-large-horizontal;
340
- font-size: $font-size-large;
341
- border-radius: $border-radius-large;
342
- }
343
- }
344
-
345
- // Reset rounded corners
346
- .input-group .form-control:first-child,
347
- .input-group-addon:first-child,
348
- .input-group-btn:first-child > .btn,
349
- .input-group-btn:first-child > .dropdown-toggle,
350
- .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
351
- @include border-right-radius(0);
352
- }
353
- .input-group-addon:first-child {
354
- border-right: 0;
355
- }
356
- .input-group .form-control:last-child,
357
- .input-group-addon:last-child,
358
- .input-group-btn:last-child > .btn,
359
- .input-group-btn:last-child > .dropdown-toggle,
360
- .input-group-btn:first-child > .btn:not(:first-child) {
361
- @include border-left-radius(0);
362
- }
363
- .input-group-addon:last-child {
364
- border-left: 0;
365
- }
366
-
367
- // Button input groups
368
- // -------------------------
369
- .input-group-btn {
370
- position: relative;
371
- white-space: nowrap;
372
- }
373
- .input-group-btn > .btn {
374
- position: relative;
375
- // Jankily prevent input button groups from wrapping
376
- + .btn {
377
- margin-left: -4px;
378
- }
379
- // Bring the "active" button to the front
380
- &:hover,
381
- &:active {
382
- z-index: 2;
383
- }
384
- }
385
-
386
-
387
259
  // Inline forms
388
- // --------------------------------------------------
260
+ //
261
+ // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
262
+ // forms begin stacked on extra small (mobile) devices and then go inline when
263
+ // viewports reach <768px.
264
+ //
265
+ // Requires wrapping inputs and labels with `.form-group` for proper display of
266
+ // default HTML form controls and our custom form controls (e.g., input groups).
267
+ //
268
+ // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
389
269
 
390
270
  @mixin form-inline {
391
- .form-control,
392
- .radio,
393
- .checkbox {
394
- display: inline-block;
395
- }
396
- .radio,
397
- .checkbox {
398
- margin-top: 0;
399
- margin-bottom: 0;
271
+
272
+ // Kick in the inline
273
+ @media (min-width: $screen-tablet) {
274
+ // Inline-block all the things for "inline"
275
+ .form-group {
276
+ display: inline-block;
277
+ margin-bottom: 0;
278
+ vertical-align: middle;
279
+ }
280
+
281
+ // In navbar-form, allow folks to *not* use `.form-group`
282
+ .form-control {
283
+ display: inline-block;
284
+ }
285
+
286
+ // Remove default margin on radios/checkboxes that were used for stacking, and
287
+ // then undo the floating of radios and checkboxes to match (which also avoids
288
+ // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
289
+ .radio,
290
+ .checkbox {
291
+ display: inline-block;
292
+ margin-top: 0;
293
+ margin-bottom: 0;
294
+ padding-left: 0;
295
+ }
296
+ .radio input[type="radio"],
297
+ .checkbox input[type="checkbox"] {
298
+ float: none;
299
+ margin-left: 0;
300
+ }
400
301
  }
401
302
  }
402
303
 
403
304
  .form-inline { @include form-inline }
404
305
 
306
+
405
307
  // Horizontal forms
406
- // --------------------------------------------------
407
- // Horizontal forms are built on grid classes.
308
+ //
309
+ // Horizontal forms are built on grid classes and allow you to create forms with
310
+ // labels on the left and inputs on the right.
408
311
 
409
- .form-horizontal .control-label {
410
- padding-top: 6px;
312
+ .form-horizontal .control-label,
313
+ .form-horizontal .radio-inline,
314
+ .form-horizontal .checkbox-inline {
315
+ padding-top: $padding-base-vertical;
411
316
  }
412
317
 
413
318
  .form-horizontal {
@@ -2,6 +2,7 @@
2
2
  // Grid system
3
3
  // --------------------------------------------------
4
4
 
5
+
5
6
  // Set the container width, and override it for fixed navbars in media queries
6
7
  .container {
7
8
  @include container-fixed();
@@ -13,18 +14,18 @@
13
14
  }
14
15
 
15
16
  // Common styles for small and large grid columns
16
- .col-1,
17
- .col-2,
18
- .col-3,
19
- .col-4,
20
- .col-5,
21
- .col-6,
22
- .col-7,
23
- .col-8,
24
- .col-9,
25
- .col-10,
26
- .col-11,
27
- .col-12,
17
+ .col-xs-1,
18
+ .col-xs-2,
19
+ .col-xs-3,
20
+ .col-xs-4,
21
+ .col-xs-5,
22
+ .col-xs-6,
23
+ .col-xs-7,
24
+ .col-xs-8,
25
+ .col-xs-9,
26
+ .col-xs-10,
27
+ .col-xs-11,
28
+ .col-xs-12,
28
29
  .col-sm-1,
29
30
  .col-sm-2,
30
31
  .col-sm-3,
@@ -37,6 +38,18 @@
37
38
  .col-sm-10,
38
39
  .col-sm-11,
39
40
  .col-sm-12,
41
+ .col-md-1,
42
+ .col-md-2,
43
+ .col-md-3,
44
+ .col-md-4,
45
+ .col-md-5,
46
+ .col-md-6,
47
+ .col-md-7,
48
+ .col-md-8,
49
+ .col-md-9,
50
+ .col-md-10,
51
+ .col-md-11,
52
+ .col-md-12,
40
53
  .col-lg-1,
41
54
  .col-lg-2,
42
55
  .col-lg-3,
@@ -58,32 +71,49 @@
58
71
  }
59
72
 
60
73
 
61
-
74
+ // Extra small grid
62
75
  //
63
- // Container and grid column sizing
76
+ // Grid classes for extra small devices like smartphones. No offset, push, or
77
+ // pull classes are present here due to the size of the target.
64
78
  //
79
+ // Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
80
+ // it's full-width.
65
81
 
66
- // Tiny device columns (smartphones)
67
- .col-1,
68
- .col-2,
69
- .col-3,
70
- .col-4,
71
- .col-5,
72
- .col-6,
73
- .col-7,
74
- .col-8,
75
- .col-9,
76
- .col-10,
77
- .col-11,
78
- .col-12 {
82
+ .col-xs-1,
83
+ .col-xs-2,
84
+ .col-xs-3,
85
+ .col-xs-4,
86
+ .col-xs-5,
87
+ .col-xs-6,
88
+ .col-xs-7,
89
+ .col-xs-8,
90
+ .col-xs-9,
91
+ .col-xs-10,
92
+ .col-xs-11 {
79
93
  float: left;
80
94
  }
95
+ .col-xs-1 { width: percentage((1 / $grid-columns)); }
96
+ .col-xs-2 { width: percentage((2 / $grid-columns)); }
97
+ .col-xs-3 { width: percentage((3 / $grid-columns)); }
98
+ .col-xs-4 { width: percentage((4 / $grid-columns)); }
99
+ .col-xs-5 { width: percentage((5 / $grid-columns)); }
100
+ .col-xs-6 { width: percentage((6 / $grid-columns)); }
101
+ .col-xs-7 { width: percentage((7 / $grid-columns)); }
102
+ .col-xs-8 { width: percentage((8 / $grid-columns)); }
103
+ .col-xs-9 { width: percentage((9 / $grid-columns)); }
104
+ .col-xs-10 { width: percentage((10/ $grid-columns)); }
105
+ .col-xs-11 { width: percentage((11/ $grid-columns)); }
106
+ .col-xs-12 { width: 100%; }
81
107
 
82
- @for $i from 1 through $grid-columns {
83
- .col-#{$i} { width: percentage(($i / $grid-columns)); }
84
- }
85
108
 
86
- // Small device columns (phones to tablets)
109
+ // Small grid
110
+ //
111
+ // Columns, offsets, pushes, and pulls for the small device range, from phones
112
+ // to tablets.
113
+ //
114
+ // Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
115
+ // it's full-width.
116
+
87
117
  @media (min-width: $screen-tablet) {
88
118
  .container {
89
119
  max-width: $container-tablet;
@@ -99,30 +129,151 @@
99
129
  .col-sm-8,
100
130
  .col-sm-9,
101
131
  .col-sm-10,
102
- .col-sm-11,
103
- .col-sm-12 {
132
+ .col-sm-11 {
104
133
  float: left;
105
134
  }
106
-
107
- @for $i from 1 through $grid-columns {
108
- .col-sm-#{$i} { width: percentage(($i / $grid-columns)); }
109
- }
135
+ .col-sm-1 { width: percentage((1 / $grid-columns)); }
136
+ .col-sm-2 { width: percentage((2 / $grid-columns)); }
137
+ .col-sm-3 { width: percentage((3 / $grid-columns)); }
138
+ .col-sm-4 { width: percentage((4 / $grid-columns)); }
139
+ .col-sm-5 { width: percentage((5 / $grid-columns)); }
140
+ .col-sm-6 { width: percentage((6 / $grid-columns)); }
141
+ .col-sm-7 { width: percentage((7 / $grid-columns)); }
142
+ .col-sm-8 { width: percentage((8 / $grid-columns)); }
143
+ .col-sm-9 { width: percentage((9 / $grid-columns)); }
144
+ .col-sm-10 { width: percentage((10/ $grid-columns)); }
145
+ .col-sm-11 { width: percentage((11/ $grid-columns)); }
146
+ .col-sm-12 { width: 100%; }
110
147
 
111
148
  // Push and pull columns for source order changes
112
- @for $i from 1 through $grid-columns - 1 {
113
- .col-push-#{$i} { left: percentage(($i / $grid-columns)); }
114
- }
149
+ .col-sm-push-1 { left: percentage((1 / $grid-columns)); }
150
+ .col-sm-push-2 { left: percentage((2 / $grid-columns)); }
151
+ .col-sm-push-3 { left: percentage((3 / $grid-columns)); }
152
+ .col-sm-push-4 { left: percentage((4 / $grid-columns)); }
153
+ .col-sm-push-5 { left: percentage((5 / $grid-columns)); }
154
+ .col-sm-push-6 { left: percentage((6 / $grid-columns)); }
155
+ .col-sm-push-7 { left: percentage((7 / $grid-columns)); }
156
+ .col-sm-push-8 { left: percentage((8 / $grid-columns)); }
157
+ .col-sm-push-9 { left: percentage((9 / $grid-columns)); }
158
+ .col-sm-push-10 { left: percentage((10/ $grid-columns)); }
159
+ .col-sm-push-11 { left: percentage((11/ $grid-columns)); }
115
160
 
116
- @for $i from 1 through $grid-columns - 1 {
117
- .col-pull-#{$i} { right: percentage(($i / $grid-columns)); }
118
- }
161
+ .col-sm-pull-1 { right: percentage((1 / $grid-columns)); }
162
+ .col-sm-pull-2 { right: percentage((2 / $grid-columns)); }
163
+ .col-sm-pull-3 { right: percentage((3 / $grid-columns)); }
164
+ .col-sm-pull-4 { right: percentage((4 / $grid-columns)); }
165
+ .col-sm-pull-5 { right: percentage((5 / $grid-columns)); }
166
+ .col-sm-pull-6 { right: percentage((6 / $grid-columns)); }
167
+ .col-sm-pull-7 { right: percentage((7 / $grid-columns)); }
168
+ .col-sm-pull-8 { right: percentage((8 / $grid-columns)); }
169
+ .col-sm-pull-9 { right: percentage((9 / $grid-columns)); }
170
+ .col-sm-pull-10 { right: percentage((10/ $grid-columns)); }
171
+ .col-sm-pull-11 { right: percentage((11/ $grid-columns)); }
172
+
173
+ // Offsets
174
+ .col-sm-offset-1 { margin-left: percentage((1 / $grid-columns)); }
175
+ .col-sm-offset-2 { margin-left: percentage((2 / $grid-columns)); }
176
+ .col-sm-offset-3 { margin-left: percentage((3 / $grid-columns)); }
177
+ .col-sm-offset-4 { margin-left: percentage((4 / $grid-columns)); }
178
+ .col-sm-offset-5 { margin-left: percentage((5 / $grid-columns)); }
179
+ .col-sm-offset-6 { margin-left: percentage((6 / $grid-columns)); }
180
+ .col-sm-offset-7 { margin-left: percentage((7 / $grid-columns)); }
181
+ .col-sm-offset-8 { margin-left: percentage((8 / $grid-columns)); }
182
+ .col-sm-offset-9 { margin-left: percentage((9 / $grid-columns)); }
183
+ .col-sm-offset-10 { margin-left: percentage((10/ $grid-columns)); }
184
+ .col-sm-offset-11 { margin-left: percentage((11/ $grid-columns)); }
119
185
  }
120
186
 
121
- // Medium and large device columns (desktop and up)
187
+
188
+ // Medium grid
189
+ //
190
+ // Columns, offsets, pushes, and pulls for the desktop device range.
191
+ //
192
+ // Note that `.col-md-12` doesn't get floated on purpose—there's no need since
193
+ // it's full-width.
194
+
122
195
  @media (min-width: $screen-desktop) {
123
196
  .container {
124
197
  max-width: $container-desktop;
125
198
  }
199
+ .col-md-1,
200
+ .col-md-2,
201
+ .col-md-3,
202
+ .col-md-4,
203
+ .col-md-5,
204
+ .col-md-6,
205
+ .col-md-7,
206
+ .col-md-8,
207
+ .col-md-9,
208
+ .col-md-10,
209
+ .col-md-11 {
210
+ float: left;
211
+ }
212
+ .col-md-1 { width: percentage((1 / $grid-columns)); }
213
+ .col-md-2 { width: percentage((2 / $grid-columns)); }
214
+ .col-md-3 { width: percentage((3 / $grid-columns)); }
215
+ .col-md-4 { width: percentage((4 / $grid-columns)); }
216
+ .col-md-5 { width: percentage((5 / $grid-columns)); }
217
+ .col-md-6 { width: percentage((6 / $grid-columns)); }
218
+ .col-md-7 { width: percentage((7 / $grid-columns)); }
219
+ .col-md-8 { width: percentage((8 / $grid-columns)); }
220
+ .col-md-9 { width: percentage((9 / $grid-columns)); }
221
+ .col-md-10 { width: percentage((10/ $grid-columns)); }
222
+ .col-md-11 { width: percentage((11/ $grid-columns)); }
223
+ .col-md-12 { width: 100%; }
224
+
225
+ // Push and pull columns for source order changes
226
+ .col-md-push-1 { left: percentage((1 / $grid-columns)); }
227
+ .col-md-push-2 { left: percentage((2 / $grid-columns)); }
228
+ .col-md-push-3 { left: percentage((3 / $grid-columns)); }
229
+ .col-md-push-4 { left: percentage((4 / $grid-columns)); }
230
+ .col-md-push-5 { left: percentage((5 / $grid-columns)); }
231
+ .col-md-push-6 { left: percentage((6 / $grid-columns)); }
232
+ .col-md-push-7 { left: percentage((7 / $grid-columns)); }
233
+ .col-md-push-8 { left: percentage((8 / $grid-columns)); }
234
+ .col-md-push-9 { left: percentage((9 / $grid-columns)); }
235
+ .col-md-push-10 { left: percentage((10/ $grid-columns)); }
236
+ .col-md-push-11 { left: percentage((11/ $grid-columns)); }
237
+
238
+ .col-md-pull-1 { right: percentage((1 / $grid-columns)); }
239
+ .col-md-pull-2 { right: percentage((2 / $grid-columns)); }
240
+ .col-md-pull-3 { right: percentage((3 / $grid-columns)); }
241
+ .col-md-pull-4 { right: percentage((4 / $grid-columns)); }
242
+ .col-md-pull-5 { right: percentage((5 / $grid-columns)); }
243
+ .col-md-pull-6 { right: percentage((6 / $grid-columns)); }
244
+ .col-md-pull-7 { right: percentage((7 / $grid-columns)); }
245
+ .col-md-pull-8 { right: percentage((8 / $grid-columns)); }
246
+ .col-md-pull-9 { right: percentage((9 / $grid-columns)); }
247
+ .col-md-pull-10 { right: percentage((10/ $grid-columns)); }
248
+ .col-md-pull-11 { right: percentage((11/ $grid-columns)); }
249
+
250
+ // Offsets
251
+ .col-md-offset-1 { margin-left: percentage((1 / $grid-columns)); }
252
+ .col-md-offset-2 { margin-left: percentage((2 / $grid-columns)); }
253
+ .col-md-offset-3 { margin-left: percentage((3 / $grid-columns)); }
254
+ .col-md-offset-4 { margin-left: percentage((4 / $grid-columns)); }
255
+ .col-md-offset-5 { margin-left: percentage((5 / $grid-columns)); }
256
+ .col-md-offset-6 { margin-left: percentage((6 / $grid-columns)); }
257
+ .col-md-offset-7 { margin-left: percentage((7 / $grid-columns)); }
258
+ .col-md-offset-8 { margin-left: percentage((8 / $grid-columns)); }
259
+ .col-md-offset-9 { margin-left: percentage((9 / $grid-columns)); }
260
+ .col-md-offset-10 { margin-left: percentage((10/ $grid-columns)); }
261
+ .col-md-offset-11 { margin-left: percentage((11/ $grid-columns)); }
262
+ }
263
+
264
+
265
+ // Large grid
266
+ //
267
+ // Columns, offsets, pushes, and pulls for the large desktop device range.
268
+ //
269
+ // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
270
+ // it's full-width.
271
+
272
+ @media (min-width: $screen-large-desktop) {
273
+ .container {
274
+ max-width: $container-large-desktop;
275
+ }
276
+
126
277
  .col-lg-1,
127
278
  .col-lg-2,
128
279
  .col-lg-3,
@@ -133,23 +284,57 @@
133
284
  .col-lg-8,
134
285
  .col-lg-9,
135
286
  .col-lg-10,
136
- .col-lg-11,
137
- .col-lg-12 {
287
+ .col-lg-11 {
138
288
  float: left;
139
289
  }
140
- @for $i from 1 through $grid-columns {
141
- .col-lg-#{$i} { width: percentage(($i / $grid-columns)); }
142
- }
290
+ .col-lg-1 { width: percentage((1 / $grid-columns)); }
291
+ .col-lg-2 { width: percentage((2 / $grid-columns)); }
292
+ .col-lg-3 { width: percentage((3 / $grid-columns)); }
293
+ .col-lg-4 { width: percentage((4 / $grid-columns)); }
294
+ .col-lg-5 { width: percentage((5 / $grid-columns)); }
295
+ .col-lg-6 { width: percentage((6 / $grid-columns)); }
296
+ .col-lg-7 { width: percentage((7 / $grid-columns)); }
297
+ .col-lg-8 { width: percentage((8 / $grid-columns)); }
298
+ .col-lg-9 { width: percentage((9 / $grid-columns)); }
299
+ .col-lg-10 { width: percentage((10/ $grid-columns)); }
300
+ .col-lg-11 { width: percentage((11/ $grid-columns)); }
301
+ .col-lg-12 { width: 100%; }
143
302
 
144
- // Offsets
145
- @for $i from 1 through $grid-columns - 1 {
146
- .col-offset-#{$i} { margin-left: percentage(($i / $grid-columns)); }
147
- }
148
- }
303
+ // Push and pull columns for source order changes
304
+ .col-lg-push-1 { left: percentage((1 / $grid-columns)); }
305
+ .col-lg-push-2 { left: percentage((2 / $grid-columns)); }
306
+ .col-lg-push-3 { left: percentage((3 / $grid-columns)); }
307
+ .col-lg-push-4 { left: percentage((4 / $grid-columns)); }
308
+ .col-lg-push-5 { left: percentage((5 / $grid-columns)); }
309
+ .col-lg-push-6 { left: percentage((6 / $grid-columns)); }
310
+ .col-lg-push-7 { left: percentage((7 / $grid-columns)); }
311
+ .col-lg-push-8 { left: percentage((8 / $grid-columns)); }
312
+ .col-lg-push-9 { left: percentage((9 / $grid-columns)); }
313
+ .col-lg-push-10 { left: percentage((10/ $grid-columns)); }
314
+ .col-lg-push-11 { left: percentage((11/ $grid-columns)); }
149
315
 
150
- // Large desktops and up
151
- @media (min-width: $screen-large-desktop) {
152
- .container {
153
- max-width: $container-large-desktop;
154
- }
316
+ .col-lg-pull-1 { right: percentage((1 / $grid-columns)); }
317
+ .col-lg-pull-2 { right: percentage((2 / $grid-columns)); }
318
+ .col-lg-pull-3 { right: percentage((3 / $grid-columns)); }
319
+ .col-lg-pull-4 { right: percentage((4 / $grid-columns)); }
320
+ .col-lg-pull-5 { right: percentage((5 / $grid-columns)); }
321
+ .col-lg-pull-6 { right: percentage((6 / $grid-columns)); }
322
+ .col-lg-pull-7 { right: percentage((7 / $grid-columns)); }
323
+ .col-lg-pull-8 { right: percentage((8 / $grid-columns)); }
324
+ .col-lg-pull-9 { right: percentage((9 / $grid-columns)); }
325
+ .col-lg-pull-10 { right: percentage((10/ $grid-columns)); }
326
+ .col-lg-pull-11 { right: percentage((11/ $grid-columns)); }
327
+
328
+ // Offsets
329
+ .col-lg-offset-1 { margin-left: percentage((1 / $grid-columns)); }
330
+ .col-lg-offset-2 { margin-left: percentage((2 / $grid-columns)); }
331
+ .col-lg-offset-3 { margin-left: percentage((3 / $grid-columns)); }
332
+ .col-lg-offset-4 { margin-left: percentage((4 / $grid-columns)); }
333
+ .col-lg-offset-5 { margin-left: percentage((5 / $grid-columns)); }
334
+ .col-lg-offset-6 { margin-left: percentage((6 / $grid-columns)); }
335
+ .col-lg-offset-7 { margin-left: percentage((7 / $grid-columns)); }
336
+ .col-lg-offset-8 { margin-left: percentage((8 / $grid-columns)); }
337
+ .col-lg-offset-9 { margin-left: percentage((9 / $grid-columns)); }
338
+ .col-lg-offset-10 { margin-left: percentage((10/ $grid-columns)); }
339
+ .col-lg-offset-11 { margin-left: percentage((11/ $grid-columns)); }
155
340
  }