compass 0.10.0.rc1 → 0.10.0.rc2

data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss

@@ -0,0 +1,13 @@
+// Provides a cross-browser method to implement `display: inline-block;`
+//
+// This file is a sass file to work around the fact that the
+// SCSS parser does not support the #prop hack at this time.
+// http://github.com/nex3/haml/issues/issue/119
+
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  #display: inline;
+  #vertical-align: auto; }

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

@@ -0,0 +1,19 @@
+// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
+//
+//     @param $opacity
+//         A number between 0 and 1, where 0 is transparent and 1 is opaque.
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  -moz-opacity: $opacity;
+  -khtml-opacity: $opacity;
+  -ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")");
+  filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); }
+
+// Make an element completely transparent.
+@mixin transparent {
+  @include opacity(0); }
+
+// Make an element completely opaque.
+@mixin opaque {
+  @include opacity(1); }

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

@@ -0,0 +1,18 @@
+// Provides CSS text shadows.
+//
+// Arguments are color, horizontal offset, vertical offset, and blur
+
+// These defaults make the arguments optional for this mixin
+//
+// If you like, set different defaults in your project
+
+$default-text-shadow-color: #aaaaaa !default;
+
+$default-text-shadow-h-offset: 1px !default;
+
+$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; }

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

@@ -0,0 +1,64 @@
+// 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; }
+
+// 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; }
+
+// transform-origin requires x and y coordinates
+//
+// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
+
+@mixin transform-origin($originx: 50%, $originy: 50%) {
+  @if $originx or $originy {
+    @if $originy {
+       @include apply-origin($originx or 50% $originy);
+     } @else {
+       @include apply-origin($originx); } } } 
+
+// A full transform mixin with everything you could want
+//
+// * including origin adjustments if you want them
+// * 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); }
+
+// Transform Partials
+//
+// These work well on their own, but they don't add to each other, they override.
+// Use them with extra origin args, or along side +transform-origin
+
+// Adjust only the scale, with optional origin coordinates
+
+@mixin scale($scale: 1.25, $originx: false, $originy: false) {
+  @include apply-transform(scale($scale));
+  @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); }
+
+// Adjust only the translation
+
+@mixin translate($transx: 0, $transy: 0) {
+  @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); }

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

@@ -0,0 +1,77 @@
+// CSS Transitions
+// Currently only works in Webkit.
+//
+// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
+// * We'll be prepared.
+//
+// Including this submodule sets following defaults for the mixins:
+//
+//     $default-transition-property : all
+//     $default-transition-duration : 1s
+//     $default-transition-function : false
+//     $default-transition-delay    : false
+//
+// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
+
+$default-transition-property: all !default;
+
+$default-transition-duration: 1s !default;
+
+$default-transition-function: false !default;
+
+$default-transition-delay: false !default;
+
+// One or more properties to transition
+//
+// * for multiple, use a comma-delimited list
+// * 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; }
+
+// One or more durations in seconds
+//
+// * for multiple, use a comma-delimited list
+// * 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; }
+
+// One or more timing functions
+//
+// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
+// * For multiple, use a comma-delimited list
+// * 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; }
+
+// One or more transition-delays in seconds
+//
+// * for multiple, use a comma-delimited list
+// * 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; }
+
+// Transition all-in-one shorthand
+
+@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); } }

data/frameworks/compass/stylesheets/compass/layout/_sticky-footer.scss

@@ -0,0 +1,23 @@
+// Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
+//
+// Must be mixed into the top level of your stylesheet.
+//
+// Footer element must be outside of root wrapper element.
+//
+// Footer must be a fixed height.
+
+@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
+  html, body {
+    height: 100%; }
+  #{$root-selector} {
+    clear: both;
+    min-height: 100%;
+    height: auto !important;
+    height: 100%;
+    margin-bottom: -$footer-height;
+    #{$root-footer-selector} {
+      height: $footer-height; } }
+  #{$footer-selector} {
+    clear: both;
+    position: relative;
+    height: $footer-height; } }

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

@@ -0,0 +1,6 @@
+@import "general/reset";
+@import "general/clearfix";
+@import "general/float";
+@import "general/tag-cloud";
+@import "general/hacks";
+@import "general/min";

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

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

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

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

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

@@ -0,0 +1,18 @@
+// 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.
+// 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; } } }

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

@@ -0,0 +1 @@
+@import "sprites/sprite-img";

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

@@ -0,0 +1,3 @@
+@import "tables/alternating-rows-and-columns";
+@import "tables/borders";
+@import "tables/scaffolding";

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

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

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

@@ -0,0 +1,24 @@
+@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
+@mixin clearfix {
+  overflow: hidden;
+  @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
+@mixin pie-clearfix {
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden; }
+  @include has-layout; }

data/frameworks/compass/stylesheets/compass/utilities/general/{_float.sass → _float.scss}

@@ -1,17 +1,17 @@
 //**\\
-  Float
+// Float
 
-@import clearfix.sass
+@import "clearfix";
 
 // Implementation of float:left with fix for double-margin bug
-=float-left
-  +float("left")
+@mixin float-left {
+  @include float(left); }
 
 // Implementation of float:right with fix for double-margin bug
-=float-right
-  +float("right")
+@mixin float-right {
+  @include float(right); }
 
 // Available as alternate syntax with just +float
-=float(!side = "left")
-  display: inline
-  float= !side
+@mixin float($side: left) {
+  display: inline;
+  float: $side; }

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

@@ -0,0 +1,13 @@
+@mixin has-layout {
+  // This makes ie6 get layout
+  display: inline-block;
+  // and this puts it back to block
+  & {
+    display: block; } }
+
+//**
+// A hack to supply IE6 (and below) with a different property value.
+// See 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/general/_min.scss

@@ -0,0 +1,16 @@
+@import "hacks";
+
+//**
+// Cross browser min-height mixin.
+@mixin min-height($value) {
+  @include hacked-minimum(height, $value); }
+
+//**
+// Cross browser min-width mixin.
+@mixin min-width($value) {
+  @include hacked-minimum(width, $value); }
+
+// @private This mixin is not meant to be used directly.
+@mixin hacked-minimum($property, $value) {
+  min-#{$property}: $value;
+  @include bang-hack($property, $value, auto); }

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

@@ -0,0 +1,122 @@
+// 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
+@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; }
+  *:focus {
+    @include reset-focus; }
+  body {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  /* tables still need 'cellspacing="0"' in the markup */
+  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.
+@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; }
+  /* tables still need 'cellspacing="0"' in the markup */
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+//Mixins partials
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0; }
+
+@mixin reset-font {
+  font: {
+    weight: inherit;
+    style: inherit;
+    size: 100%;
+    family: inherit; };
+  vertical-align: baseline; }
+
+@mixin reset-focus {
+  outline: 0; }
+
+@mixin reset-body {
+  line-height: 1;
+  color: black;
+  background: white; }
+
+@mixin reset-list-style {
+  list-style: none; }
+
+@mixin reset-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle; }
+
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+@mixin reset-quotation {
+  quotes: "" "";
+  &:before, &:after {
+    content: ""; } }
+
+@mixin reset-image-anchor-border {
+  border: none; }
+
+@mixin reset-html5 {
+  section, article, aside, header, footer, nav, dialog, figure {
+    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; } } }