susy 1.0.9 → 2.2.14

data/sass/susy/language/susy/_validation.scss

@@ -0,0 +1,16 @@
+// Validation
+// ==========
+
+
+// Validate Column Math
+// --------------------
+@function valid-column-math(
+  $math,
+  $column-width
+) {
+  @if $math == static and not($column-width) {
+    @error 'Static math requires a valid column-width setting.';
+  }
+
+  @return $column-width;
+}

data/sass/susy/{_functions.scss → language/susyone/_functions.scss}

@@ -57,8 +57,8 @@ $rem-with-px-fallback               : true !default;
   $columns  : $total-columns
 ) {
   @if round($columns) != $columns {
-    @warn "Susy works best with integer column-spans.
-    For partial-columns, you may need to finesse the math by hand using functions directly.";
+    @warn "Susy works best with integer column-spans." +
+    "For partial-columns, you may need to finesse the math by hand using functions directly.";
   }
   @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
 }
@@ -92,7 +92,7 @@ $rem-with-px-fallback               : true !default;
   $outerwidth: if($width, $width, columns-width($columns));
 
   @if $width {
-    @if not $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, subtract); }
+    @if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); }
   } @else {
     @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
   }
@@ -190,7 +190,7 @@ $rem-with-px-fallback               : true !default;
     @if $request == 'position' {
       @return $pos;
     } @else {
-      @warn '"#{$request}"" is not a valid value for $request';
+      @warn '"#{$request}" is not a valid value for $request';
     }
   }
 }
@@ -245,7 +245,12 @@ $rem-with-px-fallback               : true !default;
 }
 
 // This name will be deprecated...
-@function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); }
+@function absolute-ems(
+  $ems,
+  $font-size: $base-font-size
+){
+  @return base-ems( $ems, $font-size);
+  }
 
 // Return a length, after any em-values have been sent through absolute-ems().
 //
@@ -288,7 +293,7 @@ $rem-with-px-fallback               : true !default;
         $layout     : $val;
         $has-layout : true;
       } @else {
-        @if ($has-layout) and (not $media) {
+        @if ($has-layout) and not($media) {
           $max: $val;
         } @else {
           @if $media {
@@ -314,12 +319,12 @@ $rem-with-px-fallback               : true !default;
           $min: nth($media,2);
         }
       } @else {
-        @warn "Can't compare incompatible units.
-         Using #{$min} for min-width, and #{$max} for max-width";
+        @warn "Can't compare incompatible units." +
+         "Using #{$min} for min-width, and #{$max} for max-width";
       }
       @if (length($media) > 2) {
-        @warn "You can only send two lengths: a min-width and an (optional) max-width.
-         You sent #{length($media)}: #{$media}";
+        @warn "You can only send two lengths: a min-width and an (optional) max-width." +
+         "You sent #{length($media)}: #{$media}";
       }
     }
   }
@@ -335,20 +340,16 @@ $rem-with-px-fallback               : true !default;
 // Return the nearest layout (column-count) above a given breakpoint.
 //
 // $min : The min-width media-query breakpoint above which to establish a new layout.
