compass-recipes 0.3.0.alpha.1 → 0.3.0.alpha.2

data/stylesheets/recipes/color/_name.scss

@@ -1,6 +1,6 @@
-//
+////
 // Colors name definitions
-//
+///
 
 $aliceblue:#f0f8ff;
 $antiquewhite:#faebd7;

data/stylesheets/recipes/effect/_bevel.scss

@@ -1,3 +1,7 @@
+////
+// Bevel effect
+///
+
 $bevel-base-color: rgba(#333, .5) !default;
 $bevel-size: 5px !default;
 $bevel-contrast: 8% !default;

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

@@ -1,14 +1,14 @@
-/**
- * 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 Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
- * @todo Nix in .4
- */
+////
+// 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 Nicolas Gallagher @necolas
+// @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
+// @todo Nix in .4
+///
 
 @import "recipes/effect/folded-corner";
 

data/stylesheets/recipes/effect/_corners-tucked.scss

@@ -1,11 +1,10 @@
-/**
- * CSS3 Tucked Corners effect
- *
- * @thanks Chris Coyier @chriscoyier
- * @link http://css-tricks.com/snippets/css/tucked-corners/
- * @author Mason Wendell http://thecodingdesigner.com
- *
- */
+////
+// CSS3 Tucked Corners effect
+//
+// @thanks Chris Coyier @chriscoyier
+// @link http://css-tricks.com/snippets/css/tucked-corners/
+// @author Mason Wendell http://thecodingdesigner.com
+///
 
 // $tape-color: the background css property
 // $inner-element: the selector for the inner element (for bottom corners)

data/stylesheets/recipes/effect/_cutout.scss

@@ -1,3 +1,7 @@
+////
+// Cutout effect
+///
+
 $cutout-size: 5px !default;
 $cutout-blur: 5px !default;
 

data/stylesheets/recipes/effect/_folded-corner.scss

@@ -1,13 +1,13 @@
-/**
- * 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 Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
- */
+////
+// 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 Nicolas Gallagher @necolas
+// @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
+///
 
 @import "recipes/shared/pseudo-element";
 

data/stylesheets/recipes/effect/_glass.scss

@@ -1,19 +1,22 @@
-/**
- * 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
- */
+////
+// Glass effect
+// Use this on image for better effect render
+// 
+// Inspired from Simurai's IMDB redisign
+//
+// @link http://archive.simurai.com/lab/imdb/
+// @thanks Simurai @simurai
+///
 
-@import '../shared/pseudo-element';
+@import "recipes/shared/pseudo-element";
 
 @mixin effect-glass(
-    $color: #fff,
+    $color: rgba(#fff, .12),
     $reflectDegree: -45deg,
-    $border-radius: 4px
+    $border-radius: .2em,
+    $border-color: rgba(#000, .2),
+    $size: 50%,
+    $size-fadeout: .5%
 )
 {
     position: relative;
@@ -27,13 +30,13 @@
         right: 0;
         bottom: 0;
         left: 0;
-        border: transparent solid 1px;
+        border: 1px solid transparent; // transparent fallback
+        border-color: $border-color;
         @include border-radius($border-radius);
         @include box-shadow(
-            inset $color 0 0 2px,
-            inset rgba($color,.4) 0 5px 10px
+            inset opacify($color, .6) 0 0 2px,   // inner glow
+            inset rgba($color, .4) 0 0 10px // inner glow
         );
-        @include background(
-            linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
+        @include background(linear-gradient($reflectDegree, $color, transparentize($color, .06) $size, transparentize($color, 1) $size + $size-fadeout));
     }
 }

data/stylesheets/recipes/effect/_ribbon.scss

@@ -1,8 +1,16 @@
+////
+// Ribbon effect
+// Transform an element to a "ribbon"
+// For now ribbon in corner is the only one available
+//
+// @todo add something inspired by http://soiheardyouliekribbon.com/
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @import "compass/css3/transform";
 @import "recipes/shared/pseudo-element";
 
-// add http://soiheardyouliekribbon.com/
-
 @mixin effect-ribbon-corner($position: 'top left', $width: 10em, $height: 2em, $lines: 1, $skin: 'classic', $width-add: 0, $height-add: 0)
 {
     position: absolute;
@@ -72,6 +80,7 @@
     text-shadow: 0 1px 0 rgba(#000, .8);
 
     border: .1em solid #631a15;
+    background: rgb(199,59,60); //fallback
     @include background(linear-gradient(rgb(199,59,60),rgb(184,32,31)));
     box-shadow: 0 .2em .6em rgba(#000, .6);
 
@@ -79,7 +88,7 @@
     &:before
     {
         border: 1px dashed #da5050;
-        margin-top: .1em;
+        margin-top: 1px;
     }
     &:after
     {

data/stylesheets/recipes/effect/_scatter.scss

@@ -1,9 +1,8 @@
-/**
- * Rotate a group of elements as if they were casually tossed on a table
- *
- * @author Mason Wendell http://thecodingdesigner.com
- *
- */
+////
+// Rotate a group of elements as if they were casually tossed on a table
+//
+// @author Mason Wendell http://thecodingdesigner.com
+///
 
 @mixin scatter($rotate: 10deg, $variation: 6) {
     $rotate-a: $rotate - $variation;

data/stylesheets/recipes/effect/_tape.scss

@@ -1,12 +1,11 @@
-/**
- * Scotch tape effect with pure CSS
- * 
- * @thanks Nick La @nickla for original concept
- * @link http://webdesignerwall.com/tutorials/css3-image-styles
- * 
- * @author David Kaneda http://www.davidkaneda.com
- *
- */
+////
+// Scotch tape effect with pure CSS
+// 
+// @thanks Nick La @nickla for original concept
+// @link http://webdesignerwall.com/tutorials/css3-image-styles
+// 
+// @author David Kaneda http://www.davidkaneda.com
+///
 
 @import "../shared/pseudo-element";
 

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

@@ -1,10 +1,11 @@
-/**
- * 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
- */
+////
+// 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 m@moox.fr @MoOx
+///
+
 @mixin form-element-inline($label-width: 8em, $input-width: 20em)
 {
     label

data/stylesheets/recipes/helper/_gravatar.scss

@@ -1,4 +1,4 @@
-//
+////
 // Gravatar recipe
 //
 // This recipe use a gravatar as an element
@@ -6,8 +6,8 @@
 // It's not really usable as it could be, @link https://github.com/MoOx/compass-recipes/issues/27
 // But I want something, so use javascript if you can, or helper if you just need one hardcoded gravatar
 //
-// @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
-//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
 
 @import "recipes/shared/pseudo-element";
 

data/stylesheets/recipes/layout/_flexible-box-model.scss

@@ -1,21 +1,20 @@
-/**
- * Shortcuts for Flexible Box Model
- * 
- * Usage:
- * 
- * SCSS
- * @include box-layout;
- * .mycontainer { @extend .hbox }
- * .mybox { @extend .flex2 }
- *
- * Or in HTML:;
- * <div class="vbox">
- *  <div class="flex">
- *    ...
- *
- * @autor David Kaneda
- *
- */
+////
+// Shortcuts for Flexible Box Model
+// 
+// @usage
+// --sass
+// @include box-layout;
+// .mycontainer { @extend .hbox }
+// .mybox { @extend .flex2 }
+// 
+// @usage
+// --html
+// <div class="vbox">
+//  <div class="flex">
+//    ...
+// 
+// @autor David Kaneda
+///
 
  @mixin flexible-box-layout {
     .box {

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

@@ -1,29 +1,27 @@
-/**
- * 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-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
- */
+////
+// Vertical alignement for page
+// Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/
+// 
+// @usage
+// --sass
+// @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-content-container">
+//             <div class="v-align-content">
+//             Your content !
+//             </div>
+//         </div> 
+//     </div>
+// </body>
+//
+// @thanks Chris Coyier @chriscoyier
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
 
 @mixin vertical-align-requirement
 {

data/stylesheets/recipes/shadow/_drop.scss

@@ -1,11 +1,11 @@
-/**
- * Drop shadow mixins from Nicolas Gallagher demo
- * 
- * @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
- * 
- * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- */
- 
+////
+// Drop shadow mixins from Nicolas Gallagher demo
+// 
+// @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
+// 
+// @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+///
+
 @import "recipes/shadow/drop/curled-corners";
 @import "recipes/shadow/drop/curved";
 @import "recipes/shadow/drop/flying"; // not ready yet

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

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

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

@@ -1,9 +1,10 @@
-/**
- * Drop shadow curled
- *
- * @thanks Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- */
+////
+// 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;

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

@@ -1,9 +1,10 @@
-/**
- * Drop shadow curved
- *
- * @thanks Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- */
+////
+// 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;