compass 0.10.0.rc3 → 0.10.0.rc4

data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss

@@ -1,3 +1,5 @@
+@import "shared";
+
 // Provides CSS text shadows.
 //
 // Arguments are color, horizontal offset, vertical offset, and blur
@@ -14,5 +16,11 @@ $default-text-shadow-v-offset: 1px !default;
 
 $default-text-shadow-blur: 1px !default;
 
-@mixin text-shadow($color: $default-text-shadow-color, $hoff: $default-text-shadow-h-offset, $voff: $default-text-shadow-v-offset, $blur: $default-text-shadow-blur) {
-  text-shadow: $color $hoff $voff $blur; }
+@mixin text-shadow(
+  $color: $default-text-shadow-color,
+  $hoff: $default-text-shadow-h-offset,
+  $voff: $default-text-shadow-v-offset,
+  $blur: $default-text-shadow-blur
+) {
+  text-shadow: $color $hoff $voff $blur;
+}

data/frameworks/compass/stylesheets/compass/css3/_transform.scss

@@ -1,18 +1,18 @@
+@import "shared";
+
 // CSS Transform and Transform-Origin
 
 // Apply a transform sent as a complete string.
 
-@mixin apply-transform($transform: false) {
-  transform: $transform;
-  -webkit-transform: $transform;
-  -moz-transform: $transform; }
+@mixin apply-transform($transform) {
+  @include experimental(transform, $transform);
+}
 
 // Apply a transform-origin sent as a complete string.
 
-@mixin apply-origin($origin: false) {
-  transform-origin: $origin;
-  -webkit-transform-origin: $origin;
-  -moz-transform-origin: $origin; }
+@mixin apply-origin($origin) {
+  @include experimental(transform-origin, $origin);
+}
 
 // transform-origin requires x and y coordinates
 //
@@ -23,7 +23,10 @@
     @if $originy {
        @include apply-origin($originx or 50% $originy);
      } @else {
-       @include apply-origin($originx); } } } 
+       @include apply-origin($originx);
+     }
+  }
+} 
 
 // A full transform mixin with everything you could want
 //
@@ -31,10 +34,20 @@
 // * scale, rotate and skew require units of degrees(deg)
 // * scale takes a multiplier, rotate and skew take degrees
 
-@mixin transform($scale: 1, $rotate: 0deg, $transx: 0, $transy: 0, $skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
-    $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
-    @include apply-transform($transform);
-    @include transform-origin($originx, $originy); }
+@mixin transform(
+  $scale: 1,
+  $rotate: 0deg,
+  $transx: 0,
+  $transy: 0,
+  $skewx: 0deg,
+  $skewy: 0deg,
+  $originx: false,
+  $originy: false
+) {
+  $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
+  @include apply-transform($transform);
+  @include transform-origin($originx, $originy);
+}
 
 // Transform Partials
 //
@@ -45,20 +58,24 @@
 
 @mixin scale($scale: 1.25, $originx: false, $originy: false) {
   @include apply-transform(scale($scale));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}
 
 // Adjust only the rotation, with optional origin coordinates
 
 @mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
   @include apply-transform(rotate($rotate));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}
 
 // Adjust only the translation
 
 @mixin translate($transx: 0, $transy: 0) {
-  @include apply-transform(translate($transx, $transy)); }
+  @include apply-transform(translate($transx, $transy));
+}
 
 // Adjust only the skew, with optional origin coordinates
 @mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
   @include apply-transform(skew($skewx, $skewy));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}

data/frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -1,3 +1,5 @@
+@import "shared";
+
 // CSS Transitions
 // Currently only works in Webkit.
 //
@@ -27,10 +29,8 @@ $default-transition-delay: false !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  transition-property: $properties;
-  -webkit-transition-property: $properties;
-  -moz-transition-property: $properties;
-  -o-transition-property: $properties; }
+  @include experimental(transition-property, $properties);
+}
 
 // One or more durations in seconds
 //
@@ -38,10 +38,8 @@ $default-transition-delay: false !default;
 // * these durations will affect the properties in the same list position
 
 @mixin transition-duration($duration: $default-transition-duration) {
-  transition-duration: $duration;
-  -webkit-transition-duration: $duration;
-  -moz-transition-duration: $duration;
-  -o-transition-duration: $duration; }
+  @include experimental(transition-duration, $duration);
+}
 
 // One or more timing functions
 //
