bootstrap-sass 2.1.1.0 → 2.2.1.0

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.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

Files changed (61) hide show
  1. data/README.md +7 -5
  2. data/lib/bootstrap-sass/compass_functions.rb +9 -5
  3. data/vendor/assets/javascripts/bootstrap-affix.js +4 -2
  4. data/vendor/assets/javascripts/bootstrap-alert.js +2 -4
  5. data/vendor/assets/javascripts/bootstrap-button.js +5 -7
  6. data/vendor/assets/javascripts/bootstrap-carousel.js +12 -12
  7. data/vendor/assets/javascripts/bootstrap-collapse.js +9 -11
  8. data/vendor/assets/javascripts/bootstrap-dropdown.js +9 -11
  9. data/vendor/assets/javascripts/bootstrap-modal.js +20 -25
  10. data/vendor/assets/javascripts/bootstrap-popover.js +1 -1
  11. data/vendor/assets/javascripts/bootstrap-scrollspy.js +1 -1
  12. data/vendor/assets/javascripts/bootstrap-tab.js +5 -7
  13. data/vendor/assets/javascripts/bootstrap-tooltip.js +12 -11
  14. data/vendor/assets/javascripts/bootstrap-transition.js +5 -5
  15. data/vendor/assets/javascripts/bootstrap-typeahead.js +19 -9
  16. data/vendor/assets/stylesheets/bootstrap-responsive.scss +1 -0
  17. data/vendor/assets/stylesheets/bootstrap.scss +1 -0
  18. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +2 -2
  19. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +2 -2
  20. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +1 -1
  21. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +5 -8
  22. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +18 -17
  23. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +4 -4
  24. data/vendor/assets/stylesheets/bootstrap/_close.scss +3 -3
  25. data/vendor/assets/stylesheets/bootstrap/_code.scss +3 -3
  26. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +1 -1
  27. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +34 -7
  28. data/vendor/assets/stylesheets/bootstrap/_forms.scss +50 -18
  29. data/vendor/assets/stylesheets/bootstrap/_grid.scss +2 -1
  30. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +7 -6
  31. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +15 -14
  32. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -1
  33. data/vendor/assets/stylesheets/bootstrap/_media.scss +55 -0
  34. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +99 -62
  35. data/vendor/assets/stylesheets/bootstrap/_modals.scss +12 -15
  36. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +11 -11
  37. data/vendor/assets/stylesheets/bootstrap/_navs.scss +5 -4
  38. data/vendor/assets/stylesheets/bootstrap/_pager.scss +11 -10
  39. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +70 -13
  40. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +4 -4
  41. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +5 -5
  42. data/vendor/assets/stylesheets/bootstrap/_reset.scss +8 -6
  43. data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +1 -1
  44. data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +20 -1
  45. data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +1 -1
  46. data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +13 -5
  47. data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +16 -1
  48. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +1 -1
  49. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +5 -5
  50. data/vendor/assets/stylesheets/bootstrap/_tables.scss +11 -11
  51. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +4 -4
  52. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +3 -3
  53. data/vendor/assets/stylesheets/bootstrap/_type.scss +32 -26
  54. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +16 -1
  55. data/vendor/assets/stylesheets/bootstrap/_variables.scss +28 -6
  56. data/vendor/assets/stylesheets/bootstrap/_wells.scss +5 -5
  57. data/vendor/assets/stylesheets/bootstrap/bootstrap.scss +63 -0
  58. data/vendor/assets/stylesheets/bootstrap/responsive.scss +48 -0
  59. metadata +25 -6
  60. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +0 -42
  61. data/vendor/assets/stylesheets/_bootstrap.scss +0 -62
@@ -2,6 +2,7 @@
2
2
  // Grid system
3
3
  // --------------------------------------------------
4
4
 
5
+
5
6
  // Fixed (940px)
6
7
  @include grid-core($gridColumnWidth, $gridGutterWidth);
7
8
 
@@ -17,4 +18,4 @@
17
18
  [class*="span"].pull-right,