-@function get-layout (
+@function get-layout(
   $min
 ) {
-  $columns        : 1;
-  $layout-width   : container-outer-width($columns);
-  $return         : false;
-  $min            : fix-ems($min);
-
-  @if comparable($min, $layout-width) {
-    @while $min >= $layout-width {
-      $columns        : $columns + 1;
-      $layout-width   : container-outer-width($columns);
-    }
-    $return : $columns;
+  $min      : fix-ems($min);
+  $return   : false;
+
+  @if comparable($min, $column-width) {
+    $return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
+  } @else {
+    @warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
   }
 
   @return $return;

data/sass/susy/{_grid.scss → language/susyone/_grid.scss}

@@ -10,7 +10,7 @@
 // Apply the border-box sizing model to all elements
 // and adjust the grid math appropriately.
 @mixin border-box-sizing {
-  $border-box-sizing: true;
+  $border-box-sizing: true !global;
   * { @include box-sizing(border-box); }
 }
 
@@ -22,18 +22,34 @@
 //  $columns  : The number of columns in the Grid Layout.
 @mixin set-container-width(
   $columns  : $total-columns,
-  $style    : $container-style
+  $style    : $container-style,
+  $px-vals  : $pixel-values-only
 ){
   $width: container-outer-width($columns);
 
   @if $style == 'static' {
-    @include if-rem(width, $width);
+    @if $px-vals == true {
+      width: round(convert-length($width, px));
+    } @else {
+      @include rem(width, $width);
+    }
   } @else {
     @if $style == 'fluid' {
-      @if unit($width) == '%' { @include if-rem(width, $width); }
+      @if unit($width) == '%' {
+        @if $px-vals == true {
+          width: round(convert-length($width, px));
+        } @else {
+          @include rem(width, $width);
+        }
+      }
     } @else {
-      @include if-rem(max-width, $width);
-      @if $legacy-support-for-ie6 {
+      @if $px-vals == true {
+        max-width: round(convert-length($width, px));
+      } @else {
+        @include rem(max-width, $width);
+      }
+
+      @include for-legacy-browser(ie,"6") {
         @if unit($width) == 'rem' {
           _width: round(convert-length($width, px));
         } @else {
@@ -48,12 +64,18 @@
 //
 //  $columns  : The number of columns in the container.
 @mixin apply-container(
-  $columns  : $total-columns
+  $columns  : $total-columns,
+  $px-vals  : $pixel-values-only
 ){
   @include pie-clearfix;
   @include set-container-width($columns);
-  @include if-rem(padding-left, $grid-padding);
-  @include if-rem(padding-right, $grid-padding);
+  @if $px-vals == true {
+    padding-left: round(convert-length($grid-padding, px));
+    padding-right: round(convert-length($grid-padding, px));
+  } @else {
+    @include rem(padding-left, $grid-padding);
+    @include rem(padding-right, $grid-padding);
+  }
   margin: { left: auto; right: auto; }
 }
 
@@ -64,31 +86,16 @@
 //                        : Two optional lengths (representing min and max-width media-query breakpoints).
 // $media-layout-2 ...-10 : [optional] Same as $media-layout-1
 @mixin container(
-  $media-layout-1   : $total-columns,
-  $media-layout-2   : false,
-  $media-layout-3   : false,
-  $media-layout-4   : false,
-  $media-layout-5   : false,
-  $media-layout-6   : false,
-  $media-layout-7   : false,
-  $media-layout-8   : false,
-  $media-layout-9   : false,
-  $media-layout-10  : false
+  $media-layouts...
 ){
-  $media-layouts    : compact($media-layout-2,$media-layout-3,$media-layout-4,$media-layout-5,$media-layout-6,$media-layout-7,$media-layout-8,$media-layout-9,$media-layout-10);
-
-  @if is-default-layout($media-layout-1) {
-    @include apply-container();
-  } @else {
-    @include at-breakpoint($media-layout-1) {
-      @include apply-container();
-    }
-  }
+  $media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns);
 
   @each $ml in $media-layouts {
-    @if $ml {
+    @if is-default-layout($ml) {
+      @include apply-container;
+    } @else {
       @include at-breakpoint($ml) {
-        @include set-container-width;
+        @include apply-container;
       }
     }
   }
@@ -144,7 +151,9 @@
   } @else {
     float: $from;
     margin-#{$to}: gutter($context, $style);
-    @if $legacy-support-for-ie6 { display: inline; }
+    @include for-legacy-browser(ie, "6") {
+      display: inline;
+    }
   }
 }
 
@@ -162,9 +171,11 @@
   float: $omega-float;
   margin-#{$to}: 0;
 
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @include for-legacy-browser(ie, "6", "7") {
     *margin-#{$hack}: - $gutter-width;
-    @if $legacy-support-for-ie6 { display: inline; }
+    @include for-legacy-browser(ie, "6") {
+      display: inline;
+    }
   }
 }
 
@@ -179,12 +190,20 @@
   $from     : $from-direction
 ) {
   $from     : unquote($from);
-  $ie: if($n == "first", true, false);
-  @include adjust-support-for($ie6: $ie, $ie7: $ie, $ie8: $ie) {
-    &:#{format-nth($n,$selector)} { @include omega($from); }
+
+  &:#{format-nth($n,$selector)} {
+    @if $n == "first" {
+      @include omega($from);
+    } @else {
+      @include with-browser-ranges(css-sel3) {
+        @include omega($from);
+      }
+    }
   }
 }
 
+
+
 // ---------------------------------------------------------------------------
 // Resets
 
@@ -202,9 +221,11 @@
   width: auto;
   margin-#{$to}: auto;
 
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @include for-legacy-browser(ie, "6", "7") {
     *margin-#{$hack}: auto;
-    @if $legacy-support-for-ie6 { display: block; }
+    @include for-legacy-browser(ie, "6") {
+      display: block;
+    }
   }
 }
 
@@ -226,7 +247,7 @@
   float: $from;
   margin-#{$to}: gutter($context, $style);
 
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @include for-legacy-browser(ie, "6", "7") {
     *margin-#{$hack}: auto;
   }
 }
@@ -246,14 +267,19 @@
   $style    : fix-static-misalignment()
 ) {
   $from     : unquote($from);
-  $ie: if($n == "first", true, false);
-  @include adjust-support-for($ie6: $ie, $ie7: $ie, $ie8: $ie) {
-    &:#{format-nth($n,$selector)} {
+
+  &:#{format-nth($n,$selector)} {
+    @if $n == "first" {
       @include remove-omega($context, $from, $style);
+    } @else {
+      @include with-browser-ranges(css-sel3) {
+        @include remove-omega($context, $from, $style);
+      }
     }
   }
 }
 
+
 // ---------------------------------------------------------------------------
 // Change Settings
 
@@ -270,17 +296,17 @@
   $default-padding: $grid-padding;
 
   // use the new settings
-  $total-columns: $columns;
-  $column-width: $width;
-  $gutter-width: $gutter;
-  $grid-padding: $padding;
+  $total-columns: $columns !global;
+  $column-width: $width !global;
+  $gutter-width: $gutter !global;
+  $grid-padding: $padding !global;
 
   // apply to contents
   @content;
 
   // re-instate the defaults
-  $total-columns: $default-columns;
-  $column-width: $default-width;
-  $gutter-width: $default-gutter;
-  $grid-padding: $default-padding;
+  $total-columns: $default-columns !global;
+  $column-width: $default-width !global;
+  $gutter-width: $default-gutter !global;
+  $grid-padding: $default-padding !global;
 }

data/sass/susy/{_media.scss → language/susyone/_media.scss}

@@ -9,13 +9,13 @@
 ) {
   // store default $total-columns setting for later, then change it.
   $default-layout   : $total-columns;
-  $total-columns    : $layout-cols;
+  $total-columns    : $layout-cols !global;
 
   // apply children in this new layout context.
   @content;
 
   // return to default $total-columns setting.
-  $total-columns    : $default-layout;
+  $total-columns    : $default-layout !global;
 }
 
 // Nest a block of code inside a new media-query and layout context.
@@ -36,7 +36,7 @@
   $max          : nth($media-layout,3);
   $ie           : nth($media-layout,4);
 
-  @if (not $breakpoint-media-output) and (not $breakpoint-ie-output) and (not $breakpoint-raw-output) {
+  @if not($breakpoint-media-output) and not($breakpoint-ie-output) and not($breakpoint-raw-output) {
     @warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work.";
   }
 
@@ -44,7 +44,7 @@
   @if $min or $layout or $max {
 
     // If we don't have a layout, we create one based on the min-width.
-    @if not $layout {
+    @if not($layout) {
       $layout: get-layout($min);
     }
 
@@ -53,35 +53,31 @@
       // Set our new layout context.
       @include layout($layout) {
         @if $breakpoint-media-output {
-          // Capture current state of ie support and set new
-          $atbreak-legacy-ie-matrix: capture-legacy-ie-matrix();
-          @include set-legacy-ie-support;
-
-          @if $min and $max {
-            // Both $min and $max
-            @media (min-width: $min) and (max-width: $max) {
-              @content;
-            }
-          } @else {
-            @if (not $min) and (not $max) {
-              // Neither $min nor $max:
-              // We can create a breakpoint based on the number of columns in the layout.
-              $min: fix-ems(container-outer-width($width: false));
-            }
-            @if $min {
-              // Min only:
-              @media (min-width: $min) {
+          @include with-browser-ranges(css-mediaqueries) {
+            @if $min and $max {
+              // Both $min and $max
+              @media (min-width: $min) and (max-width: $max) {
                 @content;
               }
             } @else {
-              // Max only:
-              @media (max-width: $max) {
-                @content;
+              @if not($min) and not($max) {
+                // Neither $min nor $max:
+                // We can create a breakpoint based on the number of columns in the layout.
+                $min: fix-ems(container-outer-width($width: false));
+              }
+              @if $min {
+                // Min only:
+                @media (min-width: $min) {
+                  @content;
+                }
+              } @else {
+                // Max only:
+                @media (max-width: $max) {
+                  @content;
+                }
               }
             }
           }
-          // Return legacy-ie support to original
-          @include set-legacy-ie-support($atbreak-legacy-ie-matrix...);
         }
         // Set an IE fallback
         @if $ie and $breakpoint-ie-output {
@@ -89,10 +85,7 @@
             $ie: 'lt-ie9';
           }
           .#{$ie} & {
-            $atbreak-experimental-matrix: capture-experimental-matrix();
-            @include set-experimental-support($ms: true);
             @content;
-            @include set-experimental-support($atbreak-experimental-matrix...);
           }
         }
 
@@ -101,12 +94,12 @@
         }
       }
     } @else {
-      @warn "Something went horribly wrong here. Try adjusting your variables.";
+      @warn "We were unable to determine a layout for your breakpoint.";
     }
 
   } @else {
-    @warn "You need to provide either a valid layout (number of columns)
-    or a valid media-query min-width breakpoint (length).";
+    @warn "You need to provide either a valid layout (number of columns)"
+        + "or a valid media-query min-width breakpoint (length).";
   }
 
 }