@@ -50,10 +48,8 @@ $default-transition-delay: false !default;
 // * These functions will effect the properties in the same list position
 
 @mixin transition-timing-function($function: $default-transition-function) {
-  transition-timing-function: $function;
-  -webkit-transition-timing-function: $function;
-  -moz-transition-timing-function: $function;
-  -o-transition-timing-function: $function; }
+  @include experimental(transition-timing-function, $function);
+}
 
 // One or more transition-delays in seconds
 //
@@ -61,17 +57,19 @@ $default-transition-delay: false !default;
 // * these delays will effect the properties in the same list position
 
 @mixin transition-delay($delay: $default-transition-delay) {
-  transition-delay: $delay;
-  -webkit-transition-delay: $delay;
-  -moz-transition-delay: $delay;
-  -o-transition-delay: $delay; }
+  @include experimental(transition-delay, $delay);
+}
 
 // Transition all-in-one shorthand
 
-@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
+@mixin transition(
+  $properties: $default-transition-property,
+  $duration: $default-transition-duration,
+  $function: $default-transition-function,
+  $delay: $default-transition-delay
+) {
   @include transition-property($properties);
   @include transition-duration($duration);
-  @if $function {
-    @include transition-timing-function($function); }
-  @if $delay {
-    @include transition-delay($delay); } }
+  @if $function { @include transition-timing-function($function); }
+  @if $delay { @include transition-delay($delay); }
+}

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

@@ -1,18 +1,17 @@
 // Classes that are useful for controlling what gets printed.
-// You must mix +print-utilities into your print stylesheet
-// and +print-utilities("screen") into your screen stylesheet.
+// You must mix `+print-utilities` into your print stylesheet
+// and `+print-utilities(screen)` into your screen stylesheet.
 // Note: these aren't semantic.
 @mixin print-utilities($media: print) {
-  @if $media == "print" {
-    .noprint,
-    .no-print {
-      display: none; }
-    #{elements-of-type("block")} {
-      &.print-only {
-        display: block; } }
-    #{elements-of-type("inline")} {
-      &.print-only {
-        display: inline; } } }
-  @else {
-    .print-only {
-      display: none; } } }
+  @if $media == print {
+    .noprint, .no-print { display: none; }
+    #{elements-of-type(block)} {
+      &.print-only { display: block; }
+    }
+    #{elements-of-type(inline)} {
+      &.print-only {  display: inline; }
+    }
+  } @else {
+    .print-only { display: none; }
+  }
+}

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

@@ -1,24 +1,34 @@
+// @doc off
+// Extends the bottom of the element to enclose any floats it contains.
+// @doc on
+
 @import "hacks";
 
-//**
-// Extends the element to enclose any floats it contains.
-// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
-// Recommendations include using this in conjunction with a width:
-// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
+// This basic method is preferred for the usual case, when positioned
+// content will not show outside the bounds of the container.
+//
+// Recommendations include using this in conjunction with a width.
+// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
 @mixin clearfix {
   overflow: hidden;
-  @include has-layout; }
+  @include has-layout;
+}
 
-//**
-// Extends the element to enclose any floats it contains.
-// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
-// http://www.positioniseverything.net/easyclearing.html
+// This older method from Position Is Everything called
+// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
+// has the advantage of allowing positioned elements to hang
+// outside the bounds of the container at the expense of more tricky CSS.
+//
+// This method of clearing might cause a gap at the bottom of the page in
+// some browsers when used on the last element of the page.
 @mixin pie-clearfix {
   &:after {
-    content: " ";
-    display: block;
-    height: 0;
-    clear: both;
-    overflow: hidden;
-    visibility: hidden; }
-  @include has-layout; }
+    content    : " ";
+    display    : block;
+    height     : 0;
+    clear      : both;
+    overflow   : hidden;
+    visibility : hidden;
+  }
+  @include has-layout;
+}

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

@@ -1,17 +1,15 @@
-//**\\
-// Float
-
-@import "clearfix";
-
-// Implementation of float:left with fix for double-margin bug
+// 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 {
   @include float(left); }
 
-// Implementation of float:right with fix for double-margin bug
+// Implementation of float:right with fix for the
+// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float-right {
   @include float(right); }
 
-// Available as alternate syntax with just +float
+// Direction independent float mixin that fixes the
+// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float($side: left) {
   display: inline;
-  float: $side; }
+  float: unquote($side); }

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

@@ -1,3 +1,6 @@
+// This mixin causes an element matching the selector
+// to gain the "hasLayout" property in internet explorer.
+// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
 @mixin has-layout {
   // This makes ie6 get layout
   display: inline-block;
@@ -5,9 +8,8 @@
   & {
     display: block; } }
 
