rapido-css 0.0.1

data/stylesheets/susy/_susy_support.scss

@@ -0,0 +1,198 @@
+// @@@ These helpers only live here until they land in Compass.
+
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "compass/support";
+
+// ---------------------------------------------------------------------------
+// Helpers
+
+// A debug tool for checking browser support
+@mixin debug-support-matrix($experimental: true, $ie: true) {
+  @debug  #{'$moz-'}$experimental-support-for-mozilla
+          #{'$webkit-'}$experimental-support-for-webkit
+          #{'$microsoft-'}$experimental-support-for-microsoft
+          #{'$opera-'}$experimental-support-for-opera
+          #{'$khtml-'}$experimental-support-for-khtml;
+  @debug  #{'$ie6-'}$legacy-support-for-ie6
+          #{'$ie7-'}$legacy-support-for-ie7
+          #{'$ie8-'}$legacy-support-for-ie8;
+}
+
+// Capture the current exerimental support settings
+@function capture-experimental-matrix() {
+  @return $experimental-support-for-mozilla
+          $experimental-support-for-webkit
+          $experimental-support-for-microsoft
+          $experimental-support-for-opera
+          $experimental-support-for-khtml;
+}
+
+// Capture the current legacy-ie support settings
+@function capture-legacy-ie-matrix() {
+  @return $legacy-support-for-ie6
+          $legacy-support-for-ie7
+          $legacy-support-for-ie8;
+}
+
+// Capture and store support
+$experimental-matrix: capture-experimental-matrix();
+$legacy-ie-matrix: capture-legacy-ie-matrix();
+
+@mixin capture-experimental-matrix {
+  $experimental-matrix: capture-experimental-matrix();
+}
+
+@mixin capture-legacy-ie-matrix {
+  $legacy-ie-matrix: capture-legacy-ie-matrix();
+}
+
+@mixin capture-support-matrix {
+  @include capture-experimental-matrix;
+  @include capture-legacy-ie-matrix;
+}
+
+// Change the experimental-support settings in specific contexts.
+@mixin set-experimental-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  $experimental-support-for-mozilla   : $moz;
+  $experimental-support-for-webkit    : $webkit;
+  $experimental-support-for-microsoft : $ms;
+  $experimental-support-for-opera     : $o;
+  $experimental-support-for-khtml     : $khtml;
+}
+
+@mixin capture-and-set-experimental(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+}
+
+@mixin capture-and-adjust-experimental(
+  $moz    : $experimental-support-for-mozilla,
+  $webkit : $experimental-support-for-webkit,
+  $ms     : $experimental-support-for-microsoft,
+  $o      : $experimental-support-for-opera,
+  $khtml  : $experimental-support-for-khtml
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+}
+
+// Change the legacy-support-for-ie* settings in specific contexts.
+@mixin set-legacy-ie-support(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  $legacy-support-for-ie6: $ie6;
+  $legacy-support-for-ie7: $ie7;
+  $legacy-support-for-ie8: $ie8;
+}
+
+@mixin capture-and-set-legacy-ie(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  @include capture-legacy-ie-matrix;
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+@mixin capture-and-adjust-legacy-ie(
+  $ie6: $legacy-support-for-ie6,
+  $ie7: $legacy-support-for-ie7,
+  $ie8: $legacy-support-for-ie8
+) {
+  @include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-set-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture the current state
+  @include capture-support-matrix;
+
+  // Change support settings
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-adjust-support(
+  $moz        : $experimental-support-for-mozilla,
+  $webkit     : $experimental-support-for-webkit,
+  $ms         : $experimental-support-for-microsoft,
+  $o          : $experimental-support-for-opera,
+  $khtml      : $experimental-support-for-khtml,
+  $ie6        : $legacy-support-for-ie6,
+  $ie7        : $legacy-support-for-ie7,
+  $ie8        : $legacy-support-for-ie8
+) {
+  @include capture-and-set-support($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8);
+}
+
+
+// This mixin allows you to change the experimental support settings for
+// child (@content) styles.
+@mixin with-only-support-for(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture current state
+  $wo-experimental-matrix : capture-experimental-matrix();
+  $wo-legacy-ie-matrix    : capture-legacy-ie-matrix();
+
+  // Set new states
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+
+  // Apply styles
+  @content;
+
+  // Return to original support settings
+  @include set-experimental-support($wo-experimental-matrix...);
+  @include set-legacy-ie-support($wo-legacy-ie-matrix...);
+}
+
+// This mixin is a shortcut for making slight adjustments to browser support
+// for child (@content) styles
+@mixin adjust-support-for(
+    $moz        : $experimental-support-for-mozilla,
+    $webkit     : $experimental-support-for-webkit,
+    $ms         : $experimental-support-for-microsoft,
+    $o          : $experimental-support-for-opera,
+    $khtml      : $experimental-support-for-khtml,
+    $ie6        : $legacy-support-for-ie6,
+    $ie7        : $legacy-support-for-ie7,
+    $ie8        : $legacy-support-for-ie8
+) {
+  @include with-only-support-for($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8) {
+    @content;
+  }
+}

data/stylesheets/susy/_susy_units.scss

@@ -0,0 +1,159 @@
+// @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+// Base font size in pixels, if not already defined.
+// Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+// Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+// Convert any CSS <length> or <percentage> value to any another.
+//
+// @param $length
+//   A css <length> or <percentage> value
+//
+// @param $to-unit
+//   String matching a css unit keyword, e.g. 'em', '%', etc.
+//
+// @param $from-context
+//   When converting from relative units, the absolute length (in px) to
+//   which $length refers (e.g. for $lengths in em units, would normally be the
+//   font-size of the current element).
+//
+// @param $to-context
+//   For converting to relative units, the absolute length in px to which the
+//   output value will refer. Defaults to the same as $from-context, since it is
+//   rarely needed.
+@function convert-length(
+  $length,
+  $to-unit,
+  $from-context: $base-font-size,
+  $to-context: $from-context
+) {
+
+  $from-unit: unit($length);
+
+  // Optimize for cases where `from` and `to` units are accidentally the same.
+  @if $from-unit == $to-unit { @return $length; }
+
+  // Context values must be in px so we can determine a conversion ratio for
+  // relative units.
+  @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+  @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+  // Convert input length to pixels
+  $px-length: $length;
+
+  @if $from-unit != 'px' {
+    // Convert relative units using the from-context parameter.
+    @if      $from-unit == 'em'  { $px-length: $length * $from-context / 1em }
+    @else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
+    @else if $from-unit == '%'   { $px-length: $length * $from-context / 100% }
+    @else if $from-unit == 'ex'  { $px-length: $length * $from-context / 2ex }
+    // Convert absolute units using Sass' conversion table.
+    @else if $from-unit == 'in'  or
+             $from-unit == 'mm'  or
+             $from-unit == 'cm'  or
+             $from-unit == 'pt'  or
+             $from-unit == 'pc'  { $px-length: 0px + $length }
+    // Certain units can't be converted.
+    @else if $from-unit == 'ch'  or
+             $from-unit == 'vw'  or
+             $from-unit == 'vh'  or
+             $from-unit == 'vmin' {
+      @warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+      @return $length;
+    }
+    @else {
+      @warn "#{$from-unit} is an unknown length unit. Returning original value.";
+      @return $length;
+    }
+  }
+
+  // Convert length in pixels to the output unit
+  $output-length: $px-length;
+  @if $to-unit != 'px' {
+    // Relative units
+    @if      $to-unit == 'em'  { $output-length: $px-length * 1em / $to-context }
+    @else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
+    @else if $to-unit == '%'   { $output-length: $px-length * 100% / $to-context }
+    @else if $to-unit == 'ex'  { $output-length: $px-length * 2ex / $to-context }
+    // Absolute units
+    @else if $to-unit == 'in'  { $output-length: 0in + $px-length }
+    @else if $to-unit == 'mm'  { $output-length: 0mm + $px-length }
+    @else if $to-unit == 'cm'  { $output-length: 0cm + $px-length }
+    @else if $to-unit == 'pt'  { $output-length: 0pt + $px-length }
+    @else if $to-unit == 'pc'  { $output-length: 0pc + $px-length }
+    // Non-convertible units
+    @else if $to-unit == 'ch'  or
+             $to-unit == 'vw'  or
+             $to-unit == 'vh'  or
+             $to-unit == 'vmin' {
+      @warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+      @return $length;
+    }
+    @else {
+      @warn "#{$to-unit} is an unknown length unit. Returning original value.";
+      @return $length;
+    }
+  }
+
+  @return $output-length;
+}
+
+
+// Output a given style rule containing rem values along with an (optional)
+// fallback rule for older browsers (with rem values converted to px).
+//
+// @param $property
+//   The css property name.
+//
+// @param $values
+//   The value (or space-separated list of values) for the property.
+//
+// @param $use-px-fallback
+//   [ true | false ]
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+  // Create a couple of empty lists as output buffers.
+  $px-values: ();
+  $rem-values: ();
+
+  // Loop through the $values list
+  @each $value in $values {
+    // For each property value, if it's in rem or px, derive both rem and
+    // px values for it and add those to the end of the appropriate buffer.
+    // Ensure all pixel values are rounded to the nearest pixel.
+    @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
+      @if unit($value) == px {
+        $px-values: join($px-values, round($value));
+        $rem-values: join($rem-values, convert-length($value, rem));
+      }
+      @else {
+        $px-values: join($px-values, round(convert-length($value, px)));
+        $rem-values: join($rem-values, $value);
+      }
+    }
+    @else {
+      $px-values: join($px-values, $value);
+      $rem-values: join($rem-values, $value);
+    }
+  }
+
+  // Use pixel fallback for browsers that don't understand rem units.
+  @if $use-px-fallback {
+    #{$property}: $px-values;
+  }
+
+  // Use rem values for everyone else (overrides pixel values).
+  #{$property}: $rem-values;
+}
+
+@mixin if-rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+  $has-rem: false;
+  @each $value in $values { $has-rem: if(unit($value) == 'rem', true, $has-rem); }
+  @if $has-rem { @include rem($property, $values, $use-px-fallback); }
+  @else { #{$property}: $values; }
+}
+