compass-recipes 0.1.0 → 0.2.0

data/README.md

@@ -1,21 +1,55 @@
-# Compass Recipes ![project status](http://stillmaintained.com/MoOx/Compass-Recipes.png) #
+# Compass Recipes ![project status](http://stillmaintained.com/MoOx/compass-recipes.png) #
 
 This project is a collection of Sass mixins using Compass that you can use or learn from.
 
 ## Demos
 
-http://moox.github.com/Compass-Recipes/
+http://moox.github.com/compass-recipes/
 
-## TODO
-* Create tests for all existing mixins
-* Add all pattern mixins from http://leaverou.me/css3patterns
-* Add all shadow/drop mixins from http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ and http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
-* Add all shapes from http://css-tricks.com/examples/ShapesOfCSS/
-* Add normalize.css from @necolas
+## Installation
+
+[Compass-Recipes is now available as a gem on RubyGems.org](https://rubygems.org/gems/compass-recipes). So installation is quite easy.
+
+    gem install compass-recipes
+
+# Usage
+
+When compass-recipes installed, you just need to require the compass plugin in your project
+
+    require 'compass-recipes'
+
+Then you can include some recipes like this
+
+    @import "recipes/shape/triangle";
+    .my-triangle
+    {
+        @include triangle;
+    }
+
+Like Compass does, you can include all recipes in a folder like this
+
+    @import "recipes/shape";
+
+    .my-triangle
+    {
+        @include triangle;
+    }
+
+    .my-square
+    {
+        @include square;
+    }
 
 ## Author
  
 Compass-Recipes is maintained by Maxime Thirouin, a front-end web developer working for Shopbot-inc.com
 
 ## Open to All
-Anyone who forks this project and submits a patch and pull request will be given commit access after the first patch is accepted.
+Fork, modify, push, submit pull request ! That's easy !
+
+*I'm not a Ruby coder, so anyone which want to help me for anything will be appreciated !*
+
+## Thanks (indirect contributors)
+
+This project will never exists without these people : @necolas, @simurai, @chriscoyier
+They give me inspiration (and snippets of code!).

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0

data/stylesheets/recipes/_shadow.scss

@@ -1,2 +1,2 @@
-@import "shadow/drop";
-@import "shadow/top-edge";
+@import "recipes/shadow/drop";
+@import "recipes/shadow/top-edge";

data/stylesheets/recipes/_shape.scss

@@ -1,9 +1,11 @@
 /**
- * Bundles of shapes
- * 
- * @todo all other shapes that are not here !
- * 
- * @thanks Chris Coyier
- * @link http://css-tricks.com/examples/ShapesOfCSS/
- */
-@import "recipes/shape/triangle";
+* Shapes !
+* Polygons, ellipses and symbols
+* 
+* @thanks Chris Coyier @chriscoyier
+* @link http://css-tricks.com/examples/ShapesOfCSS/
+* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+*/
+@import "recipes/shape/ellipse";
+@import "recipes/shape/polygon";
+@import "recipes/shape/symbol";

data/stylesheets/recipes/enhancement/_corner-folded.scss

@@ -5,7 +5,7 @@
  * IE8 is not supported because it not render properly box-shadow and
  * pseudo element should be selected with ::element and not :element
  * 
- * @thanks to Nicolas Gallagher
+ * @thanks Nicolas Gallagher @necolas
  * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
  */
 

data/stylesheets/recipes/form/element/_inline.scss

@@ -1,25 +1,24 @@
+/**
+ * Form element inline mixin
+ * This mixin allow you to have a label inline with your input
+ * It's simply based on inline-block behavior
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
 @mixin form-element-inline($label-width: 8em, $input-width: 20em)
 {
     label
     {
         display: inline-block;
         width: $label-width;
-
-        // we use valign top for label + textarea
-        vertical-align: top;
-
-        // so we add a padding top to make the label no valigned on top of the input
-        padding-top: .4em;
+        
+        vertical-align: middle;
     }
 
     input,
     textarea
     {
         width: $input-width;
-    }
-
-    textarea
-    {
-        height: 50px;
+        vertical-align: middle;
     }
 }

data/stylesheets/recipes/layout/_vertical-align.scss

@@ -13,13 +13,16 @@
  * HTML
  * <body>
  *     <div class="v-align-container">
- *         <div class="v-align-container">
- *             <div class="v-align-container">
+ *         <div class="v-align-content-container">
+ *             <div class="v-align-content">
  *             Your content !
  *             </div>
  *         </div> 
  *     </div>
  * </body>
+ *
+ * @thanks Chris Coyier @chriscoyier
+ * @autor Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  */
 
 @mixin vertical-align-requirement
@@ -27,7 +30,9 @@
     html,
     body
     {
-        height:100%
+        height:100%;
+        margin: 0;
+        padding: 0;
     }
 }
 

