compass 0.11.beta.2 → 0.11.beta.3

data/VERSION.yml

@@ -2,4 +2,4 @@
 :major: 0
 :minor: 11
 :state: beta
-:build: 2
+:build: 3

data/examples/compass/src/utilities.scss

@@ -3,7 +3,7 @@
 @import "yui/modules/base";
 @import "blueprint/grid";
 @import "blueprint/scaffolding";
-@import "compass/utilities/text/ellipsis";
+@import "compass/typography/text/ellipsis";
 
 html {
   @include yui-base; }
@@ -55,7 +55,7 @@ h2 {
   ul.inline {
     @include inline-list; }
   ul.comma-delimited {
-    @include comma-delimited-list; }
+    @include delimited-list; }
   ol.pretty {
     @include pretty-bullets("blue_arrow.gif", 5px, 7px, 18px); } }
 

data/features/step_definitions/command_line_steps.rb

@@ -193,7 +193,7 @@ end
 
 Then /^the following configuration properties are set in ([^ ]+):$/ do |config_file, table|
   
-  config = Compass::Configuration::Data.new_from_file(config_file)
+  config = Compass::Configuration::FileData.new_from_file(config_file)
   table.hashes.each do |hash|
    config.send(hash['property']).should == hash['value']
   end

data/frameworks/blueprint/stylesheets/blueprint/_typography.scss

@@ -1,5 +1,5 @@
 @import "colors";
-@import "compass/utilities/links/link-colors";
+@import "compass/typography/links/link-colors";
 @import "compass/utilities/general/float";
 
 $blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default;

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

@@ -1,4 +1,4 @@
-@import "compass/utilities/text/nowrap";
+@import "compass/typography/text/nowrap";
 @import "compass/utilities/general/clearfix";
 
 // Most of these utility classes are not "semantic". If you use them,

data/frameworks/compass/stylesheets/_compass.scss

@@ -1,2 +1,3 @@
 @import "compass/utilities";
+@import "compass/typography";
 @import "compass/css3";

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

@@ -14,3 +14,4 @@
 @import "css3/font-face";
 @import "css3/transform";
 @import "css3/transition";
+@import "css3/appearance";

data/frameworks/compass/stylesheets/compass/_reset-legacy.scss

@@ -0,0 +1,3 @@
+@import "reset/utilities-legacy";
+
+@include global-reset;

data/frameworks/compass/stylesheets/compass/_typography.scss

@@ -0,0 +1,4 @@
+@import "typography/links";
+@import "typography/lists";
+@import "typography/text";
+@import "typography/vertical_rhythm";

data/frameworks/compass/stylesheets/compass/_utilities.scss

@@ -1,6 +1,9 @@
+@import "utilities/color";
 @import "utilities/general";
-@import "utilities/links";
-@import "utilities/lists";
 @import "utilities/sprites";
 @import "utilities/tables";
-@import "utilities/text";
+
+// deprecated
+@import "typography/links";
+@import "typography/lists";
+@import "typography/text";

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

