gem_2345 0.1.1 → 0.1.2

data/stylesheets/compass/css3/_filter.scss

@@ -0,0 +1,50 @@
+// Filter
+@import "compass/support";
+
+// The prefixed support threshold for css filter effects.
+// Defaults to the $graceful-usage-threshold.
+$filter-support-threshold: $graceful-usage-threshold !default;
+
+
+// Provides cross-browser support for the upcoming (?) css3 filter property.
+//
+// The filter argument should adhere to the standard css3 syntax
+// for the filter property.
+@mixin filter($filters) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter: $filters
+  ));
+}
+
+// @private Apply filter-margins
+@mixin apply-filter-margin($position, $width) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin-#{$position}: $width
+  ));
+}
+
+// filter-margin-top
+@mixin filter-margin-top($width) { @include apply-filter-margin(top, $width); }
+
+// filter-margin-right
+@mixin filter-margin-right($width) { @include apply-filter-margin(right, $width); }
+
+// filter-margin-bottom
+@mixin filter-margin-bottom($width) { @include apply-filter-margin(bottom, $width); }
+
+// filter-margin-left
+@mixin filter-margin-left($width) { @include apply-filter-margin(left, $width); }
+
+// filter-margin
+@mixin filter-margin($widths) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin: $widths
+  ));
+}
+
+// color-interpolation-filters (auto | sRGB | linearRGB )
+@mixin color-interpolation-filters($value) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    color-interpolation-filters: $value
+  ));
+}

data/stylesheets/compass/css3/_flexbox.scss

@@ -0,0 +1,156 @@
+// There are two ways to use the flexbox module.
+// If you're using the final version of the spec,
+// you can use the property mixins as elsewhere in
+// the css3 module.
+//
+// You can also use the flexbox prefixing mixin `flexbox`.
+// This mixin takes an optional `$version` argument which
+// allows you to specify which spec version the properties
+// are using so that they will be prefixed correctly.
+//
+// Example:
+//
+//     .flex-column {
+//       /* For flexbox spec v1 */
+//       @include flexbox((
+//         display: box,
+//         box-orient: vertical,
+//       ), $version: 1);
+//       
+//       /* For flexbox spec v2 */
+//       @include flexbox((
+//         display: flexbox,
+//         flex-direction: column,
+//       ), $version: 2);
+//       
+//       /* Latest Spec */
+//       @include flexbox((
+//         display: flex,
+//         flex-direction: column,
+//       ));
+//     }
+//
+// Which compiles to:
+//
+//     .flex-row {
+//       /* For flexbox spec v1 */
+//       display: -moz-box;
+//       -moz-box-orient: vertical;
+//       display: -webkit-box;
+//       -webkit-box-orient: vertical;
+//       
+//       /* For flexbox spec v2 */
+//       display: -ms-flexbox;
+//       -ms-flex-direction: column;
+//       
+//       /* Latest Spec */
+//       display: -webkit-flex;
+//       -webkit-flex-direction: column;
+//       display: flex;
+//       flex-direction: column;
+//     }
+
+@import "compass/support";
+
+$flexbox-support-threshold: $critical-usage-threshold !default;
+
+
+// @private
+$flexbox-capability-options: (
+  (full-support: true),
+  (partial-support: true, spec-versions: 3)
+);
+
+// This is the underlying implementation for all the other mixins in this module.
+// It is the only way to access prefix support for older versions of the spec.
+//
+// `$properties`: map of property-value pairs that should be prefixed
+
+// `$version1: the version of the spec to use when considering what prefix
+// to appply. Defaults to the most recent (spec version 3). Only the most
+// recent version of the spec outputs an unprefixed version.
+@mixin flexbox($properties, $version: null) {
+  $capability-options: $flexbox-capability-options;
+  @if $version {
+    $capability-options: (partial-support: true, spec-versions: $version);
+  }
+
+  @include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
+    // Don't output unprefixed versions when the spec version is not the final version
+    @if $version and $current-prefix or not $version or $version == 3 {
+      @each $prop, $value in $properties {
+        @if $prop == display {
+          display: prefix-identifier($value);
+        } @else {
+          @include prefix-prop($prop, $value);
+        }
+      }
+    }
+  }
+}
+
+// Values for $display are: flex (default), inline-flex
+@mixin display-flex($display: flex) {
+  @include flexbox((display: $display));
+}
+
+// Values: row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+  @include flexbox((flex-direction: $direction));
+}
+
+// Values: nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+  @include flexbox((flex-wrap: $wrap));
+}
+
+// Shorthand for flex-direction and flex-wrap.
+@mixin flex-flow($flow) {
+  @include flexbox((flex-flow: $flow));
+}
+
+// Accepts an integer
+@mixin order($order) {
+  @include flexbox((order: $order));
+}
+
+// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
+// Space separated, in that order.
+@mixin flex($flex) {
+  @include flexbox((flex: $flex));
+}
+
+// Accepts a number.
+@mixin flex-grow($flex-grow) {
+  @include flexbox((flex-grow: $flex-grow));
+}
+
+// Accepts a number.
+@mixin flex-shrink($flex-shrink) {
+  @include flexbox((flex-shrink: $flex-shrink));
+}
+
+// Accepts any legal value for the width property.
+@mixin flex-basis($flex-basis) {
+  @include flexbox((flex-basis: $flex-basis));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify-content) {
+  @include flexbox((justify-content: $justify-content));
+}
+
+// Legal values: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align-items) {
+  @include flexbox((align-items: $align-items));
+}
+
+// Legal values: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align-self) {
+  @include flexbox((align-self: $align-self));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align-content) {
+  @include flexbox((align-content: $align-content));
+}

