compass 0.10.0.rc1 → 0.10.0.rc2

data/frameworks/compass/stylesheets/compass/utilities/general/_tag-cloud.scss

@@ -0,0 +1,18 @@
+// Emits styles for a tag cloud
+@mixin tag-cloud($base-size: 1em) {
+  font-size: $base-size;
+  line-height: 1.2 * $base-size;
+  .xxs, .xs, .s, .l, .xl, .xxl {
+    line-height: 1.2 * $base-size; }
+  .xxs {
+    font-size: $base-size / 2; }
+  .xs {
+    font-size: 2 * $base-size / 3; }
+  .s {
+    font-size: 3 * $base-size / 4; }
+  .l {
+    font-size: 4 * $base-size / 3; }
+  .xl {
+    font-size: 3 * $base-size / 2; }
+  .xxl {
+    font-size: 2 * $base-size; } }

data/frameworks/compass/stylesheets/compass/utilities/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/utilities/links/_link-colors.scss

@@ -0,0 +1,22 @@
+// Set all the colors for a link with one mixin call
+// Order of arguments is:
+// normal, hover, active, visited, focus
+// states not specified will inherit.
+// Mixin 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/utilities/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/utilities/lists/_bullets.scss

@@ -0,0 +1,22 @@
+// 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
+// mixin should be used like this for an icon that is 5x7:
+// ul.pretty
+//   +pretty-bullets("my-icon.png", 5px, 7px)
+@mixin pretty-bullets($bullet-icon, $width, $height, $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/utilities/lists/_horizontal-list.scss

@@ -0,0 +1,55 @@
+//**\\
+// 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/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
+
+@mixin horizontal-list-item($padding: 4px) {
+  @include no-bullet;
+  white-space: nowrap;
+  @include float-left;
+  padding: {
+    left: $padding;
+    right: $padding; };
+  &:first-child, &.first {
+    padding-left: 0px; }
+  &:last-child, &.last {
+    padding-right: 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) {
+  @include horizontal-list-container;
+  li {
+    @include horizontal-list-item($padding); } }

data/frameworks/compass/stylesheets/compass/utilities/lists/{_inline_list.sass → _inline-list.scss}

@@ -1,14 +1,14 @@
 // makes a list inline.
 
-=inline-list
-  list-style-type: none
-  margin: 0px
-  padding: 0px
-  display: inline
-  li
-    margin: 0px
-    padding: 0px
-    display: inline
+@mixin inline-list {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  display: inline;
+  li {
+    margin: 0px;
+    padding: 0px;
+    display: inline; } }
 
 // makes an inline list that is comma delimited.
 // use of this recipe is not recommended at this time due to browser support issues.
@@ -19,11 +19,11 @@
 // :last-child is not fully supported
 // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
 
-=comma-delimited-list
-  +inline-list
-  li
-    &:after
-      content: ", "
-    &:last-child, &.last
-      &:after
-        content: ""
+@mixin comma-delimited-list {
+  @include inline-list;
+  li {
+    &:after {
+      content: ", "; }
+    &:last-child, &.last {
+      &:after {
+        content: ""; } } } }

data/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss

@@ -0,0 +1,54 @@
+//**
+// Example 1:
+// a.twitter
+//   +sprite-img("icons-32.png", 1)
+// a.facebook
+//   +sprite-img("icons-32png", 2)
+// ...
+// Example 2:
+// a
+//   +sprite-background("icons-32.png")
+//   a.twitter
+//     +sprite-column(1)
+//   a.facebook
+//     +sprite-row(2)
+//   ...
+
+$sprite-default-size: 32px !default;
+
+$sprite-default-margin: 0px !default;
+
+$sprite-image-default-width: $sprite-default-size !default;
+
+$sprite-image-default-height: $sprite-default-size !default;
+
+// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
+// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
+@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  @include sprite-background($img, $width, $height);
+  @include sprite-position($col, $row, $width, $height, $margin); }
+
+// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
+@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
+  @include sprite-background-rectangle($img, $width, $height); }
+
+// Sets rules common for all sprites, assumes a rectangular region.
+@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
+  background: image-url($img) no-repeat;
+  width: $width;
+  height: $height;
+  overflow: hidden; }
+
+// Allows horizontal sprite positioning optimized for a single row of sprites.
+@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
+  @include sprite-position($col, 1, $width, 0px, $margin); }
+
+// Allows vertical sprite positioning optimized for a single column of sprites.
+@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  @include sprite-position(1, $row, 0px, $height, $margin); }
+
+// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
+@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  $x: ($col - 1) * -$width - ($col - 1) * $margin;
+  $y: ($row - 1) * -$height - ($row - 1) * $margin;
+  background-position: $x $y; }