@@ -0,0 +1,13 @@
+@import "shared";
+
+// Change the appearance for Mozilla, Webkit and the future
+//
+// @param $ap
+//   [ none | normal | icon | window | button | menu | field ]
+
+@mixin appearance($ap) {
+  $ap: unquote($ap);
+  @include experimental(appearance, $ap,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @import "shared";
 
 // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
@@ -14,19 +13,20 @@
 // If you need to generate other formats check out the Font Squirrel
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 
-@mixin font-face($name, $font-files, $eot: false) {
+@mixin font-face(
+  $name, 
+  $font-files, 
+  $eot: false
+) {
+  $iefont: unquote("#{$eot}?iefix");
   @font-face {
     font-family: quote($name);
-    @if $eot { src: font-url($eot); }
-    src: local("☺"), $font-files; 
-  }
-  @media screen and (max-device-width: 480px) {
-    @font-face {
-      font-family: quote($name);   
-      src: $font-files;
+    @if $eot {
+      src: font-url($eot);
+      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
     }
+    src: $font-files; 
   }
- 
 }
 
 // EXAMPLE

data/frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss

@@ -0,0 +1,135 @@
+// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td {
+    @include reset-box-model;
+    @include reset-font; }
+  body {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// 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.
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin nested-reset {
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, 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 reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: {
+    weight: inherit;
+    style: inherit;
+    size: 100%;
+    family: inherit; };
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1;
+  color: black;
+  background: white; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: "" "";
+  &:before, &:after {
+    content: ""; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for html5 elements
+// so they are rendered correctly in browsers that don't recognize them
+// and reset in browsers that have default styles for them.
+@mixin reset-html5 {
+  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+    @include reset-box-model;
+    display: block; } }
+
+// Resets the display of inline and block elements to their default display
+// according to their tag type. Elements that have a default display that varies across
+// versions of html or browser are not handled here, but this covers the 90% use case.
+// Usage Example:
+//
+//     // Turn off the display for both of these classes
+//     .unregistered-only, .registered-only
+//       display: none
+//     // Now turn only one of them back on depending on some other context.
+//     body.registered
+//       +reset-display(".registered-only")
+//     body.unregistered
+//       +reset-display(".unregistered-only")
+@mixin reset-display($selector: "", $important: false) {
+  #{append-selector(elements-of-type("inline"), $selector)} {
+    @if $important {
+      display: inline !important; }
+    @else {
+      display: inline; } }
+  #{append-selector(elements-of-type("block"), $selector)} {
+    @if $important {
+      display: block !important; }
+    @else {
+      display: block; } } }

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

@@ -1,17 +1,20 @@
-// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
 // Global reset rules.
 // For more specific resets, use the reset mixins provided below
-//
-// *Please Note*: tables still need `cellspacing="0"` in the markup.
 @mixin global-reset {
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td {
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
     @include reset-box-model;
     @include reset-font; }
   body {
@@ -25,17 +28,26 @@
   q, blockquote {
     @include reset-quotation; }
   a img {
-    @include reset-image-anchor-border; } }
+    @include reset-image-anchor-border; }
+  @include reset-html5; }
 
 // 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.
-//
-// *Please Note*: tables still need `cellspacing="0"` in the markup.
 @mixin nested-reset {
-  div, span, object, iframe, h1, h2, h3, h4, h5, h6, 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 {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
     @include reset-box-model;
     @include reset-font; }
   table {
@@ -51,16 +63,12 @@
 @mixin reset-box-model {
   margin: 0;
   padding: 0;
-  border: 0;
-  outline: 0; }
+  border: 0; }
 
 // Reset the font and vertical alignment.
 @mixin reset-font {
-  font: {
-    weight: inherit;
-    style: inherit;
-    size: 100%;
-    family: inherit; };
+  font-size: 100%;
+  font: inherit;
   vertical-align: baseline; }
 
 // Resets the outline when focus.
@@ -70,9 +78,7 @@
 
 // Reset a body element.
 @mixin reset-body {
-  line-height: 1;
-  color: black;
-  background: white; }
+  line-height: 1; }
 
 // Reset the list style of an element.
 @mixin reset-list-style {
@@ -80,9 +86,8 @@
 
 // Reset a table
 @mixin reset-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  vertical-align: middle; }
+  border-collapse: collapse;
+  border-spacing: 0; }
 
 // Reset a table cell (`th`, `td`)
 @mixin reset-table-cell {
@@ -92,9 +97,10 @@
 
 // Reset a quotation (`q`, `blockquote`)
 @mixin reset-quotation {
-  quotes: "" "";
+  quotes: none;
   &:before, &:after {
-    content: ""; } }
+    content: ""; 
+    content: none; } }
 
 // Resets the border.
 @mixin reset-image-anchor-border {
@@ -105,8 +111,8 @@
 // so they are rendered correctly in browsers that don't recognize them
 // and reset in browsers that have default styles for them.
 @mixin reset-html5 {
-  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
-    @include reset-box-model;
+  article, aside, details, figcaption, figure, 
+  footer, header, hgroup, menu, nav, section {
     display: block; } }
 
 // Resets the display of inline and block elements to their default display

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

@@ -0,0 +1,3 @@
+@import "links/hover-link";
+@import "links/link-colors";
+@import "links/unstyled-link";

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

@@ -0,0 +1,4 @@
+@import "lists/horizontal-list";
+@import "lists/inline-list";
+@import "lists/inline-block-list";
+@import "lists/bullets";

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

@@ -0,0 +1,3 @@
+@import "text/ellipsis";
+@import "text/nowrap";
+@import "text/replacement";

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

@@ -0,0 +1,124 @@
+// The base font size
+$base-font-size: 16px !default;
+
+// The base line height is the basic unit of line hightness.
+$base-line-height: 24px !default;
+
+// set the default border style for rhythm borders
+$default-rhythm-border-style: solid !default;
+
+// The IE font ratio is a fact of life. Deal with it.
+$ie-font-ratio: 16px / 100%;
+
+// The basic unit of font rhythm
+$base-rhythm-unit: $base-line-height / $base-font-size * 1em;
+
+// The leader is the amount of whitespace in a line.
+// It might be useful in your calculations
+$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size;
+
+// The half-leader is the amount of whitespace above and below a line.
+// It might be useful in your calculations
+$base-half-leader: $base-leader / 2;
+
+// Establishes a font baseline for the given font-size in pixels
+@mixin establish-baseline($font-size: $base-font-size) {
+  body {
+    font-size: $font-size / $ie-font-ratio;
+    @include adjust-leading-to(1, $font-size); 
+  }
+  html>body {
+    font-size: $font-size; 
+  } 
+}
+
+// Show a background image that can be used to debug your alignments.
+@mixin debug-vertical-alignment($img: 'underline.png') {
+  background: url($img); 
+}
+
+// Adjust a block to have a different font size and leading to maintain the rhythm.
+// $lines is a number that is how many times the baseline rhythm this
+// font size should use up. Does not have to be an integer, but it defaults
+// to the smallest integer that is large enough to fit the font.
+// Use $from_size to adjust from a non-base font-size.
+@mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
+  font-size: 1em * $to-size / $from-size;
+  @include adjust-leading-to($lines, $to-size); 
+}
+
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+  line-height: 1em * $lines * $base-line-height / $font-size; 
+}
+
+// Apply leading whitespace
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-top: 1em * $lines * $base-line-height / $font-size; 
+}
+
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, padding); 
+}
+
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, margin); 
+}
+
+// Apply trailing whitespace
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; 
+}
+
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, padding); 
+}
+
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, margin); 
+}
+
+// Whitespace application shortcut
+// Apply top margin/padding + bottom padding/margin
+@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
+  @include leader($leader, $font-size);
+  @include padding-leader($padding-leader, $font-size);
+  @include padding-trailer($padding-trailer, $font-size);
+  @include trailer($trailer, $font-size);
+}
+
+// Apply a border width to any side without destroying the vertical rhythm
+@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border-#{$side}: {
+    style: $border-style;
+    width: 1em * $width / $font-size; 
+  };
+  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
+
+// Aplly rhythm borders equally to all sides
+@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border: {
+    style: $border-style;
+    width: 1em * $width / $font-size; };
+  padding: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
+
+// Apply a leading rhythm border
+@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); 
+}
+
+// Apply a trailing rhythm border
+@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); 
+}
+
+// Apply both leading and trailing rhythm borders
+@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include leading-border($width, $lines, $font-size, $border-style);
+  @include trailing-border($width, $lines, $font-size, $border-style); 
+}
+
+@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include horizontal-borders($width, $lines, $font-size, $border-style); 
+}