data/stylesheets/compass/css3/_font-face.scss

@@ -0,0 +1,48 @@
+@import "compass/support";
+
+// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
+//
+// * $name is required, arbitrary, and what you will use in font stacks.
+// * $font-files is required using font-files('relative/location', 'format').
+//   for best results use this order: woff, opentype/truetype, svg
+// * $eot is required by IE, and is a relative location of the eot file.
+// * $weight shows if the font is bold, defaults to normal
+// * $style defaults to normal, might be also italic
+// * For android 2.2 Compatiblity, please ensure that your web page has
+//   a meta viewport tag.
+// * To support iOS < 4.2, an SVG file must be provided
+//
+// If you need to generate other formats check out the Font Squirrel
+// [font generator](http://www.fontsquirrel.com/fontface/generator)
+//
+
+// In order to refer to a specific style of the font in your stylesheets as
+// e.g. "font-style: italic;",  you may add a couple of @font-face includes
+// containing the respective font files for each style and specying
+// respective the $style parameter.
+
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face(
+  $name,
+  $font-files,
+  $eot: false,
+  $weight: false,
+  $style: false
+) {
+  $iefont: unquote("#{$eot}?#iefix");
+  @font-face {
+    font-family: quote($name);
+    @if $eot {
+      src: font-url($eot);
+      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
+    }
+    src: $font-files;
+    @if $weight {
+      font-weight: $weight;
+    }
+    @if $style {
+      font-style: $style;
+    }
+  }
+}

data/stylesheets/compass/css3/_hyphenation.scss

@@ -0,0 +1,71 @@
+// Mixins to support specific CSS Text Level 3 elements
+
+@import "compass/support";
+
+// The the user threshold for hyphens support.
+// Defaults to `$graceful-usage-threshold`.
+$hyphens-support-threshold: $graceful-usage-threshold !default;
+
+
+// Mixin for word-break properties
+// http://www.w3.org/css3-text/#word-break
+// * legal values for $type : normal, keep-all, break-all
+//
+// Example:
+//    p.wordBreak {@include word-break(break-all);}
+//
+// Which generates:
+//    p.wordBreak {
+//      word-break: break-all;
+//      word-break: break-word;}
+//
+@mixin word-break($value: normal){
+  word-break: $value;
+  @if $value == break-all {
+    //Webkit handles break-all differently... as break-word
+    @include with-prefix(-webkit) {
+      word-break: break-word;
+    }
+  }
+}
+
+// Mixin for the hyphens property
+//
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
+// * legal values for $type : auto, manual, none
+//
+// Example:
+//  p {
+//    @include hyphens(auto);}
+// Which generates:
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//
+@mixin hyphens($value: auto){
+  @include prefixed-properties(css-hyphens, $hyphens-support-threshold, (
+    hyphens: $value
+  ));
+}
+
+// Mixin for x-browser hyphenation based on @auchenberg's post:
+// Removes the need for the <wbr/> HTML tag
+// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
+//
+//  Example:
+//  div {@include hyphenation;}
+//
+//  Which generates:
+//    div {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;
+//      -moz-hyphens: auto;
+//      -webkit-hyphens: auto;
+//      hyphens: auto;}
+//
+@mixin hyphenation {
+  @include word-break(break-all);
+  @include hyphens;
+}

data/stylesheets/compass/css3/_images.scss

