compass 0.10.2 → 0.10.3.pre.1

data/VERSION.yml

@@ -1,4 +1,5 @@
 --- 
 :major: 0
 :minor: 10
-:patch: 2
+:patch: 3
+:build: pre.1

data/frameworks/blueprint/stylesheets/blueprint/_colors.scss

@@ -3,6 +3,7 @@ $quiet_color:    $font_color + #333333 !default;
 $loud_color:     $font_color - #222222 !default;
 $header_color:   $font_color - #111111 !default;
 $alt_text_color: #666666 !default;
+$blueprint_background_color: #eeeeee !default;
 
 $link_color:         #000099               !default;
 $link_hover_color:   black                 !default;

data/frameworks/blueprint/stylesheets/blueprint/_form.scss

@@ -21,6 +21,7 @@
   input {
     &.text,
     &.title,
+    &[type=email],
     &[type=text],
     &[type=password]   { margin: 0.5em 0; background-color: white; padding: 5px; }
     &.title            { font-size: 1.5em; }
@@ -42,6 +43,7 @@
   input {
     &.text,
     &.title,
+    &[type=email],
     &[type=text],
     &[type=password] { width: $input_width; }
   }
@@ -56,7 +58,7 @@
 ) {
   fieldset {
     border: 1px solid $fieldset_border_color; }
-  input.text, input.title, input[type=text], input[type=password],
+  input.text, input.title, input[type=email], input[type=text], input[type=password],
   textarea, select {
     border: 1px solid $unfocused_border_color;
     &:focus {

data/frameworks/blueprint/stylesheets/blueprint/_liquid.scss

@@ -31,6 +31,7 @@
 //  @import blueprint/liquid
 //  -------------------------------------------------------------------
 
+@import "compass/utilities/general/clearfix";
 @import "compass/utilities/general/float";
 
 // Main layout grid, override these constants to build your grid and container sizes.

data/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss

@@ -1,4 +1,5 @@
 @import "grid";
+@import "form";
 
 // The styles contained here are meant to provide for an attractive experience out of the box
 // and are expected to be removed once custom visual design begins.

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

@@ -75,14 +75,14 @@ $blueprint-font-size: 12px !default;
     img.right       { @include float-right; margin: 1.5em 0 1.5em 1.5em; padding: 0; }
                   }
   a               { text-decoration: underline; @include link-colors($link-color, $link-hover-color, $link-active-color, $link-visited-color, $link-focus-color); }
-  blockquote      { margin: 1.5em; color: #666666; font-style: italic; }
+  blockquote      { margin: 1.5em; color: $alt_text_color; font-style: italic; }
   strong          { font-weight: bold; }
   em              { font-style: italic; }
   dfn             { font-style: italic; font-weight: bold; }
   sup, sub        { line-height: 0; }
   abbr, acronym   { border-bottom: 1px dotted #666666; }
   address         { margin: 0 0 1.5em; font-style: italic; }
-  del             { color: #666666; }
+  del             { color: $alt_text_color; }
   pre             { margin: 1.5em 0; white-space: pre; }
   pre, code, tt   { @include fixed-width-text; }
   li ul, li ol    { margin: 0; }
@@ -98,7 +98,7 @@ $blueprint-font-size: 12px !default;
   th, td, caption { padding: 4px 10px 4px 5px; }
   tr.even td      { background: $blueprint-table-stripe-color; }
   tfoot           { font-style: italic; }
-  caption         { background: #eeeeee; }
+  caption         { background: $blueprint_background_color; }
   .quiet          { @include quiet; }
   .loud           { @include loud; }
 }

data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss

@@ -3,9 +3,69 @@
 $default-border-radius: 5px !default;
 
 // Round all corners by a specific amount, defaults to value of `$default-border-radius`.
-
-@mixin border-radius($radius: $default-border-radius) {
-  @include experimental(border-radius, $radius);
+//
+// When two values are passed, the first is the horizontal radius
+// and the second is the vertical radius.
+//
+// Note: webkit does not support shorthand syntax for several corners at once.
+// So in the case where you pass several values only the first will be passed to webkit.
+//
+// Examples:
+//
+//     .simple   { @include border-radius(4px, 4px); }
+//     .compound { @include border-radius(2px 5px, 3px 6px); }
+//     .crazy    { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
+//
+// Which generates:
+//    .simple {
+//      -webkit-border-radius: 4px 4px;
+//      -moz-border-radius: 4px / 4px;
+//      -o-border-radius: 4px / 4px;
+//      -ms-border-radius: 4px / 4px;
+//      -khtml-border-radius: 4px / 4px;
+//      border-radius: 4px / 4px; }
+//    
+//    .compound {
+//      -webkit-border-radius: 2px 3px;
+//      -moz-border-radius: 2px 5px / 3px 6px;
+//      -o-border-radius: 2px 5px / 3px 6px;
+//      -ms-border-radius: 2px 5px / 3px 6px;
+//      -khtml-border-radius: 2px 5px / 3px 6px;
+//      border-radius: 2px 5px / 3px 6px; }
+//    
+//    .crazy {
+//      -webkit-border-radius: 1px 2px;
+//      -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//      -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//      -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//      -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//      border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
+
+@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
+
+  @if $vertical-radius {
+    // Webkit doesn't understand the official shorthand syntax for specifying
+    // a vertical radius unless so in case there's several we only take the first.
+    @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius),
+      not -moz,
+      -webkit,
+      not -o,
+      not -ms,
+      not -khtml,
+      not official
+    );
+    @include experimental("border-radius", $radius unquote("/") $vertical-radius,
+      -moz,
+      not -webkit,
+      -o,
+      -ms,
+      -khtml,
+      official
+    );
+  }
+  @else {
+    @include experimental(border-radius, $radius);
+  }
 }
 
 // Round radius at position by amount.

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

@@ -17,21 +17,33 @@ $default-box-shadow-v-offset: 1px !default;
 // The default blur length.
 $default-box-shadow-blur: 5px !default;
 
+// The default spread length.
+$default-box-shadow-spread : 0 !default;
+
+// The default shadow instet: inset or false (for standard shadow).
+$default-box-shadow-inset : false !default;
+
 // Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
-// Arguments are color, horizontal offset, vertical offset, and blur length.
+// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
 
 @mixin box-shadow(
-  $color: $default-box-shadow-color,
-  $hoff: $default-box-shadow-h-offset,
-  $voff: $default-box-shadow-v-offset,
-  $blur: $default-box-shadow-blur
+  $color  : $default-box-shadow-color, 
+  $hoff   : $default-box-shadow-h-offset, 
+  $voff   : $default-box-shadow-v-offset, 
+  $blur   : $default-box-shadow-blur, 
+  $spread : $default-box-shadow-spread, 
+  $inset  : $default-box-shadow-inset
 ) {
+  $full   : $color $hoff $voff $blur $spread;
+  @if $inset {
+    $full: $full $inset;
+  }
   @if $color == none {
     @include experimental(box-shadow, none,
       -moz, -webkit, -o, not -ms, not -khtml, official
     );
-  } @else {
-    @include experimental(box-shadow, $color $hoff $voff $blur,
+  } @else {  
+    @include experimental(box-shadow, $full,
       -moz, -webkit, -o, not -ms, not -khtml, official
     );
   }

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

@@ -6,29 +6,28 @@
 // * $font-files is required using font-files('relative/location', 'format').
 //   for best results use this order: woff, opentype/truetype, svg
 // * $eot is required by IE, and is a relative location of the eot file.
-// * postscript name is required by some browsers to look for local fonts.
 
 @mixin font-face($name, $font-files, $eot: false, $postscript: false, $style: false) {
+  @if $postscript or $style {
+    @warn "The $postscript and $style variables have been deprecated in favor of the Paul Irish smiley bulletproof technique.";
+  }
   @font-face {
-    font-family: "#{$name}";
-    @if $style {
-      font-style: $style; }
+    font-family: quote($name);
     @if $eot {
       src: font-url($eot); }
-    @if $postscript {
-      src: local("#{$name}"), local("#{$postscript}"), #{$font-files}; }
-    @else {
-      src: local("#{$name}"), #{$font-files}; } } }
+    src: local("☺"), $font-files; 
+  } 
+}
 
 // EXAMPLE
-// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot", "thisname")
+// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot")
 //
 // will generate:
 //
 //   @font-face { 
 //     font-family: 'this name'; 
 //     src: url('fonts/this.eot'); 
-//     src: local('this name'), local('thisname'), 
-//       url('this.otf') format('woff'), 
-//       url('this.woff') format('opentype'); 
+//     src: local("☺"),
+//       url('fonts/this.otf') format('woff'), 
+//       url('fonts/this.woff') format('opentype'); 
 //   }

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

@@ -37,13 +37,14 @@
   $background: unquote("");
   @if $image { $background : $image + unquote(", "); }
   $start: unquote($start);
-  $end: grad-opposite-position($start);
+  $end: opposite-position($start);
   @if $experimental-support-for-webkit {
     background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
   }
   @if $experimental-support-for-mozilla {
     background-image: #{$background}-moz-linear-gradient($start, $color-stops);
   }
+  background-image: linear-gradient($start, $color-stops);
 }
 
 // Due to limitation's of webkit, the radial gradient mixin works best if you use
@@ -77,4 +78,5 @@
   @if $experimental-support-for-mozilla {
     background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
   }
+  background-image: radial-gradient($center-position, circle, $color-stops);
 }

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

@@ -6,15 +6,7 @@
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
-  // XXX consider only using the official property. I think -moz, -webkit, and -o support it.
-  @include experimental(opacity, $opacity,
-    -moz,
-    -webkit,
-    -o,
-    not -ms, // microsoft uses the filters below instead
-    -khtml,
-    official
-  );
+  opacity: $opacity;
   @if $experimental-support-for-microsoft {
     $value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
     @include experimental(filter, $value,

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

@@ -18,12 +18,9 @@
 // [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    : " ";
+    content    : "\0020";
     display    : block;
     height     : 0;
     clear      : both;

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

@@ -16,6 +16,7 @@
 //       +horizontal-list-item
 
 @import "bullets";
+@import "compass/utilities/general/clearfix";
 @import "compass/utilities/general/reset";
 @import "compass/utilities/general/float";
 
@@ -31,21 +32,21 @@
 // :last-child is not fully supported
 // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
 
-@mixin horizontal-list-item($padding: 4px) {
+@mixin horizontal-list-item($padding: 4px, $direction: left) {
   @include no-bullet;
   white-space: nowrap;
-  @include float-left;
+  @include float($direction);
   padding: {
     left: $padding;
-    right: $padding; };
-  &:first-child, &.first {
-    padding-left: 0px; }
-  &:last-child, &.last {
-    padding-right: 0px; } }
+    right: $padding;
+  };
+  &:first-child, &.first { padding-#{$direction}: 0px; }
+  &:last-child, &.last   { padding-#{opposite-position($direction)}: 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) {
+@mixin horizontal-list($padding: 4px, $direction: left) {
   @include horizontal-list-container;
   li {
-    @include horizontal-list-item($padding); } }
+    @include horizontal-list-item($padding, $direction); } }

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

@@ -2,18 +2,17 @@
 
 @mixin inline-list {
   list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-  display: inline;
-  li {
+  &, & li {
     margin: 0px;
     padding: 0px;
-    display: inline; } }
+    display: inline;
+  }
+}
 
 // makes an inline list that is comma delimited.
 // Please make note of the browser support issues before using this mixin.
 //
-// use of `:content` and `:after` is not fully supported in all browsers.
+// 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.
@@ -22,8 +21,9 @@
 @mixin comma-delimited-list {
   @include inline-list;
   li {
-    &:after {
-      content: ", "; }
+    &:after { content: ", "; }
     &:last-child, &.last {
-      &:after {
-        content: ""; } } } }
+      &:after { content: ""; }
+    }
+  }
+}

data/frameworks/rails/stylesheets/_rails.scss

@@ -0,0 +1 @@
+@import "rails/pagination";

data/frameworks/rails/stylesheets/rails/_pagination.scss

@@ -0,0 +1 @@
+// TODO

data/frameworks/rails/stylesheets/rails/_scaffolding.scss

@@ -0,0 +1,56 @@
+body { background-color: #fff; color: #333; }
+
+body, p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size:   13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a { color: #000; }
+a:visited { color: #666; }
+a:hover { color: #fff; background-color:#000; }
+
+div.field, div.actions {
+  margin-bottom: 10px;
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+
+  h2 {
+      text-align: left;
+      font-weight: bold;
+      padding: 5px 5px 5px 15px;
+      font-size: 12px;
+      margin: -7px;
+      margin-bottom: 0px;
+      background-color: #c00;
+      color: #fff;
+    }
+
+  ul li {
+    font-size: 12px;
+    list-style: square;
+  }
+}

data/lib/compass/app_integration/rails.rb

@@ -34,6 +34,13 @@ module Compass
         end
       end
 
+      def initialize!
+        rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s
+        Compass.add_project_configuration(File.join(root, "config", "compass.rb"))
+        Compass.discover_extensions!
+        Compass.configure_sass_plugin!
+        Compass.handle_configuration_change!
+      end
     end
   end
 end