compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/effect/_ribbon.scss

@@ -0,0 +1,102 @@
+@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;
+    text-align: center;
+    box-sizing: border-box;
+
+    width: $width;
+    height: $height;
+    line-height: $height / $lines;
+
+    // @if ($position == top left)
+    $position-v: top;
+    $position-h: left;
+    $angle: -45deg;
+    $transform-origin-x: 0;
+    $transform-origin-y: 100%;
+
+    @if ($position == 'top right')
+    {
+        //$position-v: top;
+        $position-h: right;
+        $angle: 45deg;
+        $transform-origin-x: 100%;
+        //$transform-origin-y: 100%;
+    }
+    @elseif ($position == 'bottom right')
+    {
+        $position-v: bottom;
+        $position-h: right;
+        //$angle: -45deg
+        $transform-origin-x: 100%;
+        $transform-origin-y: 0;
+    }
+    @elseif ($position == 'bottom left')
+    {
+        $position-v: bottom;
+        //$position-h: left;
+        $angle: 45deg;
+        //$transform-origin-x: 0;
+        $transform-origin-y: 0;
+    }
+
+    @if ($skin == 'classic')
+    {
+        @extend %effect-ribbon-skin-classic;
+        // skin border size to remove;
+        $width-add: .1em;
+        $height-add: .1em;
+    }
+    //@elseif ($skin == 'github')
+    //{
+    //    @extend %effect-ribbon-skin-github;
+    //}
+
+    // here is the awesome trick !
+    $value: pow($width + $width-add, 2) / 2 ;
+    #{$position-v}: sqrt($value) - $height - $height-add;
+    #{$position-h}: 0;
+
+    @include transform(rotate($angle));
+    @include transform-origin($transform-origin-x, $transform-origin-y);
+}
+
+%effect-ribbon-skin-classic
+{
+    color: #fff;
+    text-shadow: 0 1px 0 rgba(#000, .8);
+
+    border: .1em solid #631a15;
+    @include background(linear-gradient(rgb(199,59,60),rgb(184,32,31)));
+    box-shadow: 0 .2em .6em rgba(#000, .6);
+
+    // light before(below) dark
+    &:before
+    {
+        border: 1px dashed #da5050;
+        margin-top: .1em;
+    }
+    &:after
+    {
+        border: 1px dashed #631a15;
+    }
+
+    &:before,
+    &:after
+    {
+        @include pseudo-element(100%, 86%);
+        top: 7%;
+        border-left: 0;
+        border-right: 0;
+    }
+}
+
+//%effect-ribbon-skin-github
+//{
+//
+//}

data/stylesheets/recipes/effect/_scatter.scss

@@ -0,0 +1,22 @@
+/**
+ * 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;
+    $rotate-b: $rotate + $variation;
+    $rotate-c: $rotate + ($variation / 2);
+    @include rotate($rotate);
+    &:nth-of-type(2n+2) {
+        @include rotate($rotate-a);
+    }
+    &:nth-of-type(3n+3) {
+        @include rotate($rotate-b);
+    }
+    &:nth-of-type(5n+5) {
+        @include rotate($rotate-c);
+    }
+}

data/stylesheets/recipes/effect/_tape.scss

@@ -0,0 +1,43 @@
+/**
+ * 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";
+
+$tape-width: 60px !default;
+$tape-height: 25px !default;
+$tape-color: rgb(254,243,127) !default;
+$tape-opacity: .4 !default;
+$tape-angle: -2deg !default;
+
+@mixin tape (
+    $width: $tape-width,
+    $height: $tape-height,
+    $color: $tape-color,
+    $opacity: $tape-opacity,
+    $angle: $tape-angle
+)
+{
+    overflow: visible;
+    &:after {
+        @include pseudo-element($width: $width, $height: $height);
+        top: ceil(-$height/2);
+        left: 50%;
+        margin-left: -$width/2;
+
+        border: solid 1px darken($color, 10);
+
+        @include background-gradient(rgba($color, $opacity), $type: matte);
+        @include rotate($angle);
+        @include box-shadow(
+            inset 0 1px 0 rgba(255,255,255,.3),
+            0 1px 0 rgba(0,0,0,.2)
+        )
+    }
+}

data/stylesheets/recipes/helper/_gravatar.scss

@@ -0,0 +1,79 @@
+//
+// Gravatar recipe
+//
+// This recipe use a gravatar as an element
+//
+// 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
+//
+
+@import "recipes/shared/pseudo-element";
+
+// default values
+$helper-gravatar-size:      48px    !default;
+$helper-gravatar-default:   ""      !default;
+$helper-gravatar-rating:    PG      !default;
+$helper-gravatar-ssl:       false   !default;
+
+@mixin helper-gravatar-base(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    background-image: gravatar_url(
+        $email: unquote($email),
+        $size: $size/1px, // to remove px
+        $default: unquote($default),
+        $rating: $rating,
+        $ssl: $ssl
+    );
+    background-repeat: no-repeat;
+}
+
+@mixin helper-gravatar(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    width: $size;
+    height: $size;
+    @include helper-gravatar-base($email, $size, $default, $rating, $ssl);
+
+}
+
+@mixin helper-gravatar-pseudo(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    @include pseudo-element($size, $size, $position: default);
+    @include helper-gravatar-base($email, $size, $default, $rating, $ssl);
+}
+
+@mixin helper-gravatar-auto(
+    $pseudo:    before,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    &:#{$pseudo}
+    {
+        @include pseudo-element($size, $size, $position: default);
+        width: $size;
+        height: $size;
+        background-repeat: no-repeat;
+    }
+
+}

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

@@ -0,0 +1,68 @@
+/**
+ * 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
+ *
+ */
+
+ @mixin flexible-box-layout {
+    .box {
+        @include display-box;
+        @include box-align(stretch);
+
+        > * {
+            display: block;
+            @extend .flex-0;
+        }
+    }
+
+    .hbox {
+        @extend .box;
+        @include display-orient(horizontal);
+    }
+     
+    .vbox {
+        @extend .box;
+        @include display-orient(vertical);
+    }
+     
+    .reverse {
+        @include box-direction(reverse);
+    }
+     
+    .flex-0 {
+        @include box-flex(0);
+    }
+     
+    .flex, .spacer, .flex-1 {
+        @include box-flex(1);
+    }
+     
+    .flex-2 {
+        @include box-flex(2);
+    }
+     
+    .start {
+        @include box-pack(start);
+    }
+
+    .end {
+        @include box-pack(end);
+    }
+     
+    .center {
+        @include box-pack(center);
+    }
+}

data/stylesheets/recipes/shadow/_drop.scss

@@ -8,7 +8,7 @@
  
 @import "recipes/shadow/drop/curled-corners";
 @import "recipes/shadow/drop/curved";
-//@import "recipes/shadow/drop/flying"; // not ready yet
+@import "recipes/shadow/drop/flying"; // not ready yet
 @import "recipes/shadow/drop/lifted-corners";
 @import "recipes/shadow/drop/perspective";
 @import "recipes/shadow/drop/raised";

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

@@ -23,6 +23,6 @@
 // Usage
 body:before
 {
-	@include top-shadow;
+    @include top-shadow;
 }
 */

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

@@ -7,8 +7,8 @@
 @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;
@@ -18,6 +18,8 @@
         $border-radius-1: $radius-1;
         $border-radius-2: $radius-2;
     //}
+
+
     @if ($side == 'left')
     {
         $right: 50%;
@@ -60,8 +62,8 @@
     {
         content: "";
         position: absolute;
-        z-index: -2;
-        
+        z-index: -1;
+
         top: $top;
         bottom: $bottom;
         left: $left;

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

@@ -4,7 +4,12 @@
  * @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)
+@mixin drop-shadow-flying(
+    $box-shadow-radius: 30px,
+    $color: #000,
+    $distance: 1em,
+    $height: 2px
+)
 {
     position: relative;
 
@@ -14,29 +19,16 @@
         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));
+        bottom: -$distance;
     }
 
     &:after
     {
-        $height: .15em;
-
-        left: 5%;
-        width: 90%;
+        left: 8%;
+        width: 84%;
         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));
+        background: rgba(#000, .3);
+        @include border-radius(#{50%} / #{1px});
+        @include box-shadow(0 $height $box-shadow-radius/2 rgba(#000, .2), 0 $height $box-shadow-radius rgba(#000, .15));
     }
 }

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

@@ -1,13 +1,15 @@
 /**
  * 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
+ * /!\ 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;
+    
     & > :last-child::before
     {
         content: "";

data/stylesheets/recipes/shape/_polygon.scss

@@ -8,6 +8,7 @@
 @import "recipes/shape/polygon/parallelogram";
 @import "recipes/shape/polygon/pentagon";
 @import "recipes/shape/polygon/rectangle";
+@import "recipes/shape/polygon/rhombus";
 @import "recipes/shape/polygon/square";
 @import "recipes/shape/polygon/star";
 @import "recipes/shape/polygon/trapezoid";