compass 0.10.0.rc1 → 0.10.0.rc2

data/examples/compass/src/sticky_footer.scss

@@ -0,0 +1,11 @@
+@import "compass/reset";
+@import "compass/layout";
+
+@include sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer"));
+
+#header {
+  background: #999999;
+  height: 72px; }
+
+#footer {
+  background: #cccccc; }

data/examples/compass/src/utilities.scss

@@ -0,0 +1,108 @@
+@import "compass/reset";
+@import "compass/utilities";
+@import "yui/modules/base";
+@import "blueprint/grid";
+@import "blueprint/scaffolding";
+@import "compass/utilities/text/ellipsis";
+
+html {
+  @include yui-base; }
+
+h2 {
+  margin-top: 0;
+  border-bottom: 2px solid #777777; }
+
+#utilities {
+  @include container; }
+
+.example {
+  border: 2px solid #cccccc;
+  padding: 4px; }
+
+#links {
+  @include column(8);
+  .hover a {
+    @include hover-link; }
+  .colored a {
+    @include link-colors(#cc0000, #cc00cc, #770000, #770077, #777777); }
+  .unstyled {
+    color: #333333;
+    a {
+      @include unstyled-link; } } }
+
+.mixin {
+  font-family: monospace;
+  border: {
+    width: 1px;
+    style: solid; };
+  border-color: #cccccc;
+  border-color: -moz-use-text-color;
+  padding: 2px;
+  line-height: 22px;
+  white-space: nowrap; }
+
+#tag-cloud {
+  @include column(8);
+  ol {
+    margin: 0;
+    @include inline-list;
+    @include tag-cloud(1em);
+    li {
+      @include no-bullets; } } }
+
+#lists {
+  @include column(8, true);
+  ul.inline {
+    @include inline-list; }
+  ul.comma-delimited {
+    @include comma-delimited-list; }
+  ol.pretty {
+    @include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } }
+
+#tables {
+  @include column(16);
+  table.alternating {
+    width: 100%;
+    @include alternating-rows-and-columns(#f9e5a7, #cefbb3, #222222);
+    @include table-scaffolding;
+    @include outer-table-borders(2px, #151a99);
+    @include inner-table-borders(1px, #151a99); } }
+
+#ellipsis {
+  @include column(8, true);
+  td {
+    width: 50%;
+    @include ellipsis; } }
+
+#floats {
+  @include column(16);
+  .clearfix-example {
+    background: #dddddd;
+    border: 2px solid black;
+    text-align: center;
+    @include clearfix; }
+  .float-left-example, .float-right-example {
+    border: 1px solid black;
+    padding: 10px;
+    margin: 0 20px;
+    width: 25%;
+    background: #f9e5a7; }
+  .float-left-example {
+    @include float-left; }
+  .float-right-example {
+    @include float-right; }
+  .pie-clearfix-example {
+    background: #dddddd;
+    border: 2px solid black;
+    text-align: center;
+    position: relative;
+    @include pie-clearfix;
+    .positioned-example {
+      display: block;
+      position: absolute;
+      left: -10px;
+      top: -10px;
+      font-size: 10px;
+      width: 10em;
+      background: #ccccff;
+      border: 1px solid black; } } }

data/examples/css3/src/_base.scss

@@ -0,0 +1,13 @@
+@import "compass/utilities";
+@import "compass/css3";
+
+@mixin container {
+  @include clearfix;
+  overflow: auto; }
+
+@mixin row {
+  @include clearfix; }
+
+@mixin column {
+  float: left;
+  @include box-sizing(border-box); }

data/examples/css3/src/fancy-fonts.scss

@@ -0,0 +1,7 @@
+@import "compass/css3";
+
+@include font-face(Angelina, font_files(unquote("angelina.ttf"), truetype));
+
+h1 {
+  font-family: "Angelina";
+  font-size: 5em; }

data/examples/css3/src/gradients.scss

@@ -0,0 +1,77 @@
+@import "compass/css3";
+
+#gradient {
+  width: 200px;
+  height: 100px;
+  border: 1px solid #777777; }
+
+thead th {
+  min-height: 50px;
+  min-width: 100px;
+  @include text-shadow(white); }
+
+th.linear {
+  @include linear-gradient(color_stops(white, red 50%, yellow 75%, lime)); }
+
+th.radial {
+  @include radial-gradient(color_stops(white, red 20px, yellow 30px, lime 40px)); }
+
+tr.default {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #00c))"; } }
+
+tr.top-left {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
+  td.linear-code:before {
+    content: '+linear-gradient(color_stops(#c00, #00c), "top left")'; }
+  td.radial-code:before {
+    content: '+radial-gradient(color_stops(#c00, #00c), "top left")'; } }
+
+tr.bottom-right {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
+  td.linear-code:before {
+    content: '+linear-gradient(color_stops(#c00, #00c), "bottom right")'; }
+  td.radial-code:before {
+    content: '+radial-gradient(color_stops(#c00, #00c), "bottom right")'; } }
+
+tr.three-color {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, white, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, white, #0000cc 50px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #fff, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"; } }
+
+tr.four-color {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
+
+tr.filled-in {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000 33%, #0000cc 66%)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000 25px, #0000cc 75px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"; } }

data/examples/css3/src/main.scss

@@ -0,0 +1,110 @@
+@import "blueprint/reset";
+@import "base";
+
+$border_color: #aaaaaa;
+
+#container {
+  @include container; }
+
+$min_width: 340px;
+
+.examples {
+  margin-bottom: 1em;
+  @include row;
+  min-width: $min_width * 3 + 20px * 2 + 20px; }
+
+h1 {
+  text-align: center; }
+
+.example, .gutter {
+  min-height: 21em; }
+
+.example {
+  @include column;
+  width: 30%;
+  min-width: $min_width;
+  border: 4px solid #{$border_color};
+  @include border-radius(0.667em);
+  @include box-shadow(darken($border_color, 40), 5px, 5px, 2px);
+  margin-bottom: 1em;
+  h2 {
+    font-family: Angelina;
+    margin: 0.5em 0 1em;
+    text-align: center; } }
+
+.gutter {
+  display: block;
+  float: left;
+  width: 2.5%;
+  min-width: 20px;
+  content: " "; }
+
+.example {
+  @include linear-gradient(color_stops(white, #cccccc));
+  pre {
+    padding: 1em;
+    margin: 1em;
+    color: white;
+    text-shadow: 1px 1px 2px black;
+    font-weight: bold; } }
+
+#background-clip {
+  pre {
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
+    border: 1em solid rgba(255, 0, 0, 0.25); }
+  .padding-box {
+    @include background-clip(padding-box);
+    @include background-origin(padding-box); }
+  .border-box {
+    @include background-clip(border-box);
+    @include background-origin(border-box); } }
+
+#background-size {
+  pre {
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
+    border: 1em solid #{mix(red, white, 0.5)};
+    border: 1em solid rgba(255, 0, 0, 0.25); }
+  .top-left {
+    @include background-size(50% 50%); }
+  .centered {
+    @include background-size(50% 50%);
+    background-position: center center; } }
+
+#gradients {
+  .horizontal {
+    @include linear-gradient(color_stops(#d92626, #2626d9), left); }
+  .vertical {
+    @include linear-gradient(color_stops(#d92626, #2626d9)); }
+  .diagonal {
+    @include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
+  .radial {
+    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
+    @include radial-gradient(color_stops(#d92626 10px, #2626d9 150px));
+    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
+    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
+    // background-color: #2626d9
+  }
+  .radial-1 {
+    // A default radial gradient:
+    /* +radial-gradient(color_stops(#ddd, #aaa)) */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+  .radial-2 {
+    // A centered gradient
+    /* +radial-gradient(color_stops(#ddd, #aaa)) */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+  .radial-3 {
+    // A centered radial gradient at the top
+    /* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
+  .radial-4 {
+    // A centered radial gradient with fixed color stops
+    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
+    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
+  .radial-5 {
+    // A centered gradient with several color stops
+    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
+    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
+  .radial-6 {
+    // A centered gradient with color stops
+    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
+    @include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }

data/examples/logo/src/ie.scss

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

data/examples/logo/src/print.scss

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

data/examples/logo/src/screen.scss

@@ -0,0 +1,28 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "compass/misc";
+
+#logo-large,
+#logo-medium,
+#logo,
+#logo-small {
+  text-align: center;
+  margin: {
+    bottom: 40px; }; }
+
+#logo-large {
+  @include unobtrusive-logo(3em);
+  margin-top: 20px; }
+
+#logo-medium {
+  @include unobtrusive-logo(2em); }
+
+#logo {
+  @include unobtrusive-logo; }
+
+#logo-small {
+  @include unobtrusive-logo(0.5em); }

data/examples/ninesixty/clean.rb

@@ -0,0 +1,2 @@
+require 'fileutils'
+FileUtils.rm_rf "#{File.dirname(__FILE__)}/extensions"

data/examples/ninesixty/config.rb

@@ -7,3 +7,4 @@ images_dir = "images"
 output_style = :compact
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
+sass_options = {:quiet => true}

data/examples/ninesixty/src/grid.scss

@@ -0,0 +1,15 @@
+/* 960 Grid System ~ Core CSS.
+ * Learn more ~ http://960.gs/
+ *
+ * Licensed under GPL and MIT. */
+
+@import "compass/utilities/general/reset";
+@import "960/grid";
+
+@include global-reset;
+
+.container_12 {
+  @include grid-system(12); }
+
+.container_16 {
+  @include grid-system(16); }

data/examples/ninesixty/src/text.scss

@@ -0,0 +1,8 @@
+/* 960 Grid System ~ Text CSS.
+ * Learn more ~ http://960.gs/
+ *
+ * Licensed under GPL and MIT. */
+
+@import "960/text";
+
+@include text;

data/examples/susy/clean.rb

@@ -0,0 +1,2 @@
+require 'fileutils'
+FileUtils.rm_rf "#{File.dirname(__FILE__)}/extensions"

data/examples/susy/config.rb

@@ -7,3 +7,4 @@ images_dir = "images"
 output_style = :compact
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
+sass_options = {:quiet => true}

data/examples/susy/{extensions/susy/templates/project/_base.sass → src/_base.scss}

@@ -7,19 +7,21 @@
 // GRID
 // Set these values as needed for your grid layout.
 //  - defaults are shown.
-!grid_unit = "em"
-!total_cols = 12
-!col_width = 4
-!gutter_width = 1
-!side_gutter_width = !gutter_width
+$grid_unit: em;
 
+$total_cols: 12;
+
+$col_width: 4;
+
+$gutter_width: 1;
+
+$side_gutter_width: $gutter_width;
 
 // OMEGA_FLOAT
 // By default, +omega elements are floated right.
 // You can override that globally here:
 // !omega_float = "right"
 
-
 // HACKS
 // Are you using hacks or conditional comments? Susy makes both possible.
 // Leave this as 'true' to use hacks, set it as false for conditional comments.
@@ -27,36 +29,33 @@
 // several other mixins.
 // !hacks = true
 
-
 // FONT-SIZE
 // Override these values as needed (defaults are shown)
 //  - You set the font and line heights in pixels.
-//  - Susy will do the math and give you !base_font_size and !base_line_height 
+//  - Susy will do the math and give you !base_font_size and !base_line_height
 //    variables, set flexibly against the common browser default of 16px
-!base_font_size_px = 16
-!base_line_height_px = 24
+$base_font_size_px: 16;
 
+$base_line_height_px: 24;
 
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.
-@import susy/susy.sass
-
+@import "susy/susy";
 
 // COLORS
 // Set any colors you will need later.
-!main = #194C66
-!alt = #CC6633
+$main: #194c66;
 
+$alt: #cc6633;
 
 // FONTS
 // Give yourself some font stacks to work with.
-=sans-family
-  font-family: Helvetica, Arial, sans-serif
-
-=serif-family
-  font-family: Baskerville, Palatino, serif
+@mixin sans-family {
+  font-family: Helvetica, Arial, sans-serif; }
 
+@mixin serif-family {
+  font-family: Baskerville, Palatino, serif; }
 
 // OTHER MIXINS
 // Mixins set here will be available in defaults, screen, print and IE
-// Or anywhere you import either base.sass or defaults.sass
+// Or anywhere you import either base or defaults