18
19
  .row-fluid [class*="span"].pull-right {
19
20
  float: right;
20
- }
21
+ }
@@ -6,6 +6,10 @@
6
6
  .hero-unit {
7
7
  padding: 60px;
8
8
  margin-bottom: 30px;
9
+ font-size: 18px;
10
+ font-weight: 200;
11
+ line-height: $baseLineHeight * 1.5;
12
+ color: $heroUnitLeadColor;
9
13
  background-color: $heroUnitBackground;
10
14
  @include border-radius(6px);
11
15
  h1 {
@@ -15,10 +19,7 @@
15
19
  color: $heroUnitHeadingColor;
16
20
  letter-spacing: -1px;
17
21
  }
18
- p {
19
- font-size: 18px;
20
- font-weight: 200;
21
- line-height: $baseLineHeight * 1.5;
22
- color: $heroUnitLeadColor;
22
+ li {
23
+ line-height: $baseLineHeight * 1.5; // Reset since we specify in type.scss
23
24
  }
24
- }
25
+ }
@@ -6,6 +6,8 @@
6
6
  // Base classes
7
7
  .label,
8
8
  .badge {
9
+ display: inline-block;
10
+ padding: 2px 4px;
9
11
  font-size: $baseFontSize * .846;
10
12
  font-weight: bold;
11
13
  line-height: 14px; // ensure proper line-height if floated
@@ -17,11 +19,11 @@
17
19
  }
18
20
  // Set unique padding and border-radii
19
21
  .label {
20
- padding: 1px 4px 2px;
21
22
  @include border-radius(3px);
22
23
  }
23
24
  .badge {
24
- padding: 1px 9px 2px;
25
+ padding-left: 9px;
26
+ padding-right: 9px;
25
27
  @include border-radius(9px);
26
28
  }
27
29
 
@@ -37,22 +39,21 @@ a {
37
39
 
38
40
  // Colors
39
41
  // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
40
-
41
42
  // Important (red)
42
- .label-important, .badge-important { background-color: $errorText; }
43
- .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
43
+ .label-important, .badge-important { background-color: $errorText; }
44
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
44
45
  // Warnings (orange)
45
- .label-warning, .badge-warning { background-color: $orange; }
46
- .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
46
+ .label-warning, .badge-warning { background-color: $orange; }
47
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
47
48
  // Success (green)
48
- .label-success, .badge-success { background-color: $successText; }
49
- .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
49
+ .label-success, .badge-success { background-color: $successText; }
50
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
50
51
  // Info (turquoise)
51
- .label-info, .badge-info { background-color: $infoText; }
52
- .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
52
+ .label-info, .badge-info { background-color: $infoText; }
53
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
53
54
  // Inverse (black)
54
- .label-inverse, .badge-inverse { background-color: $grayDark; }
55
- .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
55
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
56
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
56
57
 
57
58
  // Quick fix for labels/badges in buttons
58
59
  .btn {
@@ -67,4 +68,4 @@ a {
67
68
  .badge {
68
69
  top: 0;
69
70
  }
70
- }
71
+ }
@@ -13,4 +13,4 @@
13
13
  padding-right: $gridGutterWidth;
14
14
  padding-left: $gridGutterWidth;
15
15
  @include clearfix();
16
- }
16
+ }
@@ -0,0 +1,55 @@
1
+ // Media objects
2
+ // Source: http://stubbornella.org/content/?p=497
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Common styles
7
+ // -------------------------
8
+
9
+ // Clear the floats
10
+ .media,
11
+ .media-body {
12
+ overflow: hidden;
13
+ *overflow: visible;
14
+ zoom: 1;
15
+ }
16
+
17
+ // Proper spacing between instances of .media
18
+ .media,
19
+ .media .media {
20
+ margin-top: 15px;
21
+ }
22
+ .media:first-child {
23
+ margin-top: 0;
24
+ }
25
+
26
+ // For images and videos, set to block
27
+ .media-object {
28
+ display: block;
29
+ }
30
+
31
+ // Reset margins on headings for tighter default spacing
32
+ .media-heading {
33
+ margin: 0 0 5px;
34
+ }
35
+
36
+
37
+ // Media image alignment
38
+ // -------------------------
39
+
40
+ .media .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ .media .pull-right {
44
+ margin-left: 10px;
45
+ }
46
+
47
+
48
+ // Media list variation
49
+ // -------------------------
50
+
51
+ // Undo default ul/ol styles
52
+ .media-list {
53
+ margin-left: 0;
54
+ list-style: none;
55
+ }
@@ -9,7 +9,7 @@
9
9
  // Clearfix
