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

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

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

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

@@ -0,0 +1,28 @@
+// Set all the colors for a link with one mixin call.
+// Order of arguments is:
+//
+// 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;
+  @if $visited {
+    &:visited {
+      color: $visited; } }
+  @if $focus {
+    &:focus {
+      color: $focus; } }
+  @if $hover {
+    &:hover {
+      color: $hover; } }
+  @if $active {
+    &:active {
+      color: $active; } } }

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

@@ -0,0 +1,7 @@
+// A link that looks and acts like the text it is contained within
+@mixin unstyled-link {
+  color: inherit;
+  text-decoration: inherit;
+  cursor: inherit;
+  &:active, &:focus {
+    outline: none; } }

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

@@ -0,0 +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;
+}
+
+// turns off the bullets for an entire list
+@mixin no-bullets {
+  list-style: none;
+  li { @include no-bullet; }
+}
+
+// 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;
+  }
+}

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

@@ -0,0 +1,61 @@
+// Horizontal list layout module.
+//
+// Easy mode using simple descendant li selectors:
+//
+//   ul.nav
+//     +horizontal-list
+//
+// Advanced mode:
+// If you need to target the list items using a different selector then use
+// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
+// This may help when working on layouts involving nested lists. For example:
+//
+//   ul.nav
+//     +horizontal-list-container
+//     > li
+//       +horizontal-list-item
+
+@import "bullets";
+@import "compass/utilities/general/clearfix";
+@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.
+//
+// :last-child is not fully supported
+// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
+// 
+// IE8 ignores rules that are included on the same line as :last-child
+// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list-item($padding: 4px, $direction: left) {
+  @include no-bullet;
+  white-space: nowrap;
+  @include float($direction);
+  @if $padding {
+    padding: {
+      left: $padding;
+      right: $padding;
+    }
+    &:first-child, &.first { padding-#{$direction}: 0; }
+    &:last-child { padding-#{opposite-position($direction)}: 0; }
+    &.last { padding-#{opposite-position($direction)}: 0; }
+  }
+}
+
+// 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.
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list($padding: 4px, $direction: left) {
+  @include horizontal-list-container;
+  li {
+    @include horizontal-list-item($padding, $direction); } }

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

@@ -0,0 +1,47 @@
+// Inline-Block list layout module.
+//
+// Easy mode using simple descendant li selectors:
+//
+//   ul.nav
+//     +inline-block-list
+//
+// Advanced mode:
+// If you need to target the list items using a different selector then use
+// +inline-block-list-container on your ul/ol and +inline-block-list-item on your li.
+// This may help when working on layouts involving nested lists. For example:
+//
+//   ul.nav
+//     +inline-block-list-container
+//     > li
+//       +inline-block-list-item
+
+@import "bullets";
+@import "horizontal-list";
+@import "compass/utilities/general/float";
+@import "compass/css3/inline-block";
+
+// Can be mixed into any selector that target a ul or ol that is meant
+// to have an inline-block layout. Used to implement +inline-block-list.
+@mixin inline-block-list-container {
+  @include horizontal-list-container; }
+
+// Can be mixed into any li selector that is meant to participate in a horizontal layout.
+// Used to implement +inline-block-list.
+
+@mixin inline-block-list-item($padding: false) {
+  @include no-bullet;
+  @include inline-block;
+  white-space: nowrap;
+  @if $padding {
+    padding: {
+      left: $padding;
+      right: $padding;
+    };    
+  }
+}
+
+// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.
+@mixin inline-block-list($padding: false) {
+  @include inline-block-list-container;
+  li {
+    @include inline-block-list-item($padding); } }

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

@@ -0,0 +1,44 @@
+// makes a list inline.
+
+@mixin inline-list {
+  list-style-type: none;
+  &, & li {
+    margin: 0px;
+    padding: 0px;
+    display: inline;
+  }
+}
+
+// makes an inline list delimited with the passed string.
+// Defaults to making a comma-separated list.
+//
+// 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 quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)
+//
+// `:last-child` is not fully supported.
+// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
+//
+// IE8 ignores rules that are included on the same line as :last-child
+// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+
+@mixin delimited-list($separator: ", ") {
+  @include inline-list;
+  li {
+    &:after { content: $separator; }
+    &:last-child {
+      &:after { content: ""; }
+    }
+    &.last {
+      &:after { content: ""; }
+    }
+  }
+}
+
+// See [delimited-list](#mixin-delimited-list)
+// @deprecated
+@mixin comma-delimited-list {
+  @warn "comma-delimited-list is deprecated. Please use delimited-list instead.";
+  @include delimited-list;
+}

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

@@ -0,0 +1,25 @@
+@import "compass/css3/shared";
+
+// To get full firefox support, you must install the ellipsis pattern:
+//
+//     compass install compass/ellipsis
+$use-mozilla-ellipsis-binding: false !default;
+
+// This technique, by [Justin Maxwell](http://code404.com/), was originally
+// published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/).
+// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/).
+@mixin ellipsis($no-wrap: true) {
+  @if $no-wrap { white-space: nowrap; }
+  overflow: hidden;
+  @include experimental(text-overflow, ellipsis,
+    not -moz,
+    not -webkit,
+    -o,
+    -ms,
+    not -khtml,
+    official
+  );
+  @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding {
+    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));    
+  }
+}

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

