compass 0.12.7 → 0.13.alpha.0

data/features/step_definitions/command_line_steps.rb

@@ -256,7 +256,7 @@ end
 
 Then /^the image ([^ ]+) has a size of (\d+)x(\d+)$/ do |file, width, height| 
   # see http://snippets.dzone.com/posts/show/805
-  open(file, "rb").read[0x10..0x18].unpack('NN').should == [width.to_i, height.to_i]
+  IO.read(file)[0x10..0x18].unpack('NN').should == [width.to_i, height.to_i]
 end
 
 Then /^I should see the following lines of output:$/ do |table|

data/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss

@@ -1,32 +1,31 @@
 // Global reset rules.
 // For more specific resets, use the reset mixins provided below
 @mixin blueprint-global-reset {
-  html { @include blueprint-reset-box-model; }
-  body { @extend .bp-reset-element; }
-  @include blueprint-nested-reset; }
+  html { @extend %bp-reset-box-model; }
+  body { @extend %bp-reset-element; }
+  @include blueprint-nested-reset;
+}
 
 // Reset all elements within some selector scope.To reset the selector itself,
 // mixin the appropriate reset mixin for that element type as well. This could be
 // useful if you want to style a part of your page in a dramatically different way.
 @mixin blueprint-nested-reset {
-  .bp-reset-element,
   div, span, object, iframe, p,
   pre, a, abbr, acronym, address,
   code, del, dfn, em, img,
   dl, dt, dd, ol, ul, li, fieldset,
   form, label, legend,
-  caption, tbody, tfoot, thead, tr { @include blueprint-basic-reset;                           }
-  #{headers(all)}                  { @include blueprint-basic-reset(bp-reset-element);         }
-  #{elements-of-type(html5-block)} { @include blueprint-reset-html5-element(bp-reset-element); }
-  blockquote, q                    { @include blueprint-reset-quotation(bp-reset-element);     }
-  th, td, caption                  { @include blueprint-reset-table-cell(bp-reset-element);    }
-  table                            { @include blueprint-reset-table(bp-reset-element);         }
-  a img                            { border: none;                                             }
+  caption, tbody, tfoot, thead, tr { @extend %bp-reset-element;       }
+  #{headers(all)}                  { @extend %bp-reset-element;       }
+  #{elements-of-type(html5-block)} { @extend %bp-reset-html5-element; }
+  blockquote, q                    { @extend %bp-reset-quotation;     }
+  th, td, caption                  { @extend %bp-reset-table-cell;    }
+  table                            { @extend %bp-reset-table;         }
+  a img                            { @extend %bp-reset-linked-image;  }
 }
 
-@mixin blueprint-reset-html5-element($reset-base-class: false) {
-  @if $reset-base-class { @extend .#{$reset-base-class}; }
-  @else                 { @include blueprint-reset; }
+@mixin blueprint-reset-html5-element {
+  @extend %bp-reset-element;
   display: block;
 }
 
@@ -36,18 +35,9 @@
   border: 0;
 }
 
-@mixin blueprint-reset {
-  @warn "The blueprint-reset mixin is deprecated. Please use blueprint-basic-reset instead.";
-  @include blueprint-basic-reset;
-}
-
-@mixin blueprint-basic-reset($reset-base-class: false) {
-  @if $reset-base-class {
-    @extend .#{$reset-base-class};
-  } @else {
-    @include blueprint-reset-box-model;
-    @include blueprint-reset-typography;
-  }
+@mixin blueprint-basic-reset {
+  @include blueprint-reset-box-model;
+  @include blueprint-reset-typography;
 }
 
 @mixin blueprint-reset-typography {
@@ -55,29 +45,36 @@
     weight: inherit;
     style: inherit;
     size: 100%;
-    family: inherit; };
+    family: inherit;
+  }
   vertical-align: baseline;
 }
 
