bootstrap-sass 2.1.1.0 → 2.2.1.0

Sign up to get free protection for your applications and to get access to all the features.

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