data/frameworks/compass/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss

@@ -0,0 +1,20 @@
+@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) {
+  th {
+    background-color: $header-color;
+    &.even {
+      background-color: $header-color - $dark-intersection; } }
+  tr.odd {
+    td {
+      background-color: $odd-row-color;
+      &.even {
+        background-color: $odd-row-color - $dark-intersection; } } }
+  tr.even {
+    td {
+      background-color: $even-row-color;
+      &.even {
+        background-color: $even-row-color - $dark-intersection; } } }
+  tfoot {
+    th, td {
+      background-color: $footer-color;
+      &.even {
+        background-color: $footer-color - $dark-intersection; } } } }

data/frameworks/compass/stylesheets/compass/utilities/tables/_borders.scss

@@ -0,0 +1,27 @@
+@mixin outer-table-borders($width: 2px, $color: black) {
+  border: $width solid $color;
+  thead {
+    th {
+      border-bottom: $width solid $color; } }
+  tfoot {
+    th, td {
+      border-top: $width solid $color; } }
+  th {
+    &:first-child {
+      border-right: $width solid $color; } } }
+
+@mixin inner-table-borders($width: 2px, $color: black) {
+  th, td {
+    border: {
+      right: $width solid $color;
+      bottom: $width solid $color;
+      left-width: 0px;
+      top-width: 0px; };
+    &:last-child,
+    &.last {
+      border-right-width: 0px; } }
+  tbody, tfoot {
+    tr:last-child,
+    tr.last {
+      th, td {
+        border-bottom-width: 0px; } } } }

data/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.scss

@@ -0,0 +1,9 @@
+@mixin table-scaffolding {
+  th {
+    text-align: center;
+    font-weight: bold; }
+  td,
+  th {
+    padding: 2px;
+    &.numeric {
+      text-align: right; } } }

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

@@ -0,0 +1,12 @@
+// This technique, by [Justin Maxwell](http://code404.com/), was originally
+// published at 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;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+  -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis")); }

data/frameworks/compass/stylesheets/compass/utilities/text/{_nowrap.sass → _nowrap.scss}

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

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

@@ -0,0 +1,21 @@
+// 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.
+// @param img
+//   the relative path from the project image directory to the image.
+// @param x
+//   the x position of the background image.
+// @param 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; }; }
+
+@mixin hide-text {
+  text-indent: -9999em;
+  overflow: hidden;
+  text-align: left; }

data/frameworks/compass/templates/ellipsis/ellipsis.sass

@@ -1,4 +1,4 @@
-@import compass/utilities/text/ellipsis.sass
+@import compass/utilities/text/ellipsis
 
 // You can delete this sass file if you want, it's just an example of how to use the ellipsis mixin.
 // By default, ellipsis text is no-wrap. Pass false as the first argument if you don't want that.

data/frameworks/compass/templates/project/screen.sass

@@ -4,7 +4,7 @@
   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.sass