@@ -0,0 +1,152 @@
+@import "compass/support";
+@import "compass/utilities/general/hacks";
+
+$gradient-support-threshold: $graceful-usage-threshold !default;
+$svg-gradient-shim-threshold: $graceful-usage-threshold !default;
+$border-image-support-threshold: $graceful-usage-threshold !default;
+$owg-threshold: $graceful-usage-threshold !default;
+
+// Compass assumes you will use the official gradient syntax,
+// unless otherwise instructed.
+$use-legacy-gradient-syntax: false !default;
+
+// Create a linear gradient using standard official or legacy syntax.
+// This function must be included in one of the following
+// image module mixins to work properly.
+@function linear-gradient($angle, $details...) {
+  $legacy-syntax: $use-legacy-gradient-syntax;
+
+  @if type-of($angle) != 'number' {
+    $angle: compact($angle);
+    $legacy-syntax: if(index($angle, 'to'), false, true);
+  }
+
+  @if $legacy-syntax {
+    @return _linear-gradient_legacy($angle, $details...);
+  } @else {
+    @return _linear-gradient($angle, $details...);
+  }
+}
+
+// These browsers support svg but not gradients
+// so we can shim the gradient with an inline svg file.
+$browsers-supporting-svg-but-not-gradients: (ie: "9", opera: "9.5-9.6");
+
+// These browsers require the old webkit gradient syntax
+$browsers-supporting-old-webkit-gradients: (android: ("2.1", "3"));
+
+@mixin each-gradient-prefix($values) {
+  @if prefixed(-svg, $values) {
+    @include for-legacy-browsers($browsers-supporting-svg-but-not-gradients,
+                                 $svg-gradient-shim-threshold)
+    {
+      @include with-prefix(-svg) {
+        @content;
+      }
+    }
+  }
+  @if prefixed(-owg, $values) {
+    @include for-legacy-browsers($browsers-supporting-old-webkit-gradients,
+                                 $owg-threshold)
+    {
+      @include with-prefix(-owg) {
+        @content;
+      }
+    }
+  }
+  @include with-each-prefix(css-gradients, $gradient-support-threshold) {
+    @if $current-prefix {
+      @if prefixed($current-prefix, $values) {
+        @content;
+      } @else if $debug-browser-support {
+        /* There is not a value that needs to be prefixed with #{$current-prefix} in: #{$values} */
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@mixin image-property($property, $values...) {
+  @include each-gradient-prefix($values) {
+    @if $current-prefix {
+      #{$property}: prefix($current-prefix, $values);
+    } @else {
+      #{$property}: $values;
+    }
+    @content;
+  }
+}
+
+// Background property support for vendor prefixing within values.
+@mixin background($backgrounds...) {
+  @include image-property(background, $backgrounds...);
+}
+
+// Set any number of background layers, along with a fallback.
+// The final argument will be output separately, first, as a css2 fallback.
+@mixin background-with-css2-fallback($backgrounds...) {
+  @if length($backgrounds) > 1 or prefixed(-css2, $backgrounds) {
+    background: -css2(nth($backgrounds, -1));
+  }
+  @include background($backgrounds...);
+}
+
+
+// Background image property support for vendor prefixing within values.
+@mixin background-image($images...) {
+  @include image-property(background-image, $images...) {
+    @if $current-prefix == -svg {
+      background-size: 100%;
+    }
+  }
+}
+
+// Emit a IE-Specific filters that renders a simple linear gradient.
+// For use in IE 6 - 8. Best practice would have you apply this via a
+// conditional IE stylesheet, but if you must, you should place this before
+// any background-image properties that you have specified.
+//
+// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
+@mixin filter-gradient(
+  $start-color,
+  $end-color,
+  $orientation: vertical
+) {
+  @include for-legacy-browsers((ie: "8"), $gradient-support-threshold) {
+    @include has-layout;
+    $gradient-type: if($orientation == vertical, 0, 1);
+    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+  }
+}
+
+
+// Border image property support for vendor prefixing properties and values.
+@mixin border-image($value) {
+  @include with-each-prefix(border-image, $border-image-support-threshold) {
+    $border-prefix: $current-prefix;
+    @include each-gradient-prefix($value) {
+      @if $current-prefix and prefixed($current-prefix, $value) {
+        $legacy-value: reject($value, fill);
+        @include prefix-prop(border-image, prefix($current-prefix, $legacy-value), $prefix: $border-prefix);
+      } @else {
+        @include prefix-prop(border-image, $value, $prefix: $border-prefix);
+      }
+    }
+  }
+}
+
+// List style image property support for vendor prefixing within values.
+@mixin list-style-image($image) {
+  @include image-property(list-style-image, $image);
+}
+
+// List style property support for vendor prefixing within values.
+@mixin list-style($value) {
+  @include image-property(list-style, $value);
+}
+
+// content property support for vendor prefixing within values.
+@mixin content($value) {
+  @include image-property(content, $value);
+}