compass-recipes 0.1.0

data/LICENSE

@@ -0,0 +1,3 @@
+Copyright (c) 2010-2011 Maxime Thirouin
+
+http://creativecommons.org/licenses/by/3.0/

data/README.md

@@ -0,0 +1,21 @@
+# 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/
+
+## 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
+
+## 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.

data/VERSION

@@ -0,0 +1 @@
+0.1.0

data/lib/compass-recipes.rb

@@ -0,0 +1,2 @@
+require "compass"
+Compass::Frameworks.register("recipes", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_recipes.scss

@@ -0,0 +1,9 @@
+@import "recipes/effect";
+@import "recipes/enhancement";
+@import "recipes/form";
+@import "recipes/layout";
+@import "recipes/pattern";
+@import "recipes/shadow";
+@import "recipes/shape";
+@import "recipes/shared";
+@import "recipes/ui";

data/stylesheets/recipes/_effect.scss

@@ -0,0 +1 @@
+@import "recipes/effect/glass";

data/stylesheets/recipes/_enhancement.scss

@@ -0,0 +1 @@
+@import "recipes/enhancement/corner-folded";

data/stylesheets/recipes/_form.scss

@@ -0,0 +1,2 @@
+@import "recipes/form/element";
+@import "recipes/form/skin";

data/stylesheets/recipes/_icons.scss

@@ -0,0 +1,29 @@
+@mixin icon($background-position: 0 50%, $display: inline-block)
+{
+    background-repeat: no-repeat;
+    background-position: $background-position;
+    display: $display;
+    vertical-align: middle;
+}
+
+@mixin icon-inline($side: left, $width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
+{
+    @if $height == auto
+    {
+        $height: $width;
+    }
+
+    @include icon($background-position, $display);
+    padding-#{$side}: $width;
+    line-height: $height;
+}
+
+    @mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
+    {
+        @include icon-inline(left, $width, $height, $background-position, $display);
+    }
+
+    @mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
+    {
+        @include icon-inline(right, $width, $height, $background-position, $display);
+    }

data/stylesheets/recipes/_layout.scss

@@ -0,0 +1 @@
+@import "recipes/layout/vertical-align";

data/stylesheets/recipes/_shadow.scss

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

data/stylesheets/recipes/_shape.scss

@@ -0,0 +1,9 @@
+/**
+ * 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";

data/stylesheets/recipes/_shared.scss

@@ -0,0 +1,4 @@
+@import "recipes/shared/block-inline-block";
+@import "recipes/shared/clearfix";
+@import "recipes/shared/list-inline-block";
+@import "recipes/shared/pseudo-element";

data/stylesheets/recipes/_ui.scss

@@ -0,0 +1,5 @@
+@import "recipes/ui/border";
+@import "recipes/ui/convex";
+@import "recipes/ui/glossy";
+@import "recipes/ui/gradient";
+@import "recipes/ui/menu-dropdown";

data/stylesheets/recipes/effect/_glass.scss

@@ -0,0 +1,26 @@
+/**
+ * Glass effect
+ * Use this on image for better effect render
+ * 
+ * Inspired from Simurai's Imdb redisign
+ *
+ * @link http://lab.simurai.com/redesign/imdb
+ * @thanks Simurai @simurai
+ */
+@mixin effect-glass($color: #fff, $reflectDegree: -45deg, $border-radius: 4px)
+{
+    position: relative;
+    @include border-radius($border-radius);
+
+    &:before
+    {
+        content: "";
+        position:absolute;
+        z-index: 1; // really need that ?
+        top: 0; right: 0; bottom: 0; left: 0;
+        border: transparent solid 1px;
+        @include border-radius($border-radius);
+        @include box-shadow(inset $color 0 0 2px, inset rgba($color,.4) 0 5px 10px);
+        @include background(linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
+    }
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Corner folded with pure CSS
+ * 
+ * Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
+ * 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
+ * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
+ */
+
+@import "recipes/shared/pseudo-element";
+
+@mixin corner-folded($position: top-right, $color: #ddd, $background-color: #fff, $width: 1em, $border-radius: .3em, $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
+{
+    position: relative;
+    overflow: hidden;
+
+    &::before
+    {
+        @include pseudo-element;
+        border-style: solid;
+
+        @include box-shadow($box-shadow);
+
+        @if ($position == 'top-right')
+        {
+            top: 0;
+            right: 0;
+            border-width: 0 $width $width 0;
+            border-color: $color $background-color;
+            @include border-radius(0 0 0 $border-radius);
+        }
+        @elseif ($position == 'top-left')
+        {
+            top: 0;
+            left: 0;
+            border-width: $width $width 0 0;
+            border-color: $background-color $color;
+            @include border-radius(0 0 $border-radius 0);
+        }
+        @elseif ($position == 'bottom-right')
+        {
+            bottom: 0;
+            right: 0;
+            border-width: 0 0 $width $width;
+            border-color: $background-color $color;
+            @include border-radius($border-radius 0 0 0);
+        }
+        @elseif ($position == 'bottom-left')
+        {
+            bottom: 0;
+            left: 0;
+            border-width: $width 0 0 $width;
+            border-color: $color $background-color;
+            @include border-radius(0 $border-radius 0 0);
+        }
+    }
+}

data/stylesheets/recipes/form/_element.scss

@@ -0,0 +1,2 @@
+@import "recipes/form/element/border-color";
+@import "recipes/form/element/inline";

data/stylesheets/recipes/form/_skin.scss

@@ -0,0 +1 @@
+@import "recipes/form/skin/default";

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

@@ -0,0 +1,53 @@
+@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;
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+@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;
+    }
+
+    input,
+    textarea
+    {
+        width: $input-width;
+    }
+
+    textarea
+    {
+        height: 50px;
+    }
+}

data/stylesheets/recipes/form/skin/_natural.scss

@@ -0,0 +1,143 @@
+@mixin form-skin-natural-input($color: #999, $border: #3399e9)
+{
+    padding: .4em;
+
+    border: 1px solid $border;
+    border-top-color: lighten($border, 4%);
+    border-bottom-color: darken($border, 4%);
+
+    @include border-radius(.4em);
+    @include background(linear-gradient(#fff, darken(#fff, 10%) 1%, #fff 30%));
+
+    @include box-shadow(rgba(0, 0, 0, .1) 0 0 .4em); // , inset rgba(0, 0, 0, .2) 0 1px 2px
+
+    $border-transition: border linear .2s;
+    $box-shadow-transition: box-shadow linear .2s;
+    $transition: $box-shadow-transition, $border-transition;
+    -moz-transition: -moz-$transition;
+    -webkit-transition: -webkit-$transition;
+    transition: $transition;
+}
+
+    @mixin form-skin-natural-input-hover($border: #3399e9)
+    {
+        @include box-shadow(0 0 .8em rgba($border,.4));
+    }
+
+    @mixin form-skin-natural-input-focus($border: #3399e9)
+    {
+        outline:none; // reset default browser behavior
+        border-color: $border;
+        @include box-shadow(0 0 .4em rgba($border,.65));
+    }
+
+@mixin form-skin-natural-label($color: #999)
+{
+    cursor: pointer;
+    color: $color;
+}
+
+    // here we can make better selector because when including mixin, & is too long
+    @mixin form-skin-natural-label-adjacent-effect($color-hover, $color-focus)
+    {
+        label:hover input,      // <label><input /></label>
+        label:hover select,     // <label><select /></label>
+        label:hover textarea,   // <label><textarea /></label>
+        input:hover     + label, // <input /> <label> </label>
+        select:hover    + label, // <select /> <label> </label>
+        textarea:hover  + label // <textarea /> <label> </label>
+        /* CANT WORK :( we need oposited of the + adjacent selector
+        label + input:hover,    // <label> </label> <input />
+        label + select:hover,   // <label> </label> <select />
+        label + textarea:hover, // <label> </label> <textarea />
+        */
+        {
+            color: $color-hover;
+        }
+
+        label:focus input,      // <label><input /></label>
+        label:focus select,     // <label><select /></label>
+        label:focus textarea,   // <label><textarea /></label>
+        input:focus     + label, // <input /> <label> </label>
+        select:focus    + label, // <select /> <label> </label>
+        textarea:focus  + label // <textarea /> <label> </label>
+        /* CANT WORK :( we need oposited of the + adjacent selector
+        label + input:focus,    // <label> </label> <input />
+        label + select:focus,   // <label> </label> <select />
+        label + textarea:focus, // <label> </label> <textarea />
+        */
+        {
+            color: $color-focus;
+        }
+    }
+
+@mixin form-skin-natural-button($color: #fff, $background: #3399e9)
+{
+
+    cursor: pointer;
+    display: inline-block;
+    width: auto;
+
+    color: $color;
+
+    padding: .6em 1em;
+
+    text-shadow: 0 1px 0 rgba(darken($background, 80%), .4);
+
+    border: 1px solid darken($background, 5%);
+    border-top-color: darken($background, 10%);
+    border-bottom-color: lighten($background, 10%);
+    background: $background; //fallback
+    @include background(linear-gradient(lighten($background, 10%), darken($background, 10%)));
+
+    @include border-radius(.6em);
+    @include box-shadow(rgba(0, 0, 0, .4) 0 .1em .2em);
+
+    &:focus,
+    &:hover
+    {
+        text-decoration: none; // for <a>
+        background: darken($background, 5%); //fallback
+        @include background(linear-gradient(lighten($background, 12%), darken($background, 12%)));
+    }
+
+    &:active
+    {
+        text-decoration: none; // for <a>
+        background: darken($background, 8%); //fallback
+        @include background(linear-gradient(darken($background, 12%), lighten($background, 12%)));
+    }
+}
+
+
+@mixin form-skin-natural($color-label: #666, $color-input: #999, $border-input: #3399e9, $color-button: #fff, $background-button: #3399e9)
+{
+    label
+    {
+        @include form-skin-natural-label($color-label);
+    }
+
+    input,
+    select,
+    textarea
+    {
+        @include form-skin-natural-input($color-input, $border-input);
+
+        &:hover,
+        label:hover + &
+        {
+            @include form-skin-natural-input-hover($border-input);
+        }
+
+        &:focus
+        {
+            @include form-skin-natural-input-focus($border-input);
+        }
+    }
+
+    button,
+    .button
+    {
+        @include form-skin-natural-button($color-button, $background-button);
+    }
+}

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

@@ -0,0 +1,62 @@
+/**
+ * Vertical alignement for page
+ * Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/
+ * 
+ * Usage:
+ * 
+ * SCSS
+ * @include vertical-align-requirement;
+ * .v-align-container { @include vertical-align-container }
+ * .v-align-content-container { @include vertical-align-content-container }
+ * .v-align-content { @include vertical-align-content }
+ * 
+ * HTML
+ * <body>
+ *     <div class="v-align-container">
+ *         <div class="v-align-container">
+ *             <div class="v-align-container">
+ *             Your content !
+ *             </div>
+ *         </div> 
+ *     </div>
+ * </body>
+ */
+
+@mixin vertical-align-requirement
+{
+    html,
+    body
+    {
+        height:100%
+    }
+}
+
+@mixin vertical-align-container
+{
+
+    display: table;
+    overflow: hidden;
+    margin-left: auto;
+    margin-right: auto;
+    height: 100%;
+
+    // ie6 ie7
+    *position:relative;
+}
+
+    @mixin vertical-align-content-container
+    {
+        display: table-cell;
+        vertical-align: middle;
+
+        // ie6 ie7
+        *position: absolute;
+        *top: 50%;
+    }
+
+        @mixin vertical-align-content
+        {
+            // ie6 ie7
+            *position: relative;
+            *top: -50%;
+        }

data/stylesheets/recipes/shadow/_drop.scss

@@ -0,0 +1,9 @@
+/**
+ * Drop shadow mixins from Nicolas Gallagher demo
+ * 
+ * Thanks to him (@necolas), @simurai, @cameronmoll and @matthamm
+ * 
+ * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ */
+ 
+ @import "recipes/shadow/drop/lifted";

data/stylesheets/recipes/shadow/_top-edge.scss

@@ -0,0 +1,28 @@
+/**
+ * Shadow along the top edge of the browser viewport
+ * 
+ * @link http://playground.genelocklin.com/depth/
+ */
+
+@mixin top-shadow($height: 1em, $color: rgba(0,0,0,.8), $z-index: 100, $position: fixed)
+{
+    content: "";
+    
+    position: $position;
+    left: 0%;
+    width: 100%;
+    
+    top: -$height;
+    height: $height;
+    @include box-shadow(0 0 $height $color);
+    
+    z-index: $z-index;
+}
+
+/*
+// Usage
+body:before
+{
+	@include top-shadow;
+}
+*/

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

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

data/stylesheets/recipes/shape/_triangle.scss

@@ -0,0 +1,63 @@
+@mixin triangle($direction: top, $width: 1em, $height: 0, $color: #000)
+{
+    @if ($height == 0)
+    {
+        $height: $width;
+    }
+    
+    width: 0;
+    height: 0;
+    
+    @if ($direction == 'top')
+    {
+        border-left: $width solid transparent;
+        border-right: $width solid transparent;
+        border-bottom: $height solid $color;
+    }
+    @elseif ($direction == 'bottom')
+    {
+        border-left: $width solid transparent;
+        border-right: $width solid transparent;
+        border-top: $height solid $color;
+    }
+    @elseif ($direction == 'left')
+    {
+        border-top: $width solid transparent;
+        border-right: $height solid $color;
+        border-bottom: $width solid transparent;
+    }
+    @elseif ($direction == 'right')
+    {
+        border-top: $width solid transparent;
+        border-left: $height solid $color;
+        border-bottom: $width solid transparent;
+    }
+    @elseif ($direction == 'top-left')
+    {
+        border-top: $width solid $color;
+        border-bottom: $width solid transparent;
+        border-left: $width solid $color;
+        border-right: $width solid transparent;
+    }
+    @elseif ($direction == 'top-right')
+    {
+        border-top: $width solid $color;
+        border-bottom: $width solid transparent;
+        border-left: $width solid transparent;
+        border-right: $width solid $color;
+    }
+    @elseif ($direction == 'bottom-left')
+    {
+        border-top: $width solid transparent;
+            border-bottom: $width solid $color;
+        border-left: $width solid $color;
+        border-right: $width solid transparent;   
+    }
+    @elseif ($direction == 'bottom-right')
+    {
+        border-top: $width solid transparent;
+        border-left: $width solid transparent;
+        border-bottom: $width solid $color;
+        border-right: $width solid $color;
+    }
+}

data/stylesheets/recipes/shared/_block-inline-block.scss

@@ -0,0 +1,6 @@
+// native block element can use inline-block with IE6/7 
+@mixin block-inline-block
+{
+    display: inline-block;
+    *display: inline;
+}

data/stylesheets/recipes/shared/_clearfix.scss

@@ -0,0 +1,30 @@
+/**
+ * Micro clearfix hack
+ * 
+ * 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.
+ *
+ * @link http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+@mixin clearfix
+{
+    // For modern browsers
+    &:before,
+    &:after
+    {
+        content:"";
+        display:block;
+        overflow:hidden;
+    }
+
+    &:after
+    {
+        clear:both;
+    }
+
+    //For IE 6/7 (trigger hasLayout)
+    &
+    {
+        zoom: 1;
+    }
+}

data/stylesheets/recipes/shared/_list-inline-block.scss

@@ -0,0 +1,12 @@
+@import "recipes/shared/block-inline-block";
+
+// use this for ul,ol (ex: nav menu)
+@mixin list-inline-block
+{
+    @include block-inline-block;
+    
+    li
+    {
+        @include block-inline-block;
+    }
+}

data/stylesheets/recipes/shared/_pseudo-element.scss

@@ -0,0 +1,18 @@
+/**
+ * Note IE7/6 doesn't understand pseudo element as ::before and ::after
+ * IE8 need to have :before and not ::before
+ * So use only : and not :: if you want to support IE8
+ * IE9 Webkit Firefox Opera understand ::
+ */
+@mixin pseudo-element($width: 0, $height: auto, $content: "")
+{
+    content: $content;
+    position: absolute;
+    display: block;
+    width: $width; // default 0 is for ff3 positionning
+    
+    @if ($height != auto)
+    {
+        height: $height;
+    }
+}

data/stylesheets/recipes/ui/_convex.scss

@@ -0,0 +1,23 @@
+@mixin ui-convex($color: #ddd, $button-effect: true, $opacity-top: .5, $opacity-bottom: 0, $color-mix: #fff)
+{
+    background: $color; // fallback
+    
+    // the original idea was to just add a layer of transparent white to make the convex effect
+    // but this didn't work with css3/pie module, so I've used sass color function to get the same result
+    //@include background($color linear-gradient(transparentize($color-mix, $opacity-top ), transparentize($color-mix, $opacity-bottom )));
+    
+    $opacity-top: percentage(1-$opacity-top);
+    $opacity-bottom: percentage(1-$opacity-bottom);
+    $color-top: mix($color, $color-mix, $opacity-top);
+    $color-bottom: mix($color, $color-mix, $opacity-bottom);
+    @include background(linear-gradient($color-top, $color-bottom));
+    
+    @if $button-effect == true
+    {
+        &:hover,
+        &:focus,
+        {
+            @include background(linear-gradient($color-bottom, $color-top));
+        }
+    }
+}

data/stylesheets/recipes/ui/_glossy.scss

@@ -0,0 +1,24 @@
+@mixin ui-glossy($color: #000, $opacity: .6, $border-width: .1em, $border-color-top: rgba(255,255,255,.5), $border-color-bottom: rgba(85,85,85,.6))
+{
+    border-left: 0;
+    border-right: 0;
+    
+    border: $border-width solid $border-color-top;
+    border-bottom-color: $border-color-bottom;
+    
+    outline: $border-width solid rgba(0,0,0,.6);
+    background: $color;
+    background: transparentize($color, $opacity);
+    //background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(112,112,112,.55)), color-stop(.49, rgba(56,56,56,.46)), color-stop(.51, rgba(0,0,0,.58)), to(rgba(0,0,0,.58)));
+    //background: -moz-linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58));
+    //background: linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58));
+    @include background(linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58) 51%));
+}
+    @mixin ui-glossy-inset {
+        -moz-border-radius: .5em;
+        border-radius: .5em;
+        background: -webkit-gradient(linear,0 0, 0 100%,from(#020304),to(#252627));
+        background: -moz-linear-gradient(#020304,#252627);
+        background: linear-gradient(#020304,#252627);
+        border: .1em solid #454545; 
+    }

data/stylesheets/recipes/ui/_gradient.scss

@@ -0,0 +1,6 @@
+@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)));
+}

data/stylesheets/recipes/ui/_menu-dropdown.scss

@@ -0,0 +1,44 @@
+// sometimes we don't use nesting all the time to optimize some selector
+
+// this mixin have to be used with a js for dropdown menu behavior
+// (display onhover with a timeout like 500ms for better UX)
+
+@import "recipes/shared/block-inline-block";
+
+@mixin ui-menu-dropdown($z-index: 3)
+{
+    z-index: $z-index;
+
+    ul
+    {
+        z-index: $z-index + 1;
+        list-style-position: outside; // ie fix
+
+        li
+        {
+            position: relative;
+            @include block-inline-block;
+        }
+
+        a
+        {
+            display: inline-block;
+        }
+    }
+
+        // sub menu
+        ul ul
+        {
+            position: absolute;
+            z-index: $z-index + 2;
+
+            // default behavior
+            display: none;
+        }
+
+            .no-js li:hover > ul
+            {
+                display: block;
+            }
+}
+

data/stylesheets/recipes/ui/border/_bevel.scss

@@ -0,0 +1,6 @@
+@mixin ui-border-bevel($width, $color, $variation: 15%)
+{
+    border: $width solid $color;
+    border-top-color: lighten($color, $variation);
+    border-bottom-color: darken($color, $variation);
+}

metadata

@@ -0,0 +1,118 @@
+--- !ruby/object:Gem::Specification 
+name: compass-recipes
+version: !ruby/object:Gem::Version 
+  hash: 27
+  prerelease: 
+  segments: 
+  - 0
+  - 1
+  - 0
+  version: 0.1.0
+platform: ruby
+authors: 
+- Maxime Thirouin
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-07-01 00:00:00 +02:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 49
+        segments: 
+        - 0
+        - 11
+        - 1
+        version: 0.11.1
+  type: :runtime
+  version_requirements: *id001
+description: "A Compass extension to have some sass/compass recipes ready to use ! "
+email: maxime.thirouin@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- LICENSE
+- VERSION
+- lib/compass-recipes.rb
+- stylesheets/_recipes.scss
+- stylesheets/recipes/_effect.scss
+- stylesheets/recipes/_enhancement.scss
+- stylesheets/recipes/_form.scss
+- stylesheets/recipes/_icons.scss
+- stylesheets/recipes/_layout.scss
+- stylesheets/recipes/_pattern.scss
+- stylesheets/recipes/_shadow.scss
+- stylesheets/recipes/_shape.scss
+- stylesheets/recipes/_shared.scss
+- stylesheets/recipes/_ui.scss
+- stylesheets/recipes/effect/_glass.scss
+- 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/shared/_block-inline-block.scss
+- stylesheets/recipes/shared/_clearfix.scss
+- stylesheets/recipes/shared/_list-inline-block.scss
+- stylesheets/recipes/shared/_pseudo-element.scss
+- stylesheets/recipes/ui/_convex.scss
+- stylesheets/recipes/ui/_glossy.scss
+- 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
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-recipes
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: Recipes for Compass
+test_files: []
+