data/stylesheets/recipes/shadow/_drop.scss

@@ -1,9 +1,15 @@
 /**
  * Drop shadow mixins from Nicolas Gallagher demo
  * 
- * Thanks to him (@necolas), @simurai, @cameronmoll and @matthamm
+ * @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
  * 
  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  */
  
- @import "recipes/shadow/drop/lifted";
+@import "recipes/shadow/drop/curled-corners";
+@import "recipes/shadow/drop/curved";
+//@import "recipes/shadow/drop/flying"; // not ready yet
+@import "recipes/shadow/drop/lifted-corners";
+@import "recipes/shadow/drop/perspective";
+@import "recipes/shadow/drop/raised";
+@import "recipes/shadow/drop/transform-requirement";

data/stylesheets/recipes/shadow/drop/_curled-corners.scss

@@ -0,0 +1,37 @@
+/**
+ * Drop shadow curled
+ *
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+@mixin drop-shadow-curled-corners($border-radius: 0 0 120px 120px / 0 0 6px 6px, $box-shadow: 0 8px 12px rgba(#000, .5), $skew: 8deg, $rotate: 3deg, $distance: 10px)
+{
+    position: relative;
+    @include border-radius($border-radius);
+
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        z-index: -2;
+
+        bottom: $distance*1.2;
+        
+        width: 50%;
+        height: 55%;
+        @include box-shadow($box-shadow);
+    }
+
+    &:before
+    {
+        left: $distance;
+        @include transform(skew(-$skew) rotate(-$rotate));
+    }
+
+    &:after
+    {
+        right: $distance;
+        @include transform(skew($skew) rotate($rotate));
+    }
+}

data/stylesheets/recipes/shadow/drop/_curved.scss

@@ -0,0 +1,72 @@
+/**
+ * Drop shadow curved
+ *
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+@mixin drop-shadow-curved($side: 'vertical', $distance: 10px, $box-shadow: 0 0 15px rgba(#000, .6), $radius-1: 10px, $radius-2: 100px)
+{
+    position: relative;
+    
+    // vertical by default
+    //@if ($side == 'vertical')
+    //{
+        $top: $distance;
+        $bottom: $distance;
+        $left: 0;
+        $right: 0;
+        $border-radius-1: $radius-1;
+        $border-radius-2: $radius-2;
+    //}
+    @if ($side == 'left')
+    {
+        $right: 50%;
+
+    }
+    @elseif($side == 'right')
+    {
+        $left: 50%;
+    }
+
+    @elseif ($side == 'horizontal')
+    {
+        $top:0;
+        $bottom:0;
+        $left: $distance;
+        $right: $distance;
+        $border-radius-1: $radius-2;
+        $border-radius-2: $radius-1;
+    }
+    @elseif ($side == 'top')
+    {
+        $top: 0;
+        $bottom: 50%;
+        $left: $distance;
+        $right: $distance;
+        $border-radius-1: $radius-2;
+        $border-radius-2: $radius-1;
+    }
+    @elseif ($side == 'bottom')
+    {
+        $top: 50%;
+        $bottom: 0;
+        $left: $distance;
+        $right: $distance;
+        $border-radius-1: $radius-2;
+        $border-radius-2: $radius-1;
+    }
+
+    &:before
+    {
+        content: "";
+        position: absolute;
+        z-index: -2;
+        
+        top: $top;
+        bottom: $bottom;
+        left: $left;
+        right: $right;
+        @include box-shadow($box-shadow);
+        @include border-radius($border-radius-1 / $border-radius-2);
+    }
+}

data/stylesheets/recipes/shadow/drop/_flying.scss

@@ -0,0 +1,42 @@
+/**
+ * Drop shadow flying
+ *
+ * @thanks Geoffrey Crofte @geoffrey_crofte
+ * @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
+ */
+@mixin drop-shadow-flying($box-shadow-radius: 10px, $color: #000)
+{
+    position: relative;
+
+    &:before,
+    &:after
+    {
+        content: " ";
+        position: absolute;
+        z-index: -2;
+
+        bottom: -1em;
+    }
+
+    &:before
+    {
+        left: 0;
+        width: 100%;
+        height: 4%;
+        background: #AAA;
+        @include border-radius(140px / 2px);
+        @include box-shadow(0 0 $box-shadow-radius/2 rgba(#000, .2), 0 0 $box-shadow-radius rgba(#000, .3), 0 0 $box-shadow-radius*1.5 rgba(#000, .4));
+    }
+
+    &:after
+    {
+        $height: .15em;
+
+        left: 5%;
+        width: 90%;
+        height: $height;
+        background: rgba(#000, .2);
+        @include border-radius(125px / 1px);
+        @include box-shadow(0 #{-$height} $box-shadow-radius/2 rgba(#000, .3), 0 #{-$height} $box-shadow-radius*.8 rgba(#000, .2), 0 #{-$height} $box-shadow-radius/2 rgba(#000, .1));
+    }
+}

data/stylesheets/recipes/shadow/drop/{_lifted.scss → _lifted-corners.scss}

@@ -1,20 +1,12 @@
 /**
- * Drop shadow mixins from Nicolas Gallagher demo
- * 
+ * Drop shadow w/ lifted corners
+ *
+ * @thanks Nicolas Gallagher @necolas
  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  */
-@mixin drop-shadow-lifted($height: 15px, $margin: 10px, $angle: 3deg)
+@mixin drop-shadow-lifted-corners($height: 15px, $margin: 10px, $angle: 4deg, $color: rgba(#000, .7))
 {
-    & > :last-child::before
-    {
-        content:"";
-        position: absolute;
-        z-index: -1;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
+    position: relative;
 
     &::before,
     &::after
@@ -24,19 +16,23 @@
         z-index: -2;
         
         bottom: $height;
-        left: $margin;
+
         width: 50%;
         height: 20%;
         
-        @include box-shadow(0 $height 10px rgba(0, 0, 0, .7));
+        @include box-shadow(0 $height $margin $color);
+        
+    }
+
+    &::before
+    {
+        left: $margin;
         @include transform(rotate(-$angle));
     }
     
     &::after
     {
         right: $margin;
-        left: auto;
-        
         @include transform(rotate($angle));
     }
 }

data/stylesheets/recipes/shadow/drop/_perspective.scss

@@ -0,0 +1,26 @@
+/**
+ * Drop shadow w/ perspective
+ *
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+@mixin drop-shadow-perspective($skew: 50deg, $distance-x: 80px, $distance-y: 5px, $box-shadow-radius: 8px, $color: rgba(#000, .4))
+{
+    position: relative;
+
+    &:before
+    {
+        content:"";
+        position:absolute;
+        z-index:-2;
+
+        left: $distance-x;
+        bottom: $distance-y;
+        width: 50%;
+        height: 35%;
+
+        @include box-shadow(-$distance-x 0 $box-shadow-radius $color);
+        @include transform(skew($skew));
+        @include transform-origin(0 100%);
+    }
+}

data/stylesheets/recipes/shadow/drop/_raised.scss

@@ -0,0 +1,13 @@
+/**
+ * Drop shadow raised
+ *
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+@mixin drop-shadow-raised($height: 10px, $color: #000)
+{
+    @include box-shadow(
+        0 $height*1.5 $height #{-$height} rgba($color, .5),
+        0 $height/10 $height*.4 rgba($color, .3)
+    );
+}

data/stylesheets/recipes/shadow/drop/_transform-requirement.scss

@@ -0,0 +1,22 @@
+/**
+ * Drop shadow rules required for transform on drop shadow
+ * 
+ * /!\ This is required is you want to apply some transform on the element using drop shadow
+ *
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+@mixin drop-shadow-transform-requirement($background: #fff)
+{
+    & > :last-child::before
+    {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: $background;
+    }
+}

data/stylesheets/recipes/shape/_ellipse.scss

@@ -0,0 +1,24 @@
+/**
+ * Shape/Ellipse
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@import "compass/css3/border-radius";
+
+@mixin ellipse($width: 200px, $height: 100px)
+{
+    width: $width;
+    height: $height;
+    
+    @if ($width == $height) {
+        @include border-radius($width/2);
+    }
+    @else {
+        @include border-radius($width/2, $height/2);
+    }
+}
+
+@mixin circle($width: 100px)
+{
+    @include ellipse($width, $width);
+}

data/stylesheets/recipes/shape/_polygon.scss

@@ -0,0 +1,14 @@
+/**
+ * Shape/Polygon
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@import "recipes/shape/polygon/hexagon";
+@import "recipes/shape/polygon/octagon";
+@import "recipes/shape/polygon/parallelogram";
+@import "recipes/shape/polygon/pentagon";
+@import "recipes/shape/polygon/rectangle";
+@import "recipes/shape/polygon/square";
+@import "recipes/shape/polygon/star";
+@import "recipes/shape/polygon/trapezoid";
+@import "recipes/shape/polygon/triangle";

data/stylesheets/recipes/shape/_symbol.scss

@@ -0,0 +1,7 @@
+/**
+ * Shape/Symbol
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@import "recipes/shape/symbol/heart";
+@import "recipes/shape/symbol/infinity";

data/stylesheets/recipes/shape/polygon/_hexagon.scss

@@ -0,0 +1,38 @@
+/**
+ * Shape/Polygon/Hexagon
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin hexagon($width: 100px, $height: 55px, $background-color: transparent)
+{
+    width: $width;
+    height: $height/2;
+    background-color: $background-color;
+    position: relative;
+    
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+
+        left: 0;
+        
+        border-left: $width/2 solid transparent;
+        border-right: $width/2 solid transparent;
+    }
+
+        &:before
+        {
+            top: -$width/4;
+            border-bottom: $width/4 solid $background-color;
+        }
+
+        &:after
+        {
+            bottom: -$width/4;
+            border-top: $width/4 solid $background-color;
+        }
+}

data/stylesheets/recipes/shape/polygon/_octagon.scss

@@ -0,0 +1,41 @@
+/**
+ * Shape/Polygon/Octagon
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+
+//Don't ask me when the coefficient cames from... I just compute then from original code by @chriscoyier
+@mixin octagon($width: 100px, $height: 100px, $background-color: transparent)
+{
+    width: $width;
+    height: $height*0.42;
+    background: $background-color;
+    position: relative;
+
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        left: 0;
+
+        width: $width*0.42;
+        height: 0;
+        
+        border-left: $width*0.29 solid transparent;
+        border-right: $width*0.29 solid transparent;
+        
+    }
+
+        &:before
+        {
+            top: -$height*0.29;
+            border-bottom: $height*0.29 solid $background-color;
+        }
+
+        &:after
+        {
+            bottom: -$height*0.29;
+            border-top: $height*0.29 solid $background-color;
+        }
+}

data/stylesheets/recipes/shape/polygon/_parallelogram.scss

@@ -0,0 +1,15 @@
+/**
+ * Shape/Polygon/Parallelogram
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+
+@import "compass/css3/transform";
+
+@mixin parallelogram($width: 150px, $height: 100px, $skew: 20deg, $background: transparent)
+{
+    width: $width;
+    height: $height;
+    @include transform(skew($skew));
+    background: $background;
+}

data/stylesheets/recipes/shape/polygon/_pentagon.scss

@@ -0,0 +1,26 @@
+/**
+ * Shape/Polygon/Pentagon
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin pentagon($width: 100px, $height: 100px, $background-color: transparent)
+{
+    position: relative;
+    width: $width*0.54;
+    border-width: $height*0.5 $width*0.18 0;
+    border-style: solid;
+    border-color: $background-color transparent;
+
+    &:before
+        {
+        content: "";
+        position: absolute;
+        height: 0;
+        width: 0;
+        top: -$height*0.85;
+        left: -$width*0.18;
+        border-width: 0 $width*0.45 $height*0.35;
+        border-style: solid;
+        border-color: transparent transparent $background-color;
+    }
+}

data/stylesheets/recipes/shape/polygon/_rectangle.scss

@@ -0,0 +1,11 @@
+/**
+ * Shape/Polygon/Rectangle
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin rectangle($width: 100px, $height: 100px, $background: transparent)
+{
+    width: $width;
+    height: $height;
+    background: $background;
+}

data/stylesheets/recipes/shape/polygon/_square.scss

@@ -0,0 +1,11 @@
+/**
+ * Shape/Polygon/Square
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin square($width: 100px, $background: transparent)
+{
+    width: $width;
+    height: $width;
+    background: $background;
+}

data/stylesheets/recipes/shape/polygon/_star.scss

@@ -0,0 +1,76 @@
+/**
+ * Shape/Polygon/Star
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+
+// Star (6-points)
+@mixin star-6($width: $width, $background-color: transparent)
+{
+    width: 0;
+    height: 0;
+    border-left: $width/2 solid transparent;
+    border-right: $width/2 solid transparent;
+    border-bottom: $width solid $background-color;
+    position: relative;
+
+    &:after
+    {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+
+        border-left: $width/2 solid transparent;
+        border-right: $width/2 solid transparent;
+        border-top: $width solid $background-color;
+        
+        top: $width*0.3;
+        left: -$width/2;
+    }
+}
+
+// Star (5-points)
+@mixin star-5($width: $width, $background-color: transparent)
+{
+    margin: $width/2 0;
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    
+    border-right:  $width solid transparent;
+    border-bottom: $width*0.7  solid $background-color;
+    border-left:   $width solid transparent;
+    @include transform(rotate(35deg));
+
+    &:before,
+    &:after
+    {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+    }
+
+    &:before
+    {
+        top: -$width*0.45;
+        left: -$width*0.65;
+        border-bottom: $width*0.8 solid $background-color;
+        border-left: $width*0.3 solid transparent;
+        border-right: $width*0.3 solid transparent;
+        @include transform(rotate(-35deg));
+    }
+
+    &:after
+    {
+        top: $width*0.03;
+        left: -$width*1.05;
+        border-right: $width solid transparent;
+        border-bottom: $width*0.7 solid $background-color;
+        border-left: $width solid transparent;
+        @include transform(rotate(-70deg));
+    }
+}

data/stylesheets/recipes/shape/polygon/_trapezoid.scss

@@ -0,0 +1,13 @@
+/**
+ * Shape/Polygon/Trapezoid
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin trapezoid($width: 100px, $height: 100px, $background-color: transparent)
+{
+    border-bottom: $height solid $background-color;
+    border-left: $width/2 solid transparent;
+    border-right: $width/2 solid transparent;
+    height: 0;
+    width: $width;
+}

data/stylesheets/recipes/shape/{_triangle.scss → polygon/_triangle.scss}

@@ -1,3 +1,8 @@
+/**
+ * Shape/Polygon/Triangle
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
 @mixin triangle($direction: top, $width: 1em, $height: 0, $color: #000)
 {
     @if ($height == 0)

data/stylesheets/recipes/shape/symbol/_heart.scss

@@ -0,0 +1,37 @@
+/**
+ * Shape/Symbol/Heart
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin heart($width: 100px, $height: 90px, $background-color: transparent)
+{
+    position: relative;
+    width: $width;
+    height: $height;
+
+    &:before,
+    &:after
+    {
+        position: absolute;
+        content: "";
+        top: 0;
+        width: $width/2;
+        height: $height;
+        background: $background-color;
+        @include border-radius($height/2 $height/2 0 0);
+    }
+
+    &:before
+    {
+        left: $width/2;
+        @include transform(rotate(-45deg));
+        @include transform-origin(0%, 100%);
+    }
+
+    &:after
+    {
+        left: 0;
+        @include transform(rotate(45deg));
+        @include transform-origin(100%, 100%);
+    }
+}

data/stylesheets/recipes/shape/symbol/_infinity.scss

@@ -0,0 +1,46 @@
+/**
+ * Shape/Symbol/Infinity
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin infinity($width: 212px, $height: 100px, $background-color: transparent)
+{
+    $coefficient: 2.12;
+    @if $width == false
+    {
+        $width : $height*$coefficient;
+    }
+    @if $height == false
+    {
+        $height : $width/$coefficient;
+    }
+    position: relative;
+    width: $width;
+    height: $height;
+
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        top: 0;
+
+        width: $height*.6;
+        height: $height*.6;
+        border: $height*.2 solid $background-color;
+    }
+    $radius: $height/2;
+    &:before
+    {
+        left: 0;
+        @include border-radius($radius $radius 0 $radius);
+        @include transform(rotate(-45deg));
+    }
+
+    &:after
+    {
+        right: 0;
+        @include border-radius($radius $radius $radius 0);
+        @include transform(rotate(45deg));
+    }
+}

data/stylesheets/recipes/shared/_clearfix.scss

@@ -4,6 +4,7 @@
  * The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.
  * Known support: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.
  *
+ * @thanks Nicolas Gallagher @necolas
  * @link http://nicolasgallagher.com/micro-clearfix-hack/
  */
 @mixin clearfix

data/stylesheets/recipes/ui/_gradient.scss

@@ -1,6 +1,25 @@
+/**
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin ui-gradient($color: #ddd, $lighten-top: 10%, $darken-bottom: 10%)
+{
+    @include ui-gradient-from-middle($color, $lighten-top, $darken-bottom);
+}
+
 @mixin ui-gradient-from-middle($color: #ddd, $lighten-top: 10%, $darken-bottom: 10%)
 {
-    // fallback
     background: $color;
     @include background(linear-gradient(lighten($color, $lighten-top), darken($color, $darken-bottom)));
 }
+
+@mixin ui-gradient-from-top($color: #ddd, $darken-bottom: 20%)
+{
+    background: $color;
+    @include background(linear-gradient($color, darken($color, $darken-bottom)));
+}
+
+@mixin ui-gradient-from-bottom($color: #ddd, $lighten-top: 20%)
+{
+    background: $color;
+    @include background(linear-gradient(lighten($color, $lighten-top), $color));
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: compass-recipes
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 23
   prerelease: 
   segments: 
   - 0
-  - 1
+  - 2
   - 0
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Maxime Thirouin
@@ -15,8 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-07-01 00:00:00 +02:00
-default_executable: 
+date: 2011-07-12 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -26,12 +25,12 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 49
+        hash: 57
         segments: 
         - 0
         - 11
-        - 1
-        version: 0.11.1
+        - 5
+        version: 0.11.5
   type: :runtime
   version_requirements: *id001
 description: "A Compass extension to have some sass/compass recipes ready to use ! "
@@ -62,15 +61,32 @@ files:
 - stylesheets/recipes/enhancement/_corner-folded.scss
 - stylesheets/recipes/form/_element.scss
 - stylesheets/recipes/form/_skin.scss
-- stylesheets/recipes/form/element/_border-color.scss
 - stylesheets/recipes/form/element/_inline.scss
-- stylesheets/recipes/form/skin/_default.scss
 - stylesheets/recipes/form/skin/_natural.scss
 - stylesheets/recipes/layout/_vertical-align.scss
 - stylesheets/recipes/shadow/_drop.scss
 - stylesheets/recipes/shadow/_top-edge.scss
-- stylesheets/recipes/shadow/drop/_lifted.scss
-- stylesheets/recipes/shape/_triangle.scss
+- stylesheets/recipes/shadow/drop/_curled-corners.scss
+- stylesheets/recipes/shadow/drop/_curved.scss
+- stylesheets/recipes/shadow/drop/_flying.scss
+- stylesheets/recipes/shadow/drop/_lifted-corners.scss
+- stylesheets/recipes/shadow/drop/_perspective.scss
+- stylesheets/recipes/shadow/drop/_raised.scss
+- stylesheets/recipes/shadow/drop/_transform-requirement.scss
+- stylesheets/recipes/shape/_ellipse.scss
+- stylesheets/recipes/shape/_polygon.scss
+- stylesheets/recipes/shape/_symbol.scss
+- stylesheets/recipes/shape/polygon/_hexagon.scss
+- stylesheets/recipes/shape/polygon/_octagon.scss
+- stylesheets/recipes/shape/polygon/_parallelogram.scss
+- stylesheets/recipes/shape/polygon/_pentagon.scss
+- stylesheets/recipes/shape/polygon/_rectangle.scss
+- stylesheets/recipes/shape/polygon/_square.scss
+- stylesheets/recipes/shape/polygon/_star.scss
+- stylesheets/recipes/shape/polygon/_trapezoid.scss
+- stylesheets/recipes/shape/polygon/_triangle.scss
+- stylesheets/recipes/shape/symbol/_heart.scss
+- stylesheets/recipes/shape/symbol/_infinity.scss
 - stylesheets/recipes/shared/_block-inline-block.scss
 - stylesheets/recipes/shared/_clearfix.scss
 - stylesheets/recipes/shared/_list-inline-block.scss
@@ -80,8 +96,7 @@ files:
 - stylesheets/recipes/ui/_gradient.scss
 - stylesheets/recipes/ui/_menu-dropdown.scss
 - stylesheets/recipes/ui/border/_bevel.scss
-has_rdoc: true
-homepage: http://moox.github.com/Compass-Recipes
+homepage: http://moox.github.com/compass-recipes
 licenses: []
 
 post_install_message: 
@@ -110,7 +125,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 
 rubyforge_project: compass-recipes
-rubygems_version: 1.6.2
+rubygems_version: 1.8.5
 signing_key: 
 specification_version: 3
 summary: Recipes for Compass

data/stylesheets/recipes/form/element/_border-color.scss

@@ -1,53 +0,0 @@
-@import "recipes/ui/border/bevel";
-
-
-@mixin fancyElement($border-color: #006ea9, $border-color-active: #ffa43e, $line-height: 24px, $border-width: 1px, $border-width-active: 3px)
-{
-    color: #515151;
-    font-size: 12px;
-
-    line-height: $line-height;
-    height: $line-height;
-    outline: $border-width solid $border-color;
-    border: $border-width-active - $border-width solid transparent;
-
-    &:focus
-    {
-        outline: $border-width solid $border-color-active;
-        @include fancyInputBorder($border-width-active - $border-width, $border-color-active);
-    }
-}
-
-@mixin fancyInput($border-color: #006ea9, $border-color-active: #ffa43e, $line-height: 24px, $border-width: 1px, $border-width-active: 3px)
-{
-
-    background: -webkit-gradient(linear, left top, left 25%, from(#ebebeb), to(#fff) );
-    background: -moz-linear-gradient(top, #ebebeb, #fff .25em);
-    background: linear-gradient(top, #fff, #ebebeb, #fff .25em);
-}
-
-@mixin fancyForm($border-color: #006ea9, $border-color-active: #ffa43e, $line-height: 24px, $border-width: 1px, $border-width-active: 3px)
-{
-    input,
-    textarea,
-    select
-    {
-        @include fancyElement($border-color, $border-color-active, $line-height, $border-width, $border-width-active);
-    }
-
-    input,
-    textarea
-    {
-        @include fancyInput($border-color, $border-color-active, $line-height, $border-width, $border-width-active);
-    }
-
-    button
-    {
-        @extend .button-blue;
-
-        &:hover
-        {
-            @extend .button-orange;
-        }
-    }
-}