@@ -0,0 +1,2 @@
+// When remembering whether or not there's a hyphen in white-space is too hard
+@mixin nowrap { white-space: nowrap; }

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

@@ -0,0 +1,34 @@
+// Hides html text and replaces it with an image.
+// If you use this on an inline element, you will need to change the display to block or inline-block.
+// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
+//
+// Parameters:
+//
+// * `img` -- the relative path from the project image directory to the image.
+// * `x` -- the x position of the background image.
+// * `y` -- the y position of the background image.
+@mixin replace-text($img, $x: 50%, $y: 50%) {
+  @include hide-text;
+  background: {
+    image: image-url($img);
+    repeat: no-repeat;
+    position: $x $y;
+  };
+}
+
+// Like the `replace-text` mixin, but also sets the width
+// and height of the element according the dimensions of the image.
+@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%) {
+  @include replace-text($img, $x, $y);
+  width: image-width($img);
+  height: image-height($img);
+}
+
+// Hides text in an element so you can see the background.
+@mixin hide-text {
+  $approximate_em_value: 12px / 1em;
+  $wider_than_any_screen: -9999em;
+  text-indent: $wider_than_any_screen * $approximate_em_value;
+  overflow: hidden;
+  text-align: left;
+}

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

@@ -0,0 +1 @@
+@import "color/contrast";

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

@@ -1,3 +1,5 @@
-@import "links/hover-link";
-@import "links/link-colors";
-@import "links/unstyled-link";
+@warn "This import is deprecated. Use 'compass/typography/links' instead.";
+
+@import "../typography/links/hover-link";
+@import "../typography/links/link-colors";
+@import "../typography/links/unstyled-link";

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

@@ -1,4 +1,6 @@
-@import "lists/horizontal-list";
-@import "lists/inline-list";
-@import "lists/inline-block-list";
-@import "lists/bullets";
+@warn "This import is deprecated. Use 'compass/typography/lists' instead.";
+
+@import "../typography/lists/horizontal-list";
+@import "../typography/lists/inline-list";
+@import "../typography/lists/inline-block-list";
+@import "../typography/lists/bullets";

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

@@ -1,3 +1,5 @@
-@import "text/ellipsis";
-@import "text/nowrap";
-@import "text/replacement";
+@warn "This import is deprecated. Use 'compass/typography/text' instead.";
+
+@import "../typography/text/ellipsis";
+@import "../typography/text/nowrap";
+@import "../typography/text/replacement";

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

@@ -0,0 +1,28 @@
+$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".
+@function contrast-color(
+  $color,
+  $dark: $contrasted-dark-default,
+  $light: $contrasted-light-default,
+  $threshold: $contrasted-lightness-threshold
+) {
+  @return if(lightness($color) < $threshold, $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).
+@mixin contrasted(
+  $background-color,
+  $dark: $contrasted-dark-default,
+  $light: $contrasted-light-default,
+  $threshold: $contrasted-lightness-threshold
+) {
+  background-color: $background-color;
+  color: contrast-color($background-color, $dark, $light, $threshold);
+}

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

@@ -13,3 +13,18 @@
 @mixin float($side: left) {
   display: inline;
   float: unquote($side); }
+
+// Resets floated elements back to their default of `float: none` and defaults
+// to `display: block` unless you pass `inline` as an argument
+//
+// Usage Example:
+//
+//     body.homepage
+//       #footer li
+//         +float-left
+//     body.signup
+//       #footer li
+//         +reset-float
+@mixin reset-float($display: block) {
+  float: none;
+  display: $display; }

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

@@ -1,5 +1,3 @@
-// a link that only has an underline when you hover over it
-@mixin hover-link {
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline; } }
+@warn "This import is deprecated. Use 'compass/typography/links/hover-link' instead.";
+
+@import "../../typography/links/hover-link";

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

@@ -1,28 +1,3 @@
-// Set all the colors for a link with one mixin call.
-// Order of arguments is:
-//
-// 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)
+@warn "This import is deprecated. Use 'compass/typography/links/link-colors' instead.";
 
-@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
-  color: $normal;
-  @if $visited {
-    &:visited {
-      color: $visited; } }
-  @if $focus {
-    &:focus {
-      color: $focus; } }
-  @if $hover {
-    &:hover {
-      color: $hover; } }
-  @if $active {
-    &:active {
-      color: $active; } } }
+@import "../../typography/links/link-colors";

data/frameworks/compass/stylesheets/compass/utilities/links/_unstyled-link.scss

@@ -1,7 +1,3 @@
-// A link that looks and acts like the text it is contained within
-@mixin unstyled-link {
-  color: inherit;
-  text-decoration: inherit;
-  cursor: inherit;
-  &:active, &:focus {
-    outline: none; } }
+@warn "This import is deprecated. Use 'compass/typography/links/unstyled-link' instead.";
+
+@import "../../typography/links/unstyled-link";

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

@@ -1,34 +1,3 @@
-// Turn off the bullet for an element of a list
-@mixin no-bullet {
-  list-style-image : none;
-  list-style-type  : none;
-  margin-left      : 0px;
-}
+@warn "This import is deprecated. Use 'compass/typography/lists/bullets' instead.";
 
-// turns off the bullets for an entire list
-@mixin no-bullets {
-  list-style: none;
-  li { @include no-bullet; }
-}
-
-// 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;
-  }
-}
+@import "../../typography/lists/bullets";