-//**
 // A hack to supply IE6 (and below) with a different property value.
-// See http://www.cssportal.com/css-hacks/#in_css-important
+// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
 @mixin bang-hack($property, $value, $ie6-value) {
   #{$property}: #{$value} !important;
   #{$property}: #{$ie6-value}; }

data/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss

@@ -1,10 +1,16 @@
-// Set all the colors for a link with one mixin call
+// Set all the colors for a link with one mixin call.
 // Order of arguments is:
-// normal, hover, active, visited, focus
-// states not specified will inherit.
-// Mixin like so:
-// a
-//   +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
+//
+// 1. normal
+// 2. hover
+// 3. active
+// 4. visited
+// 5. focus
+//
+// Those states not specified will inherit.
+// Mixin to an anchor link like so:
+//     a
+//       +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
 
 @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
   color: $normal;

data/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss

@@ -1,22 +1,34 @@
 // Turn off the bullet for an element of a list
 @mixin no-bullet {
-  list-style-image: none;
-  list-style-type: none;
-  margin-left: 0px; }
+  list-style-image : none;
+  list-style-type  : none;
+  margin-left      : 0px;
+}
 
 // turns off the bullets for an entire list
 @mixin no-bullets {
   list-style: none;
-  li {
-    @include no-bullet; } }
+  li { @include no-bullet; }
+}
 
-// Make a list(ul/ol) have an image bullet
-// mixin should be used like this for an icon that is 5x7:
-// ul.pretty
-//   +pretty-bullets("my-icon.png", 5px, 7px)
-@mixin pretty-bullets($bullet-icon, $width, $height, $line-height: 18px, $padding: 14px) {
+// Make a list(ul/ol) have an image bullet.
+//
+// The mixin should be used like this for an icon that is 5x7:
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png", 5px, 7px)
+//
+// Additionally, if the image dimensions are not provided,
+// The image dimensions will be extracted from the image itself.
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png")
+//
+@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
   margin-left: 0;
   li {
     padding-left: $padding;
-    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
-    list-style-type: none; } }
+    background: image-url($bullet-icon) no-repeat 0 + ($padding - $width) / 2 ($line-height - $height) / 2;
+    list-style-type: none;
+  }
+}

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

@@ -1,4 +1,3 @@
-//**\\
 // Horizontal list layout module.
 //
 // Easy mode using simple descendant li selectors:
@@ -20,14 +19,12 @@
 @import "compass/utilities/general/reset";
 @import "compass/utilities/general/float";
 
-//**
 // Can be mixed into any selector that target a ul or ol that is meant
 // to have a horizontal layout. Used to implement +horizontal-list.
 @mixin horizontal-list-container {
   @include reset-box-model;
   @include clearfix; }
 
-//**
 // Can be mixed into any li selector that is meant to participate in a horizontal layout.
 // Used to implement +horizontal-list.
 //
@@ -46,7 +43,6 @@
   &:last-child, &.last {
     padding-right: 0px; } }
 
-//**
 // A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
 // This is not an inline list.
 @mixin horizontal-list($padding: 4px) {

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

@@ -11,13 +11,13 @@
     display: inline; } }
 
 // makes an inline list that is comma delimited.
-// use of this recipe is not recommended at this time due to browser support issues.
+// Please make note of the browser support issues before using this mixin.
 //
-// use of :content and :after is not fully supported in all browsers.
-// See http://www.quirksmode.org/css/contents.html#t15 for the support matrix
+// use of `:content` and `:after` is not fully supported in all browsers.
+// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)
 //
-// :last-child is not fully supported
-// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
+// `:last-child` is not fully supported.
+// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
 
 @mixin comma-delimited-list {
   @include inline-list;

data/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss

@@ -1,18 +1,20 @@
-//**
+// @doc off
 // Example 1:
-// a.twitter
-//   +sprite-img("icons-32.png", 1)
-// a.facebook
-//   +sprite-img("icons-32png", 2)
-// ...
+//
+//     a.twitter
+//       +sprite-img("icons-32.png", 1)
+//     a.facebook
+//       +sprite-img("icons-32png", 2)
+//
 // Example 2:
-// a
-//   +sprite-background("icons-32.png")
-//   a.twitter
-//     +sprite-column(1)
-//   a.facebook
-//     +sprite-row(2)
-//   ...
+//
+//     a
+//       +sprite-background("icons-32.png")
+//       a.twitter
+//         +sprite-column(1)
+//       a.facebook
+//         +sprite-row(2)
+// @doc on
 
 $sprite-default-size: 32px !default;