10
10
  // --------
11
11
  // For clearing floats like a boss h5bp.com/q
12
- @mixin clearfix() {
12
+ @mixin clearfix {
13
13
  *zoom: 1;
14
14
  &:before,
15
15
  &:after {
@@ -23,7 +23,6 @@
23
23
  clear: both;
24
24
  }
25
25
  }
26
- .clearfix { @include clearfix(); }
27
26
 
28
27
  // Webkit-style focus
29
28
  // ------------------
@@ -104,7 +103,7 @@
104
103
  // CSS image replacement
105
104
  // -------------------------
106
105
  // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
107
- @mixin hide-text() {
106
+ @mixin hide-text {
108
107
  font: 0/0 a;
109
108
  color: transparent;
110
109
  text-shadow: none;
@@ -112,9 +111,9 @@
112
111
  border: 0;
113
112
  }
114
113
 
115
-
116
114
  // FONTS
117
115
  // --------------------------------------------------
116
+
118
117
  @mixin font-family-serif() {
119
118
  font-family: $serifFontFamily;
120
119
  }
@@ -147,11 +146,10 @@
147
146
  // --------------------------------------------------
148
147
 
149
148
  // Block level inputs
150
- // This is also a class, defined at the bottom of the file
151
- @mixin input-block-level() {
149
+ @mixin input-block-level {
152
150
  display: block;
153
151
  width: 100%;
154
- min-height: 30px; // Make inputs at least the height of their button counterpart
152
+ min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
155
153
  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
156
154
  }
157
155
 
@@ -177,10 +175,10 @@
177
175
  select,
178
176
  textarea {
179
177
  border-color: $borderColor;
180
- @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075)}); // Redeclare so transitions work
178
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
181
179
  &:focus {
182
180
  border-color: darken($borderColor, 10%);
183
- @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%)});
181
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
184
182
  }
185
183
  }
186
184
  // Give a small background color for input-prepend/-append
@@ -245,19 +243,20 @@
245
243
  }
246
244
 
247
245
  // Drop shadows
