converter: new grid patch + rake convert

lib/bootstrap-sass/version.rb

@@ -1,4 +1,4 @@
 module Bootstrap
   VERSION = '3.1.0.2'
-  BOOTSTRAP_SHA = '769339ed18afbaf24121e1b4e5a12d0b6f1d1828'
+  BOOTSTRAP_SHA = '24bf4398802098097875a11f69dfd750a0550c87'
 end

tasks/converter/less_conversion.rb

@@ -154,46 +154,49 @@ def replace_asset_url(rule, type)
       replace_all rule, /url\((.*?)\)/, "url(if($bootstrap-sass-asset-helper, twbs-#{type}-path(\\1), \\1))"
     end
 
+    # convert recursively evaluated selector $list to @for loop
+    def mixin_all_grid_columns(css, selector: raise('pass class'), from: 1, to: raise('pass to'))
+      mxn_def = css.each_line.first.strip
+      step_body = (css =~ /\$list \{\n(.*?)\n[ ]*\}/m) && $1
+<<-SASS
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+#{mxn_def}
+  $list: '';
+  $i: #{from};
+  $list: "#{selector}";
+  @for $i from (#{from} + 1) through #{to} {
+    $list: "\#{$list}, #{selector}";
+  }
+  \#{$list} {
+#{unindent step_body, 2}
+  }
+}
+SASS
+    end
+
     # convert grid mixins LESS when => SASS @if
     def convert_grid_mixins(file)
       file = replace_rules file, /@mixin make-grid-columns/, comments: false do |css, pos|
-        mxn_def = css.each_line.first
-        classes = if css =~ /-columns-float/
-                    '.col-#{$class}-#{$i}'
-                  else
-                    '.col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}'
-                  end
-        body = (css =~ /\$list \{\n(.*?)\n[ ]*\}/m) && $1
-        unindent <<-SASS, 8
-        // [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)
-        #{mxn_def.strip}
-          $list: '';
-          $i: 1;
-          $list: "#{classes}";
-          @for $i from 2 through $grid-columns {
-            $list: "#{classes}, \#{$list}";
-          }
-          \#{$list} {
-        #{unindent body}
-          }
-        }
-        SASS
+        mixin_all_grid_columns css, selector: '.col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}', to: '$grid-columns'
+      end
+      file = replace_rules file, /@mixin float-grid-columns/, comments: false do |css, pos|
+        mixin_all_grid_columns css, selector: '.col-#{$class}-#{$i}', to: '$grid-columns'
       end
