compass 0.10.0.rc1 → 0.10.0.rc2

data/frameworks/blueprint/templates/semantic/partials/_base.sass

@@ -0,0 +1,11 @@
+// Here is where you can define your constants for your application and to configure the blueprint framework.
+// Feel free to delete these if you want keep the defaults:
+
+!blueprint_grid_columns = 24
+!blueprint_container_size = 950px
+!blueprint_grid_margin  = 10px
+
+// Use this to calculate the width based on the total width.
+// Or you can set !blueprint_grid_width to a fixed value and unset !blueprint_container_size -- it will be calculated for you.
+!blueprint_grid_width   = (!blueprint_container_size + !blueprint_grid_margin) / !blueprint_grid_columns - !blueprint_grid_margin
+

data/frameworks/blueprint/templates/semantic/partials/_form.sass

@@ -0,0 +1,6 @@
+// Only apply the blueprint form styles to forms with
+// a class of "bp". This makes it easier to style
+// forms from scratch if you need to.
+
+form.bp
+  +blueprint-form

data/frameworks/blueprint/templates/semantic/partials/_page.sass

@@ -0,0 +1,18 @@
+// Import the non-default scaffolding module to help us get started.
+@import blueprint/scaffolding
+
+// This configuration will only apply the
+// blueprint styles to pages with a body class of "bp"
+// This makes it easier to have pages without blueprint styles
+// when you're using a single/combined stylesheet.
+
+body.bp
+  +blueprint-typography(true)
+  +blueprint-utilities
+  +blueprint-debug
+  +blueprint-interaction
+
+// Remove the scaffolding when you're ready to start doing visual design.
+// Or leave it in if you're happy with how blueprint looks out-of-the-box
++blueprint-scaffolding("body.bp")
+

data/frameworks/blueprint/templates/semantic/partials/_two_col.sass

@@ -0,0 +1,38 @@
+// Page layout can be done using mixins applied to your semantic classes and IDs
+// For instance this layout defines a two column layout on pages with
+// a body class of "two-col".
+//
+// The markup would look like:
+//    <div id="container">
+//      <div id="header"></div>
+//      <div id="sidebar"></div>
+//      <div id="content"></div>
+//      <div id="footer"></div>
+//    </div>
+//
+// and the layout would look like:
+//    +------------------------+
+//    |        #header         |
+//    +--------+---------------+
+//    |        |               |
+//    |#sidebar|    #content   |
+//    |        |               |
+//    +------------------------+
+//    |        #footer         |
+//    +--------+---------------+
+
+body.two-col
+  #container
+    +container
+  #header, #footer
+    +column(!blueprint_grid_columns)
+  #sidebar
+    // One third of the grid columns, rounding down. With 24 cols, this is 8.
+    !sidebar_columns = floor(!blueprint_grid_columns / 3)
+    +column(!sidebar_columns)
+  #content
+    // Two thirds of the grid columns, rounding up.
+    // With 24 cols, this is 16.
+    !content_columns = ceil(2 * !blueprint_grid_columns / 3)
+    // true means it's the last column in the row
+    +column(!content_columns, true)

data/frameworks/blueprint/templates/semantic/print.sass

@@ -0,0 +1,8 @@
+@import blueprint
+
+// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+// +blueprint-print
+
+//Recommended Blueprint configuration with scoping and semantic layout:
+body.bp
+  +blueprint-print(true)

data/frameworks/blueprint/templates/semantic/screen.sass

@@ -0,0 +1,14 @@
+// This import applies a global reset to any page that imports this stylesheet.
+@import blueprint/reset
+
+// To configure blueprint, edit the partials/base.sass file.
+@import partials/base
+
+// Import all the default blueprint modules so that we can access their mixins.
+@import blueprint
+
+// Combine the partials into a single screen stylesheet.
+@import partials/page
+@import partials/form
+@import partials/two_col
+

data/frameworks/compass/stylesheets/_compass.scss

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

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

@@ -0,0 +1,14 @@
+@import "css3/border-radius";
+@import "css3/inline-block";
+@import "css3/opacity";
+@import "css3/box-shadow";
+@import "css3/text-shadow";
+@import "css3/columns";
+@import "css3/box-sizing";
+@import "css3/gradient";
+@import "css3/background-clip";
+@import "css3/background-origin";
+@import "css3/background-size";
+@import "css3/font-face";
+@import "css3/transform";
+@import "css3/transition";

data/frameworks/compass/stylesheets/compass/_layout.scss

@@ -0,0 +1 @@
+@import "layout/sticky-footer";

data/frameworks/compass/stylesheets/compass/_misc.scss

@@ -0,0 +1,21 @@
+// This logo was designed by Jared Hardy <jared@jaredhardy.com>
+// This work is licensed under the Creative Commons Attribution 3.0 United States License.
+// To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/us/
+// or send a letter to:
+// Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
+
+@mixin unobtrusive-logo($size: 1em) {
+  font-family: Monaco, Courier, "Lucida Sans Unicode", monospace;
+  font-size: $size;
+  color: #888;
+  .selector {
+    vertical-align: middle;
+    font-size: 1.3em; }
+  .brace {
+    vertical-align: middle;
+    font: bold 1.7em Georgia, "Times New Roman", serif;
+    color: #ccc;
+    margin: 0 -0.2em; }
+  .rule {
+    vertical-align: middle;
+    margin: 0 -0.2em; } }

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

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

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

