Big mixing upgrade, many from https://github.com/thoughtbot/bourbon/t…

…ree/5bdaa07c0fcfa6f1e3507185fa805741eeb33952 before they deprecated the old webkit gradients syntax (Kickoff still needs it)

scss/_colour-palette.scss

@@ -115,4 +115,4 @@ $info-background               : #d9edf7;
 $info-border                   : darken(adjust-hue($info-background, -10), 7%);
 
 // <hr> border colour
-$hrBorder                      : lighten(#000, 70%)er;
+$hr-border                     : lighten(#000, 70%);

scss/_components.scss

@@ -21,6 +21,7 @@ img {
 	&.left {
 		margin:0 20px 0 0;
 	}
+
 	&.right {
 		margin:0 0 0 20px;
 	}

scss/_forms.scss

@@ -591,7 +591,7 @@ textarea {
 		text-align: center;
 		text-shadow: 0 1px 0 #fff;
 		vertical-align: middle;
-		background-color: lighten(#000, 70%)er;
+		background-color: lighten(#000, 70%);
 		border: 1px solid #ccc;
 	}
 	& .add-on,

scss/_functions.scss

@@ -1,9 +1,8 @@
 @import "functions/compact";
-@import "functions/deprecated-webkit-gradient";
+@import "functions/golden-ratio";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
 @import "functions/px-to-em";
 @import "functions/radial-gradient";
-@import "functions/render-gradients";
 @import "functions/tint-shade";
 @import "functions/transition-property-name";

scss/_helpers.scss

@@ -0,0 +1,8 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";

scss/_mixins.scss

@@ -5,6 +5,7 @@
 // * RESPONSIVE
 // * CSS3
 // * UTILITY MIXINS
+// * HiDPI
 // * FORMS
 
 // === Vendor prefix ===
@@ -23,10 +24,12 @@
 // === COMPONENTS ===
 @import "mixins/buttons";
 
-
 // === UTILITY MIXINS ===
 @import "mixins/utility";
 
+// === HiDPI ===
+@import "mixins/hidpi";
+
 // === FORMS ===
 @import "mixins/forms";
 

scss/_typography.scss

@@ -240,7 +240,7 @@ dd {
 hr {
 	margin: ($base-line-height + px) 0;
 	border: 0;
-	border-top: 1px solid $hrBorder;
+	border-top: 1px solid $hr-border;
 	border-bottom: 1px solid #fff;
 }
 

scss/_utilities.scss

@@ -59,11 +59,11 @@
 .clear	{ clear:both; float:none; }
 
 .mb0 { margin-bottom: 0 !important;}
-.mb1 { margin-bottom: $base-font-size !important;}
-.mb2 { margin-bottom: $base-font-size * 1.5 !important;}
-.mb3 { margin-bottom: $base-font-size * 1.875 !important;}
+.mb1 { margin-bottom: ($base-font-size) + px !important;}
+.mb2 { margin-bottom: ($base-font-size * 1.5) + px !important;}
+.mb3 { margin-bottom: ($base-font-size * 1.875) + px !important;}
 
 .mt0 { margin-top:    0 !important;}
-.mt1 { margin-top:    $base-font-size !important;}
-.mt2 { margin-top:    $base-font-size * 1.5 !important;}
-.mt3 { margin-top:    $base-font-size * 1.875 !important;}
+.mt1 { margin-top:    ($base-font-size) + px !important;}
+.mt2 { margin-top:    ($base-font-size * 1.5) + px !important;}
+.mt3 { margin-top:    ($base-font-size * 1.875) + px !important;}

scss/functions/_golden-ratio.scss

@@ -0,0 +1,3 @@
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, $golden)
+}

scss/functions/_linear-gradient.scss

@@ -1,6 +1,13 @@
-@function linear-gradient($gradients...) {
-	$type: linear;
-	$type-gradient: append($type, $gradients, comma);
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
+  $pos-type: type-of(nth($pos, 1));
 
-	@return $type-gradient;
+  // if $pos doesn't exist, fix $gradient
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $gradients: zip($pos $gradients);
+    $pos: false;
+  }
+
+  $type-gradient: $type, $pos, $gradients;
+  @return $type-gradient;
 }

scss/functions/_modular-scale.scss

@@ -1,40 +1,66 @@
+// Scaling Varaibles
+$golden:           1.618;
+$minor-second:     1.067;
+$major-second:     1.125;
+$minor-third:      1.2;
+$major-third:      1.25;
+$perfect-fourth:   1.333;
+$augmented-fourth: 1.414;
+$perfect-fifth:    1.5;
+$minor-sixth:      1.6;
+$major-sixth:      1.667;
+$minor-seventh:    1.778;
+$major-seventh:    1.875;
+$octave:           2;
+$major-tenth:      2.5;
+$major-eleventh:   2.667;
+$major-twelfth:    3;
+$double-octave:    4;
+
 @function modular-scale($value, $increment, $ratio) {
+  $v1: nth($value, 1);
+  $v2: nth($value, length($value));
+  $value: $v1;
+
+  // scale $v2 to just above $v1
+  @while $v2 > $v1 {
+    $v2: ($v2 / $ratio); // will be off-by-1
+  }
+  @while $v2 < $v1 {
+    $v2: ($v2 * $ratio); // will fix off-by-1
+  }
+
+  // check AFTER scaling $v2 to prevent double-counting corner-case
+  $double-stranded: $v2 > $v1;
+
   @if $increment > 0 {
     @for $i from 1 through $increment {
-      $value: ($value * $ratio);
+      @if $double-stranded and ($v1 * $ratio) > $v2 {
+        $value: $v2;
+        $v2: ($v2 * $ratio);
+      } @else {
+        $v1: ($v1 * $ratio);
+        $value: $v1;
+      }
     }
   }
 
   @if $increment < 0 {
-    $increment: abs($increment);
-    @for $i from 1 through $increment {
-      $value: ($value / $ratio);
+    // adjust $v2 to just below $v1
+    @if $double-stranded {
+      $v2: ($v2 / $ratio);
+    }
+
+    @for $i from $increment through -1 {
+      @if $double-stranded and ($v1 / $ratio) < $v2 {
+        $value: $v2;
+        $v2: ($v2 / $ratio);
+      } @else {
+        $v1: ($v1 / $ratio);
+        $value: $v1;
+      }
     }
   }
 
   @return $value;
 }
-
-//  div {
-//                     Increment Up GR with positive value
-//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
-//
-//                     Increment Down GR with negative value
-//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
-//
-//                     Can be used with ceil(round up) or floor(round down)
-//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
-//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
-//  }
-//
-// modularscale.com
-
-@function golden-ratio($value, $increment) {
-  @return modular-scale($value, $increment, 1.618)
-}
-
-//  div {
-//    font-size: golden-ratio(14px, 1); // returns: 22.652px
-//  }
-//
-// goldenratiocalculator.com

scss/functions/_px-to-em.scss

@@ -3,6 +3,6 @@
 // if the parent is another value say 24px write em(12, 24)
 
 @function em($pxval, $base: 16) {
-	@return ($pxval / $base) * 1em;
+  @return ($pxval / $base) * 1em;
 }
 

scss/functions/_radial-gradient.scss

@@ -4,54 +4,20 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
-                       $pos: 50% 50%,
-                       $shape-size: ellipse cover) {
+                       $pos: null,
+                       $shape-size: null) {
 
-  @each $value in $G1, $G2 {
-    $first-val: nth($value, 1);
-    $pos-type:  type-of($first-val);
-
-    @if ($pos-type != color) or ($first-val != "transparent") {
-      @if ($pos-type == number)
-      or ($first-val == "center")
-      or ($first-val == "top")
-      or ($first-val == "right")
-      or ($first-val == "bottom")
-      or ($first-val == "left") {
-
-        $pos: $value;
-
-        @if $pos == $G1 {
-          $G1: false;
-        }
-      }
-
-      @else if
-         ($first-val == "ellipse")
-      or ($first-val == "circle")
-      or ($first-val == "closest-side")
-      or ($first-val == "closest-corner")
-      or ($first-val == "farthest-side")
-      or ($first-val == "farthest-corner")
-      or ($first-val == "contain")
-      or ($first-val == "cover") {
-
-        $shape-size: $value;
-
-        @if $value == $G1 {
-          $G1: false;
-        }
-
-        @else if $value == $G2 {
-          $G2: false;
-        }
-      }
-    }
-  }
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
 
   $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  $type-gradient: $type, $shape-size $pos, $gradient;
   @return $type-gradient;
 }
+
+

scss/functions/_tint-shade.scss

@@ -1,9 +1,9 @@
 // Add percentage of white to a color
 @function tint($color, $percent){
-	@return mix(white, $color, $percent);
+  @return mix(white, $color, $percent);
 }
 
 // Add percentage of black to a color
 @function shade($color, $percent){
-	@return mix(black, $color, $percent);
+  @return mix(black, $color, $percent);
 }

scss/helpers/_deprecated-webkit-gradient.scss

@@ -0,0 +1,39 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+  @return $gradient;
+}