-      file = replace_rules file, /@mixin calc-grid/ do |css|
+      file = replace_rules file, /@mixin calc-grid-column/ do |css|
         css = indent css.gsub(/.*when (.*?) {/, '@if \1 {').gsub(/(?<=\$type) = (\w+)/, ' == \1').gsub(/(?<=-)(\$[a-z]+)/, '#{\1}')
         if css =~ /== width/
-          css = "@mixin calc-grid($index, $class, $type) {\n#{css}"
+          css = "@mixin calc-grid-column($index, $class, $type) {\n#{css}"
         elsif css =~ /== offset/
           css += "\n}"
         end
         css
       end
-      file = replace_rules file, /@mixin make-grid\(/ do |css|
+      file = replace_rules file, /@mixin loop-grid-columns/ do |css|
         unindent <<-SASS, 8
-        // [converter] This is defined recursively in LESS, but SASS supports real loops
-        @mixin make-grid($columns, $class, $type) {
+        // [converter] This is defined recursively in LESS, but Sass supports real loops
+        @mixin loop-grid-columns($columns, $class, $type) {
           @for $i from 0 through $columns {
-            @include calc-grid($i, $class, $type);
+            @include calc-grid-column($i, $class, $type);
           }
         }
         SASS

vendor/assets/stylesheets/bootstrap/_grid.scss

@@ -53,11 +53,7 @@
 // Columns, offsets, pushes, and pulls for extra small devices like
 // smartphones.
 
-@include make-grid-columns-float(xs);
-@include make-grid($grid-columns, xs, width);
-@include make-grid($grid-columns, xs, pull);
-@include make-grid($grid-columns, xs, push);
-@include make-grid($grid-columns, xs, offset);
+@include make-grid(xs);
 
 
 // Small grid
@@ -66,11 +62,7 @@
 // to tablets.
 
 @media (min-width: $screen-sm-min) {
-  @include make-grid-columns-float(sm);
-  @include make-grid($grid-columns, sm, width);
-  @include make-grid($grid-columns, sm, pull);
-  @include make-grid($grid-columns, sm, push);
-  @include make-grid($grid-columns, sm, offset);
+  @include make-grid(sm);
 }
 
 
@@ -79,11 +71,7 @@
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
 @media (min-width: $screen-md-min) {
-  @include make-grid-columns-float(md);
-  @include make-grid($grid-columns, md, width);
-  @include make-grid($grid-columns, md, pull);
-  @include make-grid($grid-columns, md, push);
-  @include make-grid($grid-columns, md, offset);
+  @include make-grid(md);
 }
 
 
@@ -92,9 +80,5 @@
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
 @media (min-width: $screen-lg-min) {
-  @include make-grid-columns-float(lg);
-  @include make-grid($grid-columns, lg, width);
-  @include make-grid($grid-columns, lg, pull);
-  @include make-grid($grid-columns, lg, push);
-  @include make-grid($grid-columns, lg, offset);
+  @include make-grid(lg);
 }

vendor/assets/stylesheets/bootstrap/_mixins.scss

@@ -787,13 +787,13 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-// [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)
+// [converter] This is defined recursively in LESS, but Sass supports real loops
 @mixin make-grid-columns() {
   $list: '';
   $i: 1;
   $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
-  @for $i from 2 through $grid-columns {
-    $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, #{$list}";
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
   }
   #{$list} {
     position: relative;
@@ -806,21 +806,21 @@
 }
 
 
-// [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)
-@mixin make-grid-columns-float($class) {
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin float-grid-columns($class) {
   $list: '';
   $i: 1;
   $list: ".col-#{$class}-#{$i}";
-  @for $i from 2 through $grid-columns {
-    $list: ".col-#{$class}-#{$i}, #{$list}";
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-#{$class}-#{$i}";
   }
   #{$list} {
     float: left;
   }
 }
 
 
-@mixin calc-grid($index, $class, $type) {
+@mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
       width: percentage(($index / $grid-columns));
@@ -843,14 +843,22 @@
   }
 }
 
-// [converter] This is defined recursively in LESS, but SASS supports real loops
-@mixin make-grid($columns, $class, $type) {
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin loop-grid-columns($columns, $class, $type) {
   @for $i from 0 through $columns {
-    @include calc-grid($i, $class, $type);
+    @include calc-grid-column($i, $class, $type);
   }
 }
 
 
+// Create grid for specific class
+@mixin make-grid($class) {
+  @include float-grid-columns($class);
+  @include loop-grid-columns($grid-columns, $class, width);
+  @include loop-grid-columns($grid-columns, $class, pull);
+  @include loop-grid-columns($grid-columns, $class, push);
+  @include loop-grid-columns($grid-columns, $class, offset);
+}
 
 // Form validation states
 //

vendor/assets/stylesheets/bootstrap/_popovers.scss

@@ -23,10 +23,10 @@
   white-space: normal;
 
   // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -10px; }
-  &.right   { margin-left: 10px; }
-  &.bottom  { margin-top: 10px; }
-  &.left    { margin-left: -10px; }
+  &.top     { margin-top: -$popover-arrow-width; }
+  &.right   { margin-left: $popover-arrow-width; }
+  &.bottom  { margin-top: $popover-arrow-width; }
+  &.left    { margin-left: -$popover-arrow-width; }
 }
 
 .popover-title {

vendor/assets/stylesheets/bootstrap/_variables.scss

@@ -529,9 +529,9 @@ $popover-arrow-color:                 #fff !default;
 //** Popover outer arrow width
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 //** Popover outer arrow color
-$popover-arrow-outer-color:           rgba(0,0,0,.25) !default;
+$popover-arrow-outer-color:           fadein($popover-border-color, 5%) !default;
 //** Popover outer arrow fallback color
-$popover-arrow-outer-fallback-color:  #999 !default;
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
 
 
 //== Labels