@@ -0,0 +1,6 @@
+@import "utilities/general";
+@import "utilities/links";
+@import "utilities/lists";
+@import "utilities/sprites";
+@import "utilities/tables";
+@import "utilities/text";

data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss

@@ -0,0 +1,24 @@
+//
+// The default value is `padding-box` -- the box model used by modern browsers.
+//
+// If you wish to do so, you can override the default constant with `border-box`
+//
+// To override to the default border-box model, use this code:
+//     $default-background-clip = border-box
+
+$default-background-clip: padding-box !default;
+
+// Clip the background (image and color) at the edge of the padding or border.
+//
+// Legal Values:
+//
+//   * padding-box
+//   * border-box
+
+@mixin background-clip($clip: $default-background-clip) {
+  // webkit and mozilla use the deprecated short [border | padding]
+  $deprecated: padding;
+  @if $clip == border-box { $deprecated: border; }
+  background-clip: $clip;
+  -webkit-background-clip: $deprecated;
+  -moz-background-clip: $deprecated; }

data/frameworks/compass/stylesheets/compass/css3/_background-origin.scss

@@ -0,0 +1,24 @@
+// Override `$default-background-origin` to change the default.
+
+$default-background-origin: content-box !default;
+
+// Position the background off the edge of the padding, border or content
+//
+// * Possible values:
+//   * `padding-box`
+//   * `border-box`
+//   * `content-box`
+// * browser defaults to `padding-box`
+// * mixin defaults to `content-box`
+
+
+@mixin background-origin($origin: $default-background-origin) {
+  // webkit and mozilla use the deprecated short [border | padding | content]
+  $deprecated: padding;
+  @if $origin == border-box { $deprecated: border; }
+  @if $origin == content-box { $deprecated: content; }
+
+          background-origin: $origin;
+  -webkit-background-origin: $deprecated;
+     -moz-background-origin: $deprecated;
+}

data/frameworks/compass/stylesheets/compass/css3/_background-size.scss

@@ -0,0 +1,15 @@
+// Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit.
+//
+// * percentages are relative to the background-origin (default = padding-box)
+// * mixin defaults to "100% auto"
+
+//  override constants to change defaults
+$default-background-size: 100% auto !default;
+
+@mixin background-size($size: $default-background-size) {
+          background-size: $size;
+  -webkit-background-size: $size;
+       -o-background-size: $size;
+   -khtml-background-size: $size;
+     -moz-background-size: $size;
+}

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

@@ -0,0 +1,58 @@
+$default-border-radius: 5px !default;
+
+// Round all borders by a specific amount, defaults to value of $default-border-radius
+
+@mixin border-radius($radius: $default-border-radius) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius; }
+
+// Round radius at position by amount.
+//
+// * values for $vert: "top", "bottom"
+// * values for $horz: "left", "right"
+
+@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
+  border-#{$vert}-#{$horz}-radius: $radius;
+  -moz-border-radius-#{$vert}#{$horz}: $radius;
+  -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
+
+// Round top-left radius only
+
+@mixin border-top-left-radius($radius: $default-border-radius) {
+  @include border-corner-radius(top, left, $radius); }
+
+// Round top-right radius only
+
+@mixin border-top-right-radius($radius: $default-border-radius) {
+  @include border-corner-radius(top, right, $radius); }
+
+// Round bottom-left radius only
+
+@mixin border-bottom-left-radius($radius: $default-border-radius) {
+  @include border-corner-radius(bottom, left, $radius); }
+
+// Round bottom-right radius only
+
+@mixin border-bottom-right-radius($radius: $default-border-radius) {
+  @include border-corner-radius(bottom, right, $radius); }
+
+// Round top corners by amount
+@mixin border-top-radius($radius: $default-border-radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius); }
+
+// Round right corners by amount
+@mixin border-right-radius($radius: $default-border-radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius); }
+
+// Round bottom corners by amount
+@mixin border-bottom-radius($radius: $default-border-radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius); }
+
+// Round left corners by amount
+@mixin border-left-radius($radius: $default-border-radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius); }

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

@@ -0,0 +1,27 @@
+// @doc off
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults before importing.
+// @doc on
+
+// The default color for box shadows
+$default-box-shadow-color: #333333 !default;
+
+// The default horizontal offset. Positive is to the right.
+$default-box-shadow-h-offset: 1px !default;
+
+// The default vertical offset. Positive is down.
+$default-box-shadow-v-offset: 1px !default;
+
+// The default blur length.
+$default-box-shadow-blur: 5px !default;
+
+// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
+// Arguments are color, horizontal offset, vertical offset, and blur length.
+
+@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) {
+  /* Webkit (Safari, Chrome) */
+  -webkit-box-shadow: $color $hoff $voff $blur;
+  /* Gecko (Firefox, Camino) */
+  -moz-box-shadow: $color $hoff $voff $blur;
+  /* CSS3 */
+  box-shadow: $color $hoff $voff $blur; }

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