-@mixin blueprint-reset-quotation($reset-base-class: false) {
-  @if $reset-base-class { @extend .#{$reset-base-class}; }
-  @else { @include blueprint-reset; }
+@mixin blueprint-reset-quotation {
+  @extend %bp-reset-element;
   quotes: "" "";
-  &:before,
-  &:after {
-    content: ""; } }
+  &:before, &:after { content: ""; }
+}
 
-@mixin blueprint-reset-table-cell($reset-base-class: false) {
-  @if $reset-base-class { @extend .#{$reset-base-class}; }
-  @else { @include blueprint-reset; }
+@mixin blueprint-reset-table-cell {
+  @extend %bp-reset-element;
   float: none !important;
   text-align: left;
   font-weight: normal;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
 
-@mixin blueprint-reset-table($reset-base-class: false) {
-  @if $reset-base-class { @extend .#{$reset-base-class}; }
-  @else { @include blueprint-reset; }
+@mixin blueprint-reset-table {
+  @extend %bp-reset-element;
   border-collapse: separate;
   border-spacing: 0;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
+
+%bp-reset-box-model     { @include blueprint-reset-box-model;     }
+%bp-reset-element       { @include blueprint-basic-reset;         }
+%bp-reset-html5-element { @include blueprint-reset-html5-element; }
+%bp-reset-quotation     { @include blueprint-reset-quotation;     }
+%bp-reset-table-cell    { @include blueprint-reset-table-cell;    }
+%bp-reset-table         { @include blueprint-reset-table;         }
+%bp-reset-linked-image  { border: none;                           }

data/frameworks/compass/stylesheets/compass/_css3.scss

@@ -14,7 +14,5 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
+@import "css3/animation";
 @import "css3/regions";
-@import "css3/hyphenation";
-@import "css3/filter";
-@import "css3/user-interface";

data/frameworks/compass/stylesheets/compass/_support.scss

@@ -16,10 +16,6 @@ $legacy-support-for-ie8: $legacy-support-for-ie !default;
 // this combined variable.
 $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
 
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
-
 // Support for mozilla in experimental css3 properties (-moz).
 $experimental-support-for-mozilla      : true !default;
 // Support for webkit in experimental css3 properties (-webkit).

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

@@ -0,0 +1,127 @@
+@import "shared";
+
+// CSS Animations.
+
+// Apply an animation property and value with the correct browser support
+@mixin animation-support($property, $value) {
+  @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
+
+// Name of any animation as a string.
+$default-animation-name             : false !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : false !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : false !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : false !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : false !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : false !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : false !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : false !default;
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
+@mixin keyframes(
+  $name,
+  $moz: $experimental-support-for-mozilla,
+  $webkit: $experimental-support-for-webkit,
+  $o: $experimental-support-for-opera,
+  $ms: $experimental-support-for-microsoft,
+  $khtml: $experimental-support-for-khtml,
+  $official: true
+) {
+  @if $moz {
+    @include with-only-support-for($moz: true) {
+      @-moz-keyframes #{$name} { @content; }
+    }
+  }
+  @if $webkit {
+    @include with-only-support-for($webkit: true) {
+      @-webkit-keyframes #{$name} { @content; }
+    }
+  }
+  @if $o {
+    @include with-only-support-for($o: true) {
+      @-o-keyframes #{$name} { @content; }
+    }
+  }
+  @if $ms {
+    @include with-only-support-for($ms: true) {
+      @-ms-keyframes #{$name} { @content; }
+    }
+  }
+  @if $khtml {
+    @include with-only-support-for($khtml: true) {
+      @-khtml-keyframes #{$name} { @content; }
+    }
+  }
+  @if $official {
+    @include with-only-support-for {
+      @keyframes #{$name} { @content; }
+    }
+  }
+}
+
+// Apply 1-10 animation names.
+@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
+  $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
+  @include animation-support(animation-name, $name); }
+
+// Apply 1-10 animation durations.
+@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
+  $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
+  @include animation-support(animation-duration, $duration); }
+
+// Apply 1-10 animation delays.
+@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
+  $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
+  @include animation-support(animation-delay, $delay); }
+
+// Apply 1-10 animation timing functions.
+@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
+  $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
+  @include animation-support(animation-timing-function, $function); }
+
+// Apply 1-10 animation iteration counts.
+@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
+  $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
+  @include animation-support(animation-iteration-count, $count); }
+
+// Apply 1-10 animation directions.
+@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
+  $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
+  @include animation-support(animation-direction, $direction); }
+
+// Apply 1-10 animation fill modes.
+@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
+  $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
+  @include animation-support(animation-fill-mode, $mode); }
+
+// Apply 1-10 animation play states.
+@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
+  $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
+  @include animation-support(animation-play-state, $state); }
+
+// Shortcut to apply a named animation to an element, with all the settings.
+//
+//     $animation-1   : Name and settings for the first animation. [<values> | default]
+//     ...
+//     $animation-10  : Name and settings for the tenth animation. <values>
+@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
+  @if $animation-1 == default {
+    $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
+  $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
+  @include animation-support(animation, $animation); }

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

