breakpoint 1.3 → 2.0.0

data/stylesheets/breakpoint/_context.scss

@@ -1,16 +1,34 @@
 //////////////////////////////
 // Private Breakpoint Variables
 //////////////////////////////
-$TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
+$private-breakpoint-context-holder: ();
+$private-breakpoint-context-placeholder: 0;
 
 //////////////////////////////
 // Breakpoint Get Context
 // $feature: Input feature to get it's current MQ context. Returns false if no context
 //////////////////////////////
 @function breakpoint-get-context($feature) {
-  @each $context in $TXkgdmFyaWFibGUhIEdvIGF3YXkh {
+  @each $context in $private-breakpoint-context-holder {
     @if $feature == nth($context, 1) {
-      @return nth($context, 2);
+      // strip feature name
+      $values: ();
+      @for $i from 2 through length($context) {
+        $values: append($values, nth($context, $i), comma);
+      }
+
+      $length: length($values) + 1;
+      @for $i from $length through $private-breakpoint-context-placeholder {
+        // Apply the Default Media type if feature is media
+        @if $feature == 'media' {
+          $values: append($values, $breakpoint-default-media, comma);
+        }
+        @else {
+          $values: append($values, false, comma);
+        }
+      }
+
+      @return $values;
     }
   }
 
@@ -20,15 +38,74 @@ $TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
 //////////////////////////////
 // Private function to set context
 //////////////////////////////
-@function U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value) {
+@function private-breakpoint-set-context($feature, $value) {
   @if $value == 'monochrome' {
     $feature: 'monochrome';
   }
 
-  $append: $feature;
-  $append: join($append, $value, space);
+  $placeholder-plus-one: ($private-breakpoint-context-placeholder + 1);
+
+  $holder: ();
+
+  @if $private-breakpoint-context-placeholder == 1 {
+    $holder: ($feature $value);
+    $private-breakpoint-context-holder: append($private-breakpoint-context-holder, $holder, comma);
+    @return true;
 
-  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: append($TXkgdmFyaWFibGUhIEdvIGF3YXkh, $append, comma);
+  } @else {
+    $feature-used: false;
+    @each $context in $private-breakpoint-context-holder {
+      @if nth($context, 1) == $feature {
+        $feature-used: $context;
+      }
+    }
+
+    @if $feature-used != false {
+      $holder: $feature;
+      @for $i from 2 through $placeholder-plus-one {
+        @if $i <= length($feature-used)  {
+          $holder: append($holder, nth($feature-used, $i), space);
+        } @elseif $i < $placeholder-plus-one {
+          $holder: append($holder, false, space);
+        } @else {
+          $holder: append($holder, $value, space);
+        }
+      }
+    }
+    @elseif $feature-used == false {
+      $holder: $feature;
+      @for $i from 2 through $placeholder-plus-one {
+        @if $i < $placeholder-plus-one {
+          // Apply the Default Media type if feature is media
+          @if $feature == 'media' {
+            $holder: append($holder, $breakpoint-default-media, space);
+          }
+          @else {
+            $holder: append($holder, false, space);
+          }
+
+        } @else {
+          $holder: append($holder, $value, space);
+        }
+      }
+    }
+
+    // Rebuild context
+    $rebuild: ();
+    @if $feature-used != false {
+      @each $context in $private-breakpoint-context-holder {
+        @if nth($context, 1) == nth($holder, 1) {
+          $rebuild: append($rebuild, $holder, comma);
+        } @else {
+          $rebuild: append($rebuild, $context, comma);
+        }
+      }
+
+    } @else {
+      $rebuild: append($private-breakpoint-context-holder, $holder, comma);
+    }
+    $private-breakpoint-context-holder: $rebuild;
+  }
 
   @return true;
 }
@@ -36,6 +113,7 @@ $TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
 //////////////////////////////
 // Private function to reset context
 //////////////////////////////
-@mixin TXkgcmVzZXQhIEdvIGF3YXkh {
-  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: ();
+@mixin private-breakpoint-reset-contexts {
+  $private-breakpoint-context-holder: ();
+  $private-breakpoint-context-placeholder: 0;
 }

data/stylesheets/breakpoint/_helpers.scss

@@ -1,18 +1,18 @@
 //////////////////////////////
 // Converts the input value to Base EMs
 //////////////////////////////
-@function breakpoint-to-base-em($value, $base-font-size: false) {
+@function breakpoint-to-base-em($value) {
   $value-unit: unit($value);
 
   // Will convert relative EMs into root EMs.
-  @if $base-font-size and type-of($base-font-size) == 'number' and $value-unit == 'em' {
-    $base-unit: unit($base-font-size);
+  @if $breakpoint-base-font-size and type-of($breakpoint-base-font-size) == 'number' and $value-unit == 'em' {
+    $base-unit: unit($breakpoint-base-font-size);
 
     @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
-      @return base-conversion($value) / base-conversion($base-font-size) * 1em;
+      @return base-conversion($value) / base-conversion($breakpoint-base-font-size) * 1em;
     }
     @else {
-      @warn '#{$base-font-size} is not set in valid units for font size!';
+      @warn '#{$breakpoint-base-font-size} is not set in valid units for font size!';
       @return false;
     }
   }
@@ -45,56 +45,107 @@
 //////////////////////////////
 // Returns whether the feature can have a min/max pair
 //////////////////////////////
+$breakpoint-min-max-features: 'color',
+                              'color-index',
+                              'aspect-ratio',
+                              'device-aspect-ratio',
+                              'device-height',
+                              'device-width',
+                              'height',
+                              'monochrome',
+                              'resolution',
+                              'width';
+
 @function breakpoint-min-max($feature) {
-  @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
-    @return true;
-  }
-  @else {
-    @return false;
+  @each $item in $breakpoint-min-max-features {
+    @if $feature == $item {
+      @return true;
+    }
   }
+  @return false;
 }
 
 //////////////////////////////
 // Returns whether the feature can have a string value
 //////////////////////////////
+$breakpoint-string-features:  'orientation',
+                              'scan',
+                              'color',
+                              'aspect-ratio',
+                              'device-aspect-ratio',
+                              'pointer',
+                              'luminosity';
+
 @function breakpoint-string-value($feature) {
-  @if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' {
-    @return true;
-  }
-  @else {
-    @return false;
+  @each $item in $breakpoint-string-features {
+    @if breakpoint-min-max($item) {
+      @if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
+        @return true;
+      }
+    }
+    @else if $feature == $item {
+      @return true;
+    }
   }
+  @return false;
 }
 
 //////////////////////////////
-// Experimental Media Queries
+// Returns whether the feature is a media type
 //////////////////////////////
-@function breakpoint-experimental($property, $prefix) {
-  @if $property == 'min-device-pixel-ratio' {
-    @if $prefix == 'webkit' {
-      @return '-#{$prefix}-#{$property}';
-    }
-    @else if $prefix == 'moz' {
-      @return 'min--#{$prefix}-device-pixel-ratio';
-    }
-    @else {
-      @warn '#{$property} is not fully supported in -#{prefix}';
-      @return 'ERROR';
+$breakpoint-media-types:  'all',
+                          'braille',
+                          'embossed',
+                          'handheld',
+                          'print',
+                          'projection',
+                          'screen',
+                          'speech',
+                          'tty',
+                          'tv';
+
+@function breakpoint-is-media($feature) {
+  @each $media in $breakpoint-media-types {
+    @if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
+      @return true;
     }
   }
-  @else if $property == 'max-device-pixel-ratio' {
-    @if $prefix == 'webkit' {
-      @return '-#{$prefix}-#{$property}';
-    }
-    @else if $prefix == 'moz' {
-      @return 'max--#{$prefix}-device-pixel-ratio';
-    }
-    @else {
-      @warn '#{$property} is not fully supported in -#{prefix}';
-      @return 'ERROR';
+
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature can stand alone
+//////////////////////////////
+$breakpoint-single-string-features: 'color',
+                                    'color-index',
+                                    'grid',
+                                    'monochrome';
+
+@function breakpoint-single-string($feature) {
+  @each $item in $breakpoint-single-string-features {
+    @if $feature == $item {
+      @return true;
     }
   }
-  @else {
-    @return '-#{$prefix}-#{$property}';
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature
+//////////////////////////////
+@function breakpoint-is-resolution($feature) {
+  $resolutions: 'device-pixel-ratio', 'dpr';
+
+  @if $breakpoint-resolutions {
+    $resolutions: append($resolutions, 'resolution');
   }
+
+  @each $reso in $resolutions {
+    @if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
+      @return true;
+    }
+  }
+
+  @return false;
 }

data/stylesheets/breakpoint/_no-query.scss

@@ -0,0 +1,15 @@
+@function breakpoint-no-query($query) {
+  @if type-of($query) == 'list' {
+    $keyword: nth($query, 1);
+
+    @if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') {
+      @return nth($query, 2);
+    }
+    @else {
+      @return false;
+    }
+  }
+  @else {
+    @return false;
+  }
+}

data/stylesheets/breakpoint/_parsers.scss

@@ -0,0 +1,104 @@
+//////////////////////////////
+// Import Parser Pieces
+//////////////////////////////
+@import "parsers/query";
+@import "parsers/single";
+@import "parsers/double";
+@import "parsers/triple";
+@import "parsers/resolution";
+
+//////////////////////////////
+// General Breakpoint Parser
+//////////////////////////////
+@function breakpoint-parse($query) {
+  $private-breakpoint-context-placeholder: $private-breakpoint-context-placeholder + 1;
+
+  // Set up Media Type
+  $query-print: '';
+
+  $force-all: (($breakpoint-force-media-all == true) and ($breakpoint-default-media == 'all'));
+  $empty-media: true;
+  @if ($force-all == true) or ($breakpoint-default-media != 'all') {
+    // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+    $query-print: $breakpoint-default-media;
+    $empty-media: false;
+  }
+
+
+  $query-resolution: false;
+
+  $query-holder: breakpoint-parse-query($query);
+
+
+
+  // Loop over each parsed out query and write it to $query-print
+  $first: true;
+
+  @each $feature in $query-holder {
+    $length: length($feature);
+
+    // Parse a single feature
+    @if ($length == 1) {
+      // Feature is currenty a list, grab the actual value
+      $feature: nth($feature, 1);
+
+      // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type
+      @if (breakpoint-is-media($feature)) {
+        @if ($force-all == true) or ($feature != 'all') {
+          // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+          $query-print: $feature;
+          $empty-media: false;
+
+          // Set Context
+          $context-setter: private-breakpoint-set-context(media, $query-print);
+        }
+      }
+      @else {
+        $parsed: breakpoint-parse-single($feature, $empty-media, $first);
+        $query-print: '#{$query-print} #{$parsed}';
+        $first: false;
+      }
+    }
+    // Parse a double feature
+    @else if ($length == 2) {
+      @if (breakpoint-is-resolution($feature) != false) {
+        $query-resolution: $feature;
+      }
+      @else {
+        $parsed: null;
+        // If it's a string/number pair,
+        // we check to see if one is a single-string value,
+        // then we parse it as a normal double
+        $alpha: nth($feature, 1);
+        $beta: nth($feature, 2);
+        @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) {
+          $parsed: breakpoint-parse-single($alpha, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+          $first: false;
+          $parsed: breakpoint-parse-single($beta, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+        }
+        @else {
+          $parsed: breakpoint-parse-double($feature, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+          $first: false;
+        }
+      }
+    }
+    // Parse a triple feature
+    @else if ($length == 3) {
+      $parsed: breakpoint-parse-triple($feature, $empty-media, $first);
+      $query-print: '#{$query-print} #{$parsed}';
+      $first: false;
+    }
+
+  }
+
+  @if ($query-resolution != false) {
+    $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first);
+  }
+
+  // @return 'all';
+
+  @return $query-print;
+}

data/stylesheets/breakpoint/_respond-to.scss

@@ -0,0 +1,55 @@
+////////////////////////
+// Default the Breakpoints variable
+////////////////////////
+$breakpoints: () !default;
+
+////////////////////////
+// Respond-to API Mixin
+////////////////////////
+
+@mixin respond-to($context) {
+  @if type-of($breakpoints) != 'list' {
+    // Just in case someone writes gibberish to the $breakpoints variable.
+    @warn "Your breakpoints aren't a list! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
+  }
+  @if length($breakpoints)  != 0 {
+    // If there's only one breakpoint, SASS will think it's a space separated list :P
+    @if length($breakpoints) == 2 and type-of(nth($breakpoints, 1)) != 'list' {
+      $breakpoints: append((), (nth($breakpoints, 1), nth($breakpoints, 2)));
+    }
+    @each $bkpt in $breakpoints {
+      @if $context == nth($bkpt, 1) {
+        $length: length($bkpt);
+        $mq: false !default;
+
+        @for $i from 2 through $length {
+          // If it's the first item, override $mq
+          @if $i == 2 {
+            $mq: nth($bkpt, $i);
+          }
+          // Else, join $mq
+          @else {
+            $mq: join($mq, nth($bkpt, $i));
+          }
+        }
+
+        @include breakpoint($mq) {
+          @content;
+        }
+      }
+    }
+  }
+  @else {
+    @warn "You haven't created any breakpoints yet! Make some already! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
+    @content;
+  }
+}
+
+//////////////////////////////
+// Add Breakpoint to Breakpoints
+//////////////////////////////
+@function add-breakpoint($name, $bkpt) {
+  $bkpt: $name $bkpt;
+  $output: append($breakpoints, $bkpt, 'comma');
+  @return $output;
+}