compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/shape/_symbol.scss

@@ -3,5 +3,9 @@
  *
  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  */
+@import "recipes/shape/symbol/diamond";
+@import "recipes/shape/symbol/egg";
 @import "recipes/shape/symbol/heart";
-@import "recipes/shape/symbol/infinity";
+@import "recipes/shape/symbol/infinity";
+@import "recipes/shape/symbol/pacman";
+@import "recipes/shape/symbol/yin-yang";

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

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

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

@@ -1,44 +1,22 @@
 /**
  * Shape/Polygon/Star
  *
+ * @todo check if setting a z-index by default is a good thing
  * @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)
+// @author Kit Macallister
+// @link http://kitmacallister.com/2011/css-only-5-point-star/
+@mixin star-5($width: $width, $background-color: transparent, $z-index: 0)
 {
-    margin: $width/2 0;
+    margin-top: $width/2;
+    margin-bottom: $width/2;
     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;
@@ -52,6 +30,7 @@
         display: block;
         width: 0;
         height: 0;
+        z-index: $z-index - 1;
     }
 
     &:before
@@ -73,4 +52,93 @@
         border-left: $width solid transparent;
         @include transform(rotate(-70deg));
     }
+}
+
+// Star (6-points)
+@mixin star-6($width: $width, $background-color: transparent, $z-index: 0)
+{
+    width: 0;
+    height: 0;
+    border-left: $width/2 solid transparent;
+    border-right: $width/2 solid transparent;
+    border-bottom: $width solid $background-color;
+    position: relative;
+    z-index: $z-index;
+
+    &:after
+    {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: $z-index - 1;
+
+        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;
+    }
+}
+
+// @author Alan Johnson
+// @link http://commondream.net/post/8848553728/pure-css-badges
+// @todo maybe improve this to be able to include text without the transform()
+@mixin star-8($width: 8em, $color: #000, $z-index: 0)
+{
+    &,
+    &:before,
+    {
+        @include square($width, $color);
+    }
+
+    position: relative;
+    text-align: center;
+    @include transform(rotate(20deg));
+    z-index: $z-index;
+
+    &:before
+    {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        @include transform(rotate(135deg));
+        z-index: $z-index - 1;
+    }
+}
+
+@mixin star-12($width: 8em, $color: #000, $z-index: 0)
+{
+    &,
+    &:before,
+    &:after
+    {
+        @include square($width, $color);
+    }
+
+    position: relative;
+    text-align: center;
+    z-index: $z-index;
+
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: $z-index - 1;
+    }
+    
+    &:before
+    {
+        @include transform(rotate(30deg));
+    }
+
+    &:after
+    {
+        @include transform(rotate(60deg));
+    }
 }

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

@@ -9,10 +9,10 @@
     {
         $height: $width;
     }
-    
+
     width: 0;
     height: 0;
-    
+
     @if ($direction == 'top')
     {
         border-left: $width solid transparent;
@@ -54,9 +54,9 @@
     @elseif ($direction == 'bottom-left')
     {
         border-top: $width solid transparent;
-            border-bottom: $width solid $color;
+        border-bottom: $width solid $color;
         border-left: $width solid $color;
-        border-right: $width solid transparent;   
+        border-right: $width solid transparent;
     }
     @elseif ($direction == 'bottom-right')
     {
@@ -65,4 +65,9 @@
         border-bottom: $width solid $color;
         border-right: $width solid $color;
     }
+    @else
+    {
+        // https://gist.github.com/1671259
+        @warn "#{error("The direction used does not exist")}";
+    }
 }

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

@@ -0,0 +1,33 @@
+/**
+ * Shape/Symbol/Diamond
+ *
+ * @todo add height support
+ * 
+ * @author Alexander Futekov
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin diamond($width: 5em, $color: #000)
+{
+    $half-width: $width/2;
+    border-style: solid;
+    border-color: transparent transparent $color transparent;
+    
+    border-width: 0 $half-width $half-width $half-width;
+    height: 0;
+    width: $width;
+    position: relative;
+    margin: $half-width/5*2 0 $width 0;
+    
+    &:after
+    {
+        content: "";
+        position: absolute;
+        top: $half-width;
+        left: -$half-width;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-color: $color transparent transparent transparent;
+        border-width: $half-width/5*7 $width 0 $width;
+    }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Shape/Symbol/Egg
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin egg($width: 12em, $height: 18em, $color: #000)
+{
+   display:block;
+   width: $width;
+   height: $height;
+   background-color: $color;
+   @include border-radius(50% 50% 50% 50% / 60% 60% 40% 40%);
+}

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

@@ -1,6 +1,7 @@
 /**
  * Shape/Symbol/Heart
- *
+ * 
+ * @author Nicolas Gallagher @necolas
  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  */
 @mixin heart($width: 100px, $height: 90px, $background-color: transparent)

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

