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

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

@@ -1,9 +1,10 @@
-/**
- * Drop shadow flying
- *
- * @thanks Geoffrey Crofte @geoffrey_crofte
- * @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
- */
+////
+// 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: 30px,
     $color: #000,

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

@@ -1,12 +1,28 @@
-/**
- * Drop shadow w/ lifted corners
- *
- * @thanks Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- */
-@mixin drop-shadow-lifted-corners($height: 15px, $margin: 10px, $angle: 4deg, $color: rgba(#000, .7))
+////
+// Drop shadow w/ lifted corners
+//
+// @thanks Nicolas Gallagher @necolas
+// @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+// @thanks Matt Hamm @matthamm
+// @link http://matthamm.com/box-shadow-curl.html
+///
+
+@import "compass/css3/box-shadow";
+
+////
+// Drop shadow w/ lifted corners parent element. Totally optional.
+///
+@mixin drop-shadow-lifted-corners-parent()
+{
+  position: relative;
+  z-index: 1; /* prevent shadows falling behind containers with backgrounds */
+  margin: 0;
+}
+
+@mixin drop-shadow-lifted-corners($height: 16px, $margin: 10px, $angle: 6deg, $color: rgba(#000, .3))
 {
     position: relative;
+    @include box-shadow(0 1px $height/4 $color);
 
     &::before,
     &::after
@@ -15,24 +31,26 @@
         position:absolute;
         z-index: -2;
         
-        bottom: $height;
+        bottom: $margin;
 
-        width: 50%;
-        height: 20%;
-        
-        @include box-shadow(0 $height $margin $color);
+        width: 70%;
+        height: 55%;
+        max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
+        max-height: 100px;
         
+        @include box-shadow(0 $height/2 $height $color);
     }
 
     &::before
     {
         left: $margin;
-        @include transform(rotate(-$angle));
+        @include transform(skew(-$angle*2.5) rotate(-$angle));
     }
     
     &::after
     {
         right: $margin;
-        @include transform(rotate($angle));
+        z-index: -1;
+        @include transform(skew($angle*2.5) rotate($angle));
     }
 }

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

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

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

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

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

@@ -1,11 +1,12 @@
-/**
- * Drop shadow rules required for transform on drop shadow
- * 
- * /!\ This is required if 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/
- */
+////
+// Drop shadow rules required for transform on drop shadow
+// 
+// /!\ This is required if 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)
 {
     position: relative;

data/stylesheets/recipes/shape/_ellipse.scss

@@ -1,8 +1,9 @@
-/**
- * Shape/Ellipse
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Ellipse
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @import "compass/css3/border-radius";
 
 @mixin ellipse($width: 200px, $height: 100px)

data/stylesheets/recipes/shape/_polygon.scss

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @import "recipes/shape/polygon/hexagon";
 @import "recipes/shape/polygon/octagon";
 @import "recipes/shape/polygon/parallelogram";

data/stylesheets/recipes/shape/_symbol.scss

@@ -1,8 +1,9 @@
-/**
- * Shape/Symbol
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @import "recipes/shape/symbol/diamond";
 @import "recipes/shape/symbol/egg";
 @import "recipes/shape/symbol/heart";

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon/Hexagon
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Hexagon
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin hexagon($width: 100px, $height: 55px, $background-color: transparent)
 {
     width: $width;

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

@@ -1,8 +1,8 @@
-/**
- * Shape/Polygon/Octagon
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Octagon
+//
+// @author Maxime Thirouin m@moox.fr @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)

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

@@ -1,8 +1,8 @@
-/**
- * Shape/Polygon/Parallelogram
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Parallelogram
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
 
 @import "compass/css3/transform";
 

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon/Pentagon
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Pentagon
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin pentagon($width: 100px, $height: 100px, $background-color: transparent)
 {
     position: relative;

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

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

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon/Rhombus
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Rhombus
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin rhombus($width, $color: #000, $skew: 0deg, $rotate: -45deg)
 {
     @include square($width, $color);

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon/Square
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Square
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin square($width: 100px, $background: transparent)
 {
     width: $width;

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

@@ -1,9 +1,9 @@
-/**
- * Shape/Polygon/Star
- *
- * @todo check if setting a z-index by default is a good thing
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Star
+//
+// @todo check if setting a z-index by default is a good thing
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
 
 // Star (5-points)
 // @author Kit Macallister

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Polygon/Trapezoid
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Polygon/Trapezoid
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin trapezoid($width: 100px, $height: 100px, $background-color: transparent)
 {
     border-bottom: $height solid $background-color;

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

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

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

@@ -1,11 +1,12 @@
-/**
- * Shape/Symbol/Diamond
- *
- * @todo add height support
- * 
- * @author Alexander Futekov
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Diamond
+//
+// @todo add height support
+// 
+// @author Alexander Futekov
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin diamond($width: 5em, $color: #000)
 {
     $half-width: $width/2;

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Symbol/Egg
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Egg
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin egg($width: 12em, $height: 18em, $color: #000)
 {
    display:block;

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

@@ -1,9 +1,10 @@
-/**
- * Shape/Symbol/Heart
- * 
- * @author Nicolas Gallagher @necolas
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Heart
+// 
+// @author Nicolas Gallagher @necolas
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin heart($width: 100px, $height: 90px, $background-color: transparent)
 {
     position: relative;

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

@@ -1,9 +1,10 @@
-/**
- * Shape/Symbol/Infinity
- * 
- * @author Nicolas Gallagher @necolas
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Infinity
+// 
+// @author Nicolas Gallagher @necolas
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin infinity($width: 212px, $height: 100px, $background-color: transparent)
 {
     $coefficient: 2.12;

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

@@ -1,8 +1,9 @@
-/**
- * Shape/Symbol/Pacman
- *
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Pacman
+//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin pacman($width: 6em, $color: #000)
 {
     width: 0;

data/stylesheets/recipes/shape/symbol/_yin-yang.scss

@@ -1,9 +1,10 @@
-/**
- * Shape/Symbol/Yin-yang
- *
- * @author Alexander Futekov
- * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
- */
+////
+// Shape/Symbol/Yin-yang
+//
+// @author Alexander Futekov
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
 @mixin yin-yang($width: 10em, $color: #000, $color-alt: #fff)
 {
     width: $width*96/100;