+@import compass/reset
 
 /*
   The *:focus rule is reset and suppresses link outlining.

data/lib/compass/commands/create_project.rb

@@ -39,6 +39,10 @@ module Compass
           self.options[:pattern] = framework[1]
         end
 
+        opts.on("-x", "--syntax SYNTAX", [:sass, :scss], "Specify the syntax to use when generating stylesheets.", "One of sass or scss. Defaults to scss.") do |syntax|
+          self.options[:preferred_syntax] = syntax
+        end
+
         super
       end
     end

data/lib/compass/commands/help.rb

@@ -24,6 +24,7 @@ To get help on a particular command please specify the command.
  
         banner << "\nAvailable Frameworks & Patterns:\n\n"
         Compass::Frameworks::ALL.each do |framework|
+          next if framework.name =~ /^_/
           banner << "  * #{framework.name}\n"
           framework.template_directories.each do |pattern|
             banner << "    - #{framework.name}/#{pattern}"

data/lib/compass/commands/list_frameworks.rb

@@ -8,7 +8,7 @@ module Compass
   
       def execute
         Compass::Frameworks::ALL.each do |framework|
-          puts framework.name
+          puts framework.name unless framework.name =~ /^_/
         end
       end
     end

data/lib/compass/commands/stamp_pattern.rb

@@ -16,6 +16,10 @@ Example:
 
 Options:
 }
+        opts.on("-x", "--syntax SYNTAX", [:sass, :scss], "Specify the syntax to use when generating stylesheets.", "One of sass or scss. Defaults to scss.") do |syntax|
+          self.options[:preferred_syntax] = syntax
+        end
+
         super
       end
     end

data/lib/compass/configuration.rb

@@ -35,7 +35,8 @@ module Compass
       :asset_host,
       :asset_cache_buster,
       :line_comments,
-      :color_output
+      :color_output,
+      :preferred_syntax
     ].flatten
 
   end

data/lib/compass/configuration/defaults.rb

@@ -125,6 +125,9 @@ module Compass
         true
       end
 
+      def default_preferred_syntax
+        :scss
+      end
       # helper functions
 
       def http_join(*segments)

data/lib/compass/frameworks.rb

@@ -51,7 +51,8 @@ module Compass
     def discover(frameworks_directory)
       frameworks_directory = DEFAULT_FRAMEWORKS_PATH if frameworks_directory == :defaults
       frameworks_directory = Dir.new(frameworks_directory) unless frameworks_directory.is_a?(Dir)
-      frameworks_directory.entries.reject{|e| e[0] == ?.}.each do |framework|
+      dirs = frameworks_directory.entries.reject{|e| e =~ /^\./}.sort_by{|n| n =~ /^_/ ? n[1..-1] : n}
+      dirs.each do |framework|
         register_directory File.join(frameworks_directory.path, framework)
       end
     end

data/lib/compass/installers/base.rb

@@ -16,7 +16,7 @@ module Compass
         self.logger = options[:logger]
       end
 
-      [:css_dir, :sass_dir, :images_dir, :javascripts_dir, :http_stylesheets_path, :fonts_dir].each do |dir|
+      [:css_dir, :sass_dir, :images_dir, :javascripts_dir, :http_stylesheets_path, :fonts_dir, :preferred_syntax].each do |dir|
         define_method dir do
           Compass.configuration.send(dir)
         end
@@ -79,6 +79,19 @@ module Compass
         "#{sass_dir}/#{pattern_name_as_dir}#{to}"
       end
 
+      def install_stylesheet(from, to, options)
+        from = templatize(from)
+        to = targetize(install_location_for_stylesheet(to, options))
+        contents = File.new(from).read
+        if preferred_syntax.to_s != from[-4..-1]
+          logger.record :convert, basename(from)
+          tree = Sass::Engine.new(contents, Compass.sass_engine_options).to_tree
+          contents = tree.send("to_#{preferred_syntax}")
+          to[-4..-1] = preferred_syntax.to_s
+        end
+        write_file to, contents
+      end
+
       installer :css do |to|
         "#{css_dir}/#{to}"
       end