@@ -0,0 +1,14 @@
+// Change the box model for Mozilla, Webkit, IE8 and the future
+//
+// @param $bs
+//   [ content-box | border-box ]
+
+@mixin box-sizing($bs) {
+  /* Mozilla (FireFox, Camino) */
+  -moz-box-sizing: $bs;
+  /* Webkit (Safari, Chrome) */
+  -webkit-box-sizing: $bs;
+  /* IE (8) */
+  -ms-box-sizing: $bs;
+  /* CSS3 */
+  box-sizing: $bs; }

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

@@ -0,0 +1,50 @@
+// Specify the # of columns
+
+@mixin column-count($n) {
+  -moz-column-count: $n;
+  -webkit-column-count: $n;
+  column-count: $n; }
+
+// Specify the gap between columns e.g. 20px
+
+@mixin column-gap($u) {
+  -moz-column-gap: $u;
+  -webkit-column-gap: $u;
+  column-gap: $u; }
+
+// Specify the width of columns e.g. 100px
+
+@mixin column-width($u) {
+  -moz-column-width: $u;
+  -webkit-column-width: $u;
+  column-width: $u; }
+
+// Specify the width of the rule between columns e.g. 1px
+
+@mixin column-rule-width($w) {
+  -moz-column-rule-width: $w;
+  -webkit-column-rule-width: $w;
+  column-rule-width: $w; }
+
+// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style.
+
+@mixin column-rule-style($s) {
+  -moz-column-rule-style: $s;
+  -webkit-column-rule-style: $s;
+  column-rule-style: $s; }
+
+// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color.
+
+@mixin column-rule-color($c) {
+  -moz-column-rule-color: $c;
+  -webkit-column-rule-color: $c;
+  column-rule-color: $c; }
+
+// Mixin encompassing all column rule rules
+// For example:
+//     +column-rule('1px', 'solid', '#000')
+
+@mixin column-rule($w, $s: solid, $c: unquote(" ")) {
+  @include column-rule-width($w);
+  @include column-rule-style($s);
+  @include column-rule-color($c); }

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

@@ -0,0 +1,32 @@
+// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
+//
+// * $name is required, arbitrary, and what you will use in font stacks.
+// * $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) {
+  @font-face {
+    font-family: "#{$name}";
+    @if $style {
+      font-style: $style; }
+    @if $eot {
+      src: font-url($eot); }
+    @if $postscript {
+      src: local("#{$name}"), local("#{$postscript}"), #{$font-files}; }
+    @else {
+      src: local("#{$name}"), #{$font-files}; } } }
+
+// EXAMPLE
+// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot", "thisname")
+//
+// 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'); 
+//   }

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

@@ -0,0 +1,57 @@
+// This yields a linear gradient spanning from top to bottom
+//
+//     +linear-gradient(color-stops(white, black))
+//
+// This yields a linear gradient spanning from bottom to top
+//
+//     +linear-gradient(color-stops(white, black), "bottom")
+//
+// This yields a linear gradient spanning from left to right
+//
+//     +linear-gradient(color-stops(white, black), "left")
+//
+// This yields a linear gradient starting at white passing
+// thru blue at 33% down and then to black
+//
+//     +linear-gradient(color-stops(white, blue 33%, black))
+//
+// This yields a linear gradient starting at white passing
+// thru blue at 33% down and then to black at 67% until the end
+//
+//     +linear-gradient(color-stops(white, blue 33%, black 67%))
+//
+// Browsers Supported:
+//
+// - Chrome
+// - Safari
+// - Firefox 3.6
+
+@mixin linear-gradient($color-stops, $start: top) {
+  // Firefox's gradient api is nice.
+  // Webkit's gradient api sucks -- hence these backflips:
+  $end: grad-opposite-position($start);
+  background-image: -webkit-gradient(linear, #{grad-point($start)}, #{grad-point($end)}, #{grad-color-stops($color-stops)});
+  background-image: -moz-linear-gradient(#{$start}, #{$color-stops}); }
+
+// Due to limitation's of webkit, the radial gradient mixin works best if you use
+// pixel-based color stops.
+//
+// Examples:
+//
+//     // Defaults to a centered, 100px radius gradient
+//     +radial-gradient(color-stops(#c00, #00c))
+//     // 100px radius gradient in the top left corner
+//     +radial-gradient(color-stops(#c00, #00c), "top left")
+//     // Three colors, ending at 50px and passing thru #fff at 25px
+//     +radial-gradient(color-stops(#c00, #fff, #00c 50px))
+//
+// Browsers Supported:
+//
+// - Chrome
+// - Safari
+// - Firefox 3.6
+
+@mixin radial-gradient($color-stops, $center-position: unquote("center center")) {
+  $end-pos: grad-end-position($color-stops, true);
+  background-image: -webkit-gradient(radial, #{grad-point($center-position)}, 0, #{grad-point($center-position)}, #{$end-pos}, #{grad-color-stops($color-stops)});
+  background-image: -moz-radial-gradient(#{$center-position}, circle, #{$color-stops}); }