248
- @mixin box-shadow($shadow) {
246
+ @mixin box-shadow($shadow...) {
249
247
  -webkit-box-shadow: $shadow;
250
248
  -moz-box-shadow: $shadow;
251
249
  box-shadow: $shadow;
252
250
  }
253
251
 
254
252
  // Transitions
255
- @mixin transition($transition) {
253
+ @mixin transition($transition...) {
256
254
  -webkit-transition: $transition;
257
255
  -moz-transition: $transition;
258
256
  -o-transition: $transition;
259
257
  transition: $transition;
260
258
  }
259
+
261
260
  @mixin transition-delay($transition-delay) {
262
261
  -webkit-transition-delay: $transition-delay;
263
262
  -moz-transition-delay: $transition-delay;
@@ -293,6 +292,7 @@
293
292
  -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
294
293
  -o-transform: skew($x, $y);
295
294
  transform: skew($x, $y);
295
+ -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
296
296
  }
297
297
  @mixin translate3d($x, $y, $z) {
298
298
  -webkit-transform: translate3d($x, $y, $z);
@@ -306,9 +306,9 @@
306
306
  // Default value is `visible`, but can be changed to `hidden
307
307
  // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
308
308
  @mixin backface-visibility($visibility){
309
- -webkit-backface-visibility: $visibility;
310
- -moz-backface-visibility: $visibility;
311
- backface-visibility: $visibility;
309
+ -webkit-backface-visibility: $visibility;
310
+ -moz-backface-visibility: $visibility;
311
+ backface-visibility: $visibility;
312
312
  }
313
313
 
314
314
  // Background clipping
@@ -320,7 +320,7 @@
320
320
  }
321
321
 
322
322
  // Background sizing
323
- @mixin background-size($size){
323
+ @mixin background-size($size) {
324
324
  -webkit-background-size: $size;
325
325
  -moz-background-size: $size;
326
326
  -o-background-size: $size;
@@ -373,8 +373,8 @@
373
373
 
374
374
  // Opacity
375
375
  @mixin opacity($opacity) {
376
- opacity: $opacity;
377
- filter: alpha(opacity=#{$opacity * 100});
376
+ opacity: $opacity / 100;
377
+ filter: alpha(opacity=$opacity);
378
378
  }
379
379
 
380
380
 
@@ -386,6 +386,7 @@
386
386
  @mixin translucent-background($color: $white, $alpha: 1) {
387
387
  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
388
388
  }
389
+
389
390
  @mixin translucent-border($color: $white, $alpha: 1) {
390
391
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
391
392
  @include background-clip(padding-box);
@@ -397,7 +398,7 @@
397
398
  text-shadow: $textShadow;
398
399
  @include gradient-vertical($primaryColor, $secondaryColor);
399
400
  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
400
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
401
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
401
402
  }
402
403
 
403
404
  // Gradients
@@ -412,7 +413,7 @@
412
413
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
413
414
  }
414
415
  @mixin gradient-vertical($startColor: #555, $endColor: #333) {
415
- background-color: mix($startColor, $endColor, 60%);
416
+ background-color: mix($startColor, $endColor, 62.5%);
416
417
  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
417
418
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
418
419
  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
@@ -453,12 +454,12 @@
453
454
  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
454
455
  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
455
456
  background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
456
- background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(0,0,0, 0.0) 25%, rgba(0,0,0, 0.0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(0,0,0, 0.0) 75%, rgba(0,0,0, 0.0));
457
+ background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
457
458
  }
458
459
 
459
460
  // Reset filters for IE
460
461
  @mixin reset-filter() {
461
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
462
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
462
463
  }
463
464
 
464
465
 
@@ -561,67 +562,97 @@
561
562
  .container,
562
563
  .navbar-static-top .container,
563
564
  .navbar-fixed-top .container,
564
- .navbar-fixed-bottom .container { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth); }
565
+ .navbar-fixed-bottom .container {
566
+ @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
567
+ }
565
568
 
566
- @include grid-core-spanX($gridColumns, $gridColumnWidth, $gridGutterWidth);
567
- @include grid-core-offsetX($gridColumns, $gridColumnWidth, $gridGutterWidth);
569
+ // generate .spanX and .offsetX
570
+ @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
571
+ @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
568
572
  }
569
- @mixin grid-core-spanX($cols, $columnWidth, $gutterWidth) {
570
- @for $i from 1 through $cols {
571
- .span#{$i} { @include grid-core-span($i, $columnWidth, $gutterWidth) };
573
+
574
+ @mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
575
+ @while $gridColumns > 0 {
576
+ .span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
577
+ $gridColumns: $gridColumns - 1;
572
578
  }
573
579
  }
574
- @mixin grid-core-span($columns, $columnWidth, $gutterWidth) {
575
- width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
576
- }
577
- @mixin grid-core-offsetX($cols, $columnWidth, $gutterWidth) {
578
- @for $i from 1 through $cols {
579
- .offset#{$i} { @include grid-core-offset($i, $columnWidth, $gutterWidth) };
580
+
581
+ @mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
582
+ @while $gridColumns > 0 {
583
+ .offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
584
+ $gridColumns: $gridColumns - 1;
580
585
  }
581
586
  }
582
- @mixin grid-core-offset($columns, $columnWidth, $gutterWidth) {
583
- margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
587
+
588
+ @mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
589
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
590
+ }
591
+
592
+ @mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
593
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
584
594
  }
585
595
 
586
- @mixin grid-fluid ($columnWidth, $gutterWidth) {
596
+
597
+
598
+ @mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
587
599
  .row-fluid {
588
600
  width: 100%;
589
601
  @include clearfix();
590
602
  [class*="span"] {
591
603
  @include input-block-level();
592
604
  float: left;
593
- margin-left: $gutterWidth;
594
- *margin-left: $gutterWidth - (.5px / $gridRowWidth * 100 * 1%);
605
+ margin-left: $fluidGridGutterWidth;
606
+ *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
595
607
  }
596
608
  [class*="span"]:first-child {
597
609
  margin-left: 0;
598
610
  }
599
611
 
600
- // generate .spanX and .offsetX
601
- @for $i from 1 through $gridColumns {
602
- .span#{$i} { @include grid-fluid-span($i, $columnWidth, $gutterWidth); }
603
- .offset#{$i} { @include grid-fluid-offset($i, $columnWidth, $gutterWidth); }
604
- .offset#{$i}:first-child { @include grid-fluid-offsetFirstChild($i, $columnWidth, $gutterWidth); }
612
+ // Space grid-sized controls properly if multiple per line
613
+ .controls-row [class*="span"] + [class*="span"] {
614
+ margin-left: $fluidGridGutterWidth;
605
615
  }
616
+
617
+ // generate .spanX and .offsetX
618
+ @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
619
+ @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
620
+ }
621
+ }
622
+
623
+ @mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
624
+ @while $gridColumns > 0 {
625
+ .span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
626
+ $gridColumns: $gridColumns - 1;
627
+ }
628
+ }
629
+
630
+ @mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
631
+ @while $gridColumns > 0 {
632
+ .offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
633
+ .offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
634
+ $gridColumns: $gridColumns - 1;
606
635
  }
607
636
  }
608
637
 
609
- @mixin grid-fluid-span($columns, $columnWidth, $gutterWidth){
610
- width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
611
- *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5px / $gridRowWidth * 100 * 1%);
638
+ @mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
639
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
640
+ *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
612
641
  }
613
642
 
614
- @mixin grid-fluid-offset($columns, $columnWidth, $gutterWidth) {
615
- margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) + ($gutterWidth*2);
616
- *margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5px / $gridRowWidth * 100 * 1%) + ($gutterWidth * 2) - (.5px / $gridRowWidth * 100 * 1%);
643
+ @mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
644
+ margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
645
+ *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
617
646
  }