@@ -1,6 +1,7 @@
 /**
  * Shape/Symbol/Infinity
- *
+ * 
+ * @author Nicolas Gallagher @necolas
  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  */
 @mixin infinity($width: 212px, $height: 100px, $background-color: transparent)
@@ -29,6 +30,7 @@
         height: $height*.6;
         border: $height*.2 solid $background-color;
     }
+
     $radius: $height/2;
     &:before
     {

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

@@ -0,0 +1,18 @@
+/**
+ * Shape/Symbol/Pacman
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin pacman($width: 6em, $color: #000)
+{
+    width: 0;
+    height: 0;
+    border-right: $width solid transparent;
+    border-top: $width solid $color;
+    border-left: $width solid $color;
+    border-bottom: $width solid $color;
+    border-top-left-radius: $width;
+    border-top-right-radius: $width;
+    border-bottom-left-radius: $width;
+    border-bottom-right-radius: $width;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Shape/Symbol/Yin-yang
+ *
+ * @author Alexander Futekov
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+@mixin yin-yang($width: 10em, $color: #000, $color-alt: #fff)
+{
+    width: $width*96/100;
+    height: $width*48/100;
+    background: $color-alt;
+    border-color: $color;
+    border-style: solid;
+    $twopercente: $width*2/100;
+    border-width: $twopercente $twopercente $width*5/10 $twopercente;
+    position: relative;
+
+    &,
+    &:before,
+    &:after
+    {
+        @include border-radius(100%);
+    }
+
+    &:before,
+    &:after
+    {
+        content: "";
+        position: absolute;
+        top: 50%;
+        border: $width*18/100 solid;
+        width: $width*12/100;
+        height: $width*12/100;
+    }
+
+    &:before
+    {
+        left: 0;
+        background: $color-alt;
+        border-color: $color;
+    }
+
+    &:after
+    {
+        left: 50%;
+        background: $color;
+        border-color: $color-alt;
+    }
+}

data/stylesheets/recipes/shared/_clearfix.scss

@@ -1,26 +1,27 @@
-/**
- * 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.
- *
- * @thanks Nicolas Gallagher @necolas
- * @link http://nicolasgallagher.com/micro-clearfix-hack/
- */
-@mixin clearfix
+//
+// 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.
+//
+// @thanks Nicolas Gallagher @necolas
+// @link http://nicolasgallagher.com/micro-clearfix-hack/
+//
+
+@mixin clearfix-hack
 {
     // For modern browsers
     &:before,
     &:after
     {
-        content:"";
-        display:block;
-        overflow:hidden;
+        content: "";
+        display: block;
+        overflow: hidden;
     }
 
     &:after
     {
-        clear:both;
+        clear: both;
     }
 
     //For IE 6/7 (trigger hasLayout)
@@ -28,4 +29,17 @@
     {
         zoom: 1;
     }
+}
+
+$clearfix-class: 'clearfix' !default;
+$clearfix-silent: true !default;
+
+%#{$clearfix-class}
+{
+    @include clearfix-hack;
+}
+
+@mixin clearfix
+{
+    @extend %#{$clearfix-class};
 }

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

@@ -4,12 +4,21 @@
  * So use only : and not :: if you want to support IE8
  * IE9 Webkit Firefox Opera understand ::
  */
-@mixin pseudo-element($width: 0, $height: auto, $content: "")
+@mixin pseudo-element($width: 0, $height: auto, $content: "", $position: absolute, $display: block)
 {
     content: $content;
-    position: absolute;
-    display: block;
-    width: $width; // default 0 is for ff3 positionning
+    @if ($position != default)
+    {
+        position: $position;
+    }
+    @if ($display != default)
+    {
+        display: $display;
+    }
+
+    @if ($width != auto) {
+        width: $width; // default 0 is for ff3 positionning
+    }
     
     @if ($height != auto)
     {