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

Sign up to get free protection for your applications and to get access to all the features.
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
  }