compass 0.13.alpha.4 → 0.13.alpha.5

data/frameworks/compass/stylesheets/compass/css3/_user-interface.scss

@@ -3,13 +3,11 @@
 // they become available in browsers:
 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
 
-@import "shared";
-
-// @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -ms, -o, -khtml
-//   - mozilla support handled seperately below
-$userselect-support: not -moz, -webkit, -ms, not -o, -khtml;
+@import "compass/support";
 
+// The prefixed support threshold for user-select.
+// Defaults to the $graceful-usage-threshold.
+$userselect-support-threshold: $graceful-usage-threshold !default;
 
 // This property controls the selection model and granularity of an element.
 //
@@ -18,39 +16,56 @@ $userselect-support: not -moz, -webkit, -ms, not -o, -khtml;
 @mixin user-select($select) {
   $select: unquote($select);
 
-  @if $experimental-support-for-mozilla {
-    -moz-user-select: if($select == 'none', -moz-none, $select);
+  @include with-each-prefix(user-select-none, $userselect-support-threshold) {
+    // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
+    // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+    @include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
   }
-  @include experimental(user-select, $select, $userselect-support...);
 }
 
+// The prefixed support threshold for input-placeholder.
+// Defaults to the $graceful-usage-threshold.
+$input-placeholder-support-threshold: $graceful-usage-threshold !default;
+
 // Style the html5 input placeholder in browsers that support it.
 //
-// There are two usage modes: at the stylesheet root, include the mixin with
-// styles passed as mixin content. This applies to all elements. For example:
+// The styles for the input placeholder are passed as mixin content
+// and the selector comes from the mixin's context.
 //
-//     @include input-placeholder {
-//       color: #bfbfbf;
-//       font-style: italic;
+// For example:
+//
+//     #{elements-of-type(text-input)} {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
 //     }
 //
-// If a specific element is being styled, pass "&" as an argument to the mixin
-// as well. For example:
+// if you want to apply the placeholder styles to all elements supporting
+// the `input-placeholder` psuedoclass (beware of performance impacts):
 //
-//     .textinput {
-//       @include input-placeholder("&") {
+//     * {
+//       @include input-placeholder {
 //         color: #bfbfbf;
 //         font-style: italic;
 //       }
 //     }
-@mixin input-placeholder($selector: "") {
-  @if $experimental-support-for-webkit {
-    #{$selector}::-webkit-input-placeholder { @content; }
-  }
-  @if $experimental-support-for-mozilla {
-    #{$selector}:-moz-placeholder { @content; }
-  }
-  @if $experimental-support-for-microsoft {
-    #{$selector}:-ms-input-placeholder { @content; }
+@mixin input-placeholder {
+  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
+    @if $current-prefix == -webkit {
+      &::-webkit-input-placeholder { @content; }
+    }
+    @elseif $current-prefix == -moz {
+      // for Firefox 19 and below
+      @if support-legacy-browser("firefox", "19", $input-placeholder-support-threshold) {
+        &:-moz-placeholder { @content; }
+      }
+      // for Firefox 20 and above
+      &::-moz-placeholder { @content; }
+    }
+    @elseif $current-prefix == -ms {
+      &:-ms-input-placeholder { @content; }
+    }
   }
+  // This is not standardized yet so no official selector is generated.
 }

data/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss

@@ -1,3 +1,4 @@
+@import "compass/support";
 @import "compass/layout/grid-background";
 @import "compass/typography/units";
 
@@ -96,7 +97,7 @@ $relative-font-sizing: if($rhythm-unit == px, false, true);
 @mixin establish-baseline($font-size: $base-font-size) {
   $relative-size: 100% * ($font-size / $browser-default-font-size);
 
-  @if $legacy-support-for-ie6 and (not $relative-font-sizing) {
+  @if support-legacy-browser(ie, "6") and (not $relative-font-sizing) {
     // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
     // whose root is set in ems. So we set the root font size in percentages of
     // the default font size, even if we are using absolute sizes elsewhere.

data/frameworks/compass/stylesheets/compass/typography/links/_hover-link.scss

@@ -1,5 +1,5 @@
 // a link that only has an underline when you hover over it
 @mixin hover-link {
   text-decoration: none;
-  &:hover {
+  &:hover, &:focus {
     text-decoration: underline; } }

data/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss

@@ -46,9 +46,9 @@
       left: $padding;
       right: $padding;
     }
-    &:first-child #{if($legacy-support-for-ie6, ', &.first', '')} { padding-#{$direction}: 0; }
+    &:first-child #{if(support-legacy-browser("ie", "6", $css-sel2-support-threshold), ', &.first', '')} { padding-#{$direction}: 0; }
     &:last-child { padding-#{opposite-position($direction)}: 0; }
-    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    @if support-legacy-browser("ie", "7", $css-sel2-support-threshold) {
       &.last { padding-#{opposite-position($direction)}: 0; } }
   }
 }

data/frameworks/compass/stylesheets/compass/typography/lists/_inline-list.scss

@@ -31,7 +31,7 @@
     &:last-child {
       &:after { content: ""; }
     }
-    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    @if support-legacy-browser("ie", "7", $css-sel2-support-threshold) {
       &.last {
         &:after { content: ""; }
       }

data/frameworks/compass/stylesheets/compass/typography/text/_ellipsis.scss

@@ -1,4 +1,4 @@
-@import "compass/css3/shared";
+@import "compass/css3/deprecated-support";
 
 // To get full firefox support, you must install the ellipsis pattern:
 //

data/frameworks/compass/stylesheets/compass/utilities/_sass.scss

@@ -0,0 +1,2 @@
+@import "sass/lists";
+@import "sass/maps";

data/frameworks/compass/stylesheets/compass/utilities/color/_brightness.scss

@@ -0,0 +1,12 @@
+// Computes the "brightness" of a color
+//
+// Brightness is similiar to lightness in HSL but more closely approximates
+// how humans perceive the intensity of the different RGB components of
+// a color. Brightness is sometimes called luminance.
+//
+// Returns a number between 0% and 100%, where 100% is fully bright
+// (white) and 0% is fully dark (black).
+@function brightness($color) {
+  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+}
+

data/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss

@@ -1,28 +1,52 @@
+@import "compass/utilities/color/brightness";
+
 $contrasted-dark-default:   #000 !default;
 $contrasted-light-default:  #fff !default;
-$contrasted-lightness-threshold: 30% !default;
 
-// Returns the `$light` color when the `$color` is dark
-// and the `$dark` color when the `$color` is light.
-// The `$threshold` is a percent between `0%` and `100%` and it determines
-// when the lightness of `$color` changes from "dark" to "light".
+// Returns either the `$light` or `$dark` color
+// by deciding which contrasts more with `$color`.
+//
+// E.g. This can be used to select the more readable foreground color
+// for a given background color.
+//
+// `$dark` defaults to black and `$light` defaults to white.
+//
+// When `$color` is `null`, this function returns `null`.
 @function contrast-color(
   $color,
   $dark: $contrasted-dark-default,
   $light: $contrasted-light-default,
-  $threshold: $contrasted-lightness-threshold
+  $threshold: null
 ) {
-  @return if(lightness($color) < $threshold, $light, $dark)
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."
+  }
+  @if $color == null {
+    @return null;
+  }
+  @else {
+    $color-brightness: brightness($color);
+    $dark-text-brightness: brightness($dark);
+    $light-text-brightness: brightness($light);
+
+    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+  }
 }
 
-// Sets the specified background color and calculates a dark or light contrasted text color.
-// The arguments are passed through to the [contrast-color function](#function-contrast-color).
+// Sets the specified background color and calculates a dark or light
+// contrasted text color.  The arguments are passed through to the
+// [contrast-color function](#function-contrast-color).
 @mixin contrasted(
   $background-color,
   $dark: $contrasted-dark-default,
   $light: $contrasted-light-default,
-  $threshold: $contrasted-lightness-threshold
+  $threshold: null
 ) {
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release."
+  }
   background-color: $background-color;
-  color: contrast-color($background-color, $dark, $light, $threshold);
-}
+  color: contrast-color($background-color, $dark, $light);
+}

data/frameworks/compass/stylesheets/compass/utilities/general/_float.scss

@@ -1,5 +1,9 @@
 @import "compass/support";
 
+// The legacy support threshold for float.
+// Defaults to the $critical-usage-threshold.
+$legacy-float-support-threshold: $critical-usage-threshold !default;
+
 // Implementation of float:left with fix for the
 // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float-left {
@@ -14,7 +18,7 @@
 // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float($side: left) {
   float: unquote($side);
-  @if $legacy-support-for-ie6 {
+  @if support-legacy-browser("ie", "6", $legacy-float-support-threshold) {
     display: inline; } }
 
 // Resets floated elements back to their default of `float: none` and defaults
@@ -30,5 +34,5 @@
 //         +reset-float
 @mixin reset-float($display: block) {
   float: none;
-  @if $legacy-support-for-ie6 {
+  @if support-legacy-browser("ie", "6", $legacy-float-support-threshold) {
     display: $display; } }

data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss

@@ -1,5 +1,9 @@
 @import "compass/support";
 
+// The legacy support threshold for has-layout.
+// Defaults to the $critical-usage-threshold.
+$has-layout-support-threshold: $critical-usage-threshold !default;
+
 // The `zoom` approach generates less CSS but does not validate.
 // Set this to `block` to use the display-property to hack the
 // element to gain layout.
@@ -9,7 +13,7 @@ $default-has-layout-approach: zoom !default;
 // to gain the "hasLayout" property in internet explorer.
 // More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
 @mixin has-layout($approach: $default-has-layout-approach) {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @if support-legacy-browser("ie", "7", $has-layout-support-threshold) {
     @if $approach == zoom {
       @include has-layout-zoom;
     } @else if $approach == block {
@@ -22,13 +26,13 @@ $default-has-layout-approach: zoom !default;
 }
 
 @mixin has-layout-zoom {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @if support-legacy-browser("ie", "7", $has-layout-support-threshold) {
     *zoom: 1;
   }
 }
 
 @mixin has-layout-block {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @if support-legacy-browser("ie", "7", $has-layout-support-threshold) {
     // This makes ie6 get layout
     display: inline-block;
     // and this puts it back to block
@@ -36,11 +40,26 @@ $default-has-layout-approach: zoom !default;
   }
 }
 
+
+// The legacy support threshold for IE6 attribute hack.
+// Defaults to the $critical-usage-threshold.
+$ie6-attribute-hack-support-threshold: $critical-usage-threshold !default;
+
 // A hack to supply IE6 (and below) with a different property value.
 // [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
 @mixin bang-hack($property, $value, $ie6-value) {
-  @if $legacy-support-for-ie6 {
+  @if support-legacy-browser("ie", "6", $ie6-attribute-hack-support-threshold) {
+    @warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()";
     #{$property}: #{$value} !important;
     #{$property}: #{$ie6-value};
   }
 }
+
+// A hack to supply IE6 (and below) with a different property value.
+// [Read more](http://www.paulirish.com/2009/browser-specific-css-hacks/)
+@mixin underscore-hack($property, $value, $ie6-value) {
+  @if support-legacy-browser("ie", "6", $ie6-attribute-hack-support-threshold) {
+    #{$property}: #{$value};
+    _#{$property}: #{$ie6-value};
+  }
+}

data/frameworks/compass/stylesheets/compass/utilities/general/_min.scss

@@ -13,4 +13,4 @@
 // @private This mixin is not meant to be used directly.
 @mixin hacked-minimum($property, $value) {
   min-#{$property}: $value;
-  @include bang-hack($property, auto, $value); }
+  @include underscore-hack($property, auto, $value); }

data/frameworks/compass/stylesheets/compass/utilities/sass/_lists.scss

@@ -0,0 +1,16 @@
+@function newline() {
+  @return "
+";
+}
+
+// Joins a list into a string with the separator given.
+@function list-join($list, $separator: ", ") {
+  $result: "";
+  @each $value in $list {
+    @if str-length($result) > 0 {
+      $result: $result + $separator;
+    }
+    $result: $result + #{$value};
+  }
+  @return $result;
+}

data/frameworks/compass/stylesheets/compass/utilities/sass/_maps.scss

@@ -0,0 +1,19 @@
+// Returns true if a $map is a superset of $sub-map.
+@function map-contains-all($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if not (map-has-key($map, $key) and map-get($map, $key) == $value) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+// Returns true if a $map has any key-value pair in $sub-map.
+@function map-contains-any($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if map-has-key($map, $key) and map-get($map, $key) == $value {
+      @return true;
+    }
+  }
+  @return false;
+}

data/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss

@@ -1,5 +1,5 @@
 // Determines those states for which you want to enable magic sprite selectors
-$sprite-selectors: hover, target, active !default;
+$sprite-selectors: hover, target, active, focus !default;
 
 // Set the width and height of an element to the original
 // dimensions of an image before it was included in the sprite.
@@ -21,7 +21,10 @@ $use-percentages: false) {
 
 
 // Determines if you want to include magic selectors in your sprites
-$disable-magic-sprite-selectors:false !default;
+$disable-magic-sprite-selectors: false !default;
+
+// Set this to underscore if you prefer
+$default-sprite-separator: "-" !default;
 
 // Include the position and (optionally) dimensions of this `$sprite`
 // in the given sprite `$map`. The sprite url should come from either a base
@@ -29,15 +32,17 @@ $disable-magic-sprite-selectors:false !default;
 //
 //     background: $map no-repeat;
 @mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0,
-$use-percentages: false) {
+                             $use-percentages: false,
+                             $use-magic-selectors: not $disable-magic-sprite-selectors,
+                             $separator: $default-sprite-separator) {
   @include sprite-background-position($map, $sprite, $offset-x, $offset-y,
-  $use-percentages);
+                                      $use-percentages);
   @if $dimensions {
     @include sprite-dimensions($map, $sprite);
   }
-  @if not $disable-magic-sprite-selectors {
+  @if $use-magic-selectors {
     @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y,
-    $use-percentages);
+                              $use-percentages, $separator);
   }
 }
 
@@ -45,14 +50,15 @@ $use-percentages: false) {
 // `$full-sprite-name`
 // @private
 @mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0,
-$offset-y: 0, $use-percentages: false) {
-  @each $selector in $sprite-selectors {
-    @if sprite_has_selector($map, $sprite-name, $selector) {
-      @if sprite_has_valid_selector("#{$full-sprite-name}-#{$selector}") {
-        &:#{$selector}, &.#{$full-sprite-name}-#{$selector} {
-            @include sprite-background-position($map,
-            "#{$sprite-name}_#{$selector}", $offset-x, $offset-y, 
-            $use-percentages);
+                        $offset-y: 0, $use-percentages: false,
+                        $separator: $default-sprite-separator) {
+  @each $state in $sprite-selectors {
+    $sprite-class: "#{$full-sprite-name}#{$separator}#{$state}";
+    @if sprite_has_selector($map, $sprite-name, $state) {
+      @if sprite_has_valid_selector($sprite-class) {
+        &:#{$state}, &.#{$sprite-class} {
+            @include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state),
+                                                $offset-x, $offset-y, $use-percentages);
         }
       }
     }
@@ -68,16 +74,17 @@ $offset-y: 0, $use-percentages: false) {
 // Positions are returned in pixel units. Set `$use_percentages` to true to
 // instead get percentages.
 @mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false,
-$prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0, $use-percentages:
-false) {
+               $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0,
+               $use-percentages: false,
+               $separator: $default-sprite-separator) {
   @each $sprite-name in $sprite-names {
     @if sprite_does_not_have_parent($map, $sprite-name) {
-      $full-sprite-name: "#{$prefix}-#{$sprite-name}";
+      $full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}";
       @if sprite_has_valid_selector($full-sprite-name) {
         .#{$full-sprite-name} {
           @if $base-class { @extend #{$base-class}; }
           @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, 
-          $use-percentages);
+                          $use-percentages, $separator: $separator);
         }
       }
     }