618
647
 
619
- @mixin grid-fluid-offsetFirstChild($columns, $columnWidth, $gutterWidth) {
620
- margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) + ($gutterWidth);
621
- *margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5px / $gridRowWidth * 100 * 1%) + $gutterWidth - (.5px / $gridRowWidth * 100 * 1%);
648
+ @mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
649
+ margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
650
+ *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
622
651
  }
623
652
 
624
- @mixin grid-input($columnWidth, $gutterWidth) {
653
+
654
+
655
+ @mixin grid-input($gridColumnWidth, $gridGutterWidth) {
625
656
  input,
626
657
  textarea,
627
658
  .uneditable-input {
@@ -630,18 +661,24 @@
630
661
 
631
662
  // Space grid-sized controls properly if multiple per line
632
663
  .controls-row [class*="span"] + [class*="span"] {
633
- margin-left: $gutterWidth;
664
+ margin-left: $gridGutterWidth;
634
665
  }
635
666
 
636
- @for $i from 1 through $gridColumns {
637
- input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include grid-input-span($i, $columnWidth, $gutterWidth); }
638
- }
667
+ // generate .spanX
668
+ @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
639
669
  }
640
670
 
641
- @mixin grid-input-span($columns, $columnWidth, $gutterWidth) {
642
- width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 14;
671
+ @mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
672
+ @while $gridColumns > 0 {
673
+ input.span#{$gridColumns},
674
+ textarea.span#{$gridColumns},
675
+ .uneditable-input.span#{$gridColumns} {
676
+ @include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
677
+ }
678
+ $gridColumns: $gridColumns - 1;
679
+ }
643
680
  }
644
681
 
645
- .input-block-level {
646
- @include input-block-level;
647
- }
682
+ @mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
683
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
684
+ }