@@ -4,10 +4,9 @@
 // The appearance property is currently not present in any newer CSS specification.
 //
 // There is no official list of accepted values, but you might check these source:
-//
-//   * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance)
-//   * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365)
-//     (search for 'appearance' within the page)
+//   Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance
+//   Webkit  : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365
+//   (search for 'appearance' within the page)
 
 @mixin appearance($ap) {
   $ap: unquote($ap);

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

@@ -64,7 +64,7 @@ $default-box-ordinal-group: 1 !default;
 
 // mixin which takes an int argument for ordinal grouping and rearranging the order
 @mixin box-ordinal-group(
-  $group: $default-box-ordinal-group
+  $group: $default-ordinal-flex-group
 ) {
   @include experimental(box-ordinal-group, $group,
     -moz, -webkit, not -o, -ms, not -khtml, official
@@ -108,4 +108,4 @@ $default-box-pack: start !default;
   @include experimental(box-pack, $pack,
     -moz, -webkit, not -o, -ms, not -khtml, official
   );
-}
+}

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

@@ -7,60 +7,51 @@
 //     @include columns(20em 2)
 @mixin columns($width-and-count) {
   @include experimental(columns, $width-and-count,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
 // Specify the number of columns
 @mixin column-count($count) {
   @include experimental(column-count, $count,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
 // Specify the gap between columns e.g. `20px`
 @mixin column-gap($width) {
   @include experimental(column-gap, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
 // Specify the width of columns e.g. `100px`
 @mixin column-width($width) {
   @include experimental(column-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
-// Specify how many columns an element should span across.
-//
-// * legal values are 1, all
-@mixin column-span($columns) {
-	@include experimental(column-span, $columns,
-		-moz, -webkit, -o, -ms, not -khtml, official
-	);
-}
-
 // Specify the width of the rule between columns e.g. `1px`
 @mixin column-rule-width($width) {
-  @include experimental(column-rule-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
+  @include experimental(rule-width, $width,
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
 @mixin column-rule-style($style) {
-  @include experimental(column-rule-style, unquote($style),
-    -moz, -webkit, -o, -ms, not -khtml, official
+  @include experimental(rule-style, unquote($style),
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
 // Specify the color of the rule between columns e.g. `blue`.
 // This works like border-color.
 @mixin column-rule-color($color) {
-  @include experimental(column-rule-color, $color,
-    -moz, -webkit, -o, -ms, not -khtml, official
+  @include experimental(rule-color, $color,
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
@@ -75,83 +66,6 @@
 @mixin column-rule($width, $style: false, $color: false) {
   $full : -compass-space-list(compact($width, $style, $color));
   @include experimental(column-rule, $full,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
-
-// Mixin for setting column-break-before
-//
-// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//
-//  Example: 
-//    h2.before {@include column-break-before(always);}
-//
-//  Which generates: 
-//
-//  h2.before {    
-//    -webkit-column-break-before: always;
-//    column-break-before: always;}
-@mixin column-break-before($value: auto){
-   @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}
-
-// Mixin for setting column-break-after
-//
-// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//
-//  Example: 
-//    h2.after {@include column-break-after(always); }
-//
-//  Which generates: 
-//
-//  h2.after {
-//    -webkit-column-break-after: always;
-//    column-break-after: always; }
-@mixin column-break-after($value: auto){
-   @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}
-
-// Mixin for setting column-break-inside
-//
-// * legal values are auto, avoid, avoid-page, avoid-column
-//
-//  Example: 
-//    h2.inside {@include column-break-inside();}
-//  Which generates: 
-//  
-//  h2.inside {
-//    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
-@mixin column-break-inside($value: auto){
-   @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}
-
-// All-purpose mixin for setting column breaks.
-//
-// * legal values for $type : before, after, inside 
-// * legal values for '$value' are dependent on $type
-//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
-//  
-//  Examples: 
-//    h2.before {@include column-break(before, always);}
-//    h2.after {@include column-break(after, always); }
-//    h2.inside {@include column-break(inside); }
-//
-//  Which generates: 
-//  h2.before {    
-//    -webkit-column-break-before: always;
-//    column-break-before: always;}
-//  
-//  h2.after {
-//    -webkit-column-break-after: always;
-//    column-break-after: always; }
-//
-//  h2.inside {
-//    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
- 
-@mixin column-break($type: before, $value: auto){
-   @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}