compass-recipes 0.3.0.alpha.2 → 0.3.0

data/stylesheets/recipes/effect/_ribbon.scss

@@ -8,14 +8,19 @@
 // @author Maxime Thirouin m@moox.fr @MoOx
 ///
 
-@import "compass/css3/transform";
-@import "recipes/shared/pseudo-element";
+@import "compass/css3";
+@import "recipes/utilities/pseudo-element";
 
-@mixin effect-ribbon-corner($position: 'top left', $width: 10em, $height: 2em, $lines: 1, $skin: 'classic', $width-add: 0, $height-add: 0)
+@mixin effect-ribbon-corner(
+    $position: 'top left',
+    $width: 10em, $height: 2em, $lines: 1,
+    $skin: 'classic', $width-add: 0, $height-add: 0,
+    $offset-v: 0, $offset-h: 0
+)
 {
     position: absolute;
     text-align: center;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
 
     width: $width;
     height: $height;
@@ -36,7 +41,7 @@
         $transform-origin-x: 100%;
         //$transform-origin-y: 100%;
     }
-    @elseif ($position == 'bottom right')
+    @else if ($position == 'bottom right')
     {
         $position-v: bottom;
         $position-h: right;
@@ -44,7 +49,7 @@
         $transform-origin-x: 100%;
         $transform-origin-y: 0;
     }
-    @elseif ($position == 'bottom left')
+    @else if ($position == 'bottom left')
     {
         $position-v: bottom;
         //$position-h: left;
@@ -67,8 +72,8 @@
 
     // here is the awesome trick !
     $value: pow($width + $width-add, 2) / 2 ;
-    #{$position-v}: sqrt($value) - $height - $height-add;
-    #{$position-h}: 0;
+    #{$position-v}: sqrt($value) - $height - $height-add + $offset-v;
+    #{$position-h}: 0 + $offset-h;
 
     @include transform(rotate($angle));
     @include transform-origin($transform-origin-x, $transform-origin-y);
@@ -76,35 +81,37 @@
 
 %effect-ribbon-skin-classic
 {
-    color: #fff;
+    $color: #fff;
+    $border-width: 1px;
+    $border-color: #631a15;
+    $border-dot-subcolor: #da5050;
+    $border-dot-offset: 3px;
+
+    color: $color;
     text-shadow: 0 1px 0 rgba(#000, .8);
 
-    border: .1em solid #631a15;
+    border: $border-width solid $border-color;
+
     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);
 
-    // light before(below) dark
-    &:before
-    {
-        border: 1px dashed #da5050;
-        margin-top: 1px;
-    }
-    &:after
-    {
-        border: 1px dashed #631a15;
-    }
-
+    // todo replace this use of pseudo elements by appropriate backgrounds properties (tricky gradients)
     &:before,
-    &:after
-    {
-        @include pseudo-element(100%, 86%);
-        top: 7%;
+    &:after {
+        @include pseudo-element(100%, 0);
+        border: $border-width dashed;
         border-left: 0;
         border-right: 0;
+        border-top-color: $border-color;
+        border-bottom-color: $border-dot-subcolor;
     }
+
+    &:before { top: $border-dot-offset; }
+    &:after { bottom: $border-dot-offset - $border-width *2; }
 }
 
+// @todo ?
 //%effect-ribbon-skin-github
 //{
 //

data/stylesheets/recipes/effect/_tape.scss

@@ -1,13 +1,13 @@
 ////
 // 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";
+@import "recipes/utilities/pseudo-element";
 
 $tape-width: 60px !default;
 $tape-height: 25px !default;
@@ -25,7 +25,7 @@ $tape-angle: -2deg !default;
 {
     overflow: visible;
     &:after {
-        @include pseudo-element($width: $width, $height: $height);
+        @include pseudo-element($width, $height);
         top: ceil(-$height/2);
         left: 50%;
         margin-left: -$width/2;

data/stylesheets/recipes/helper/_gravatar.scss

@@ -9,7 +9,7 @@
 // @author Maxime Thirouin m@moox.fr @MoOx
 ///
 
-@import "recipes/shared/pseudo-element";
+@import "recipes/utilities/pseudo-element";
 
 // default values
 $helper-gravatar-size:      48px    !default;
@@ -57,7 +57,7 @@ $helper-gravatar-ssl:       false   !default;
     $ssl:       $helper-gravatar-ssl
 )
 {
-    @include pseudo-element($size, $size, $position: default);
+    @include pseudo-element($size, $size, $position: null);
     @include helper-gravatar-base($email, $size, $default, $rating, $ssl);
 }
 
@@ -70,9 +70,7 @@ $helper-gravatar-ssl:       false   !default;
 {
     &:#{$pseudo}
     {
-        @include pseudo-element($size, $size, $position: default);
-        width: $size;
-        height: $size;
+        @include pseudo-element($size, $size, $position: null);
         background-repeat: no-repeat;
     }
 

data/stylesheets/recipes/image/_dimensions.scss

@@ -0,0 +1,69 @@
+// image-dimensions(img_src)
+// $img - image path
+// $dimensions: list explaining which dimensions we should include (width height line-height).
+// By default it's set to `true` which is equivalent to width: true height: true line-height: false
+// You can pass `true false` to have only width, or `false false true` to only have line-height
+@mixin image-dimensions($img, $dimensions: true)
+{
+	$args: length($dimensions);
+	$width: nth($dimensions, 1);
+	$height: false;
+	$line-height: false;
+	@if ($width == all)
+	{
+		$width: true;
+		$height: true;
+		$line-height: true;
+	}
+	@if ($args>1)
+	{
+		$height: nth($dimensions, 2);
+		@if ($args>2)
+		{
+			$line-height: nth($dimensions, 3);
+		}
+	}
+	@else
+	{
+		$height: $width;
+	}
+
+	// width
+	@if ($width == true)
+	{
+		@include image-width($img);
+	}
+	@else if($width != false)
+	{
+		width: $width;
+	}
+
+	// height & line-height
+	@if ($height == true)
+	{
+		@include image-height($img);
+	}
+	@else if($height != false)
+	{
+		height: $height;
+	}
+
+	@if ($line-height == true)
+	{
+		line-height: image-height($img);
+	}
+	@else if($line-height != false)
+	{
+		line-height: $line-height;
+	}
+}
+
+@mixin image-width($img)
+{
+	width: image-width($img);
+}
+
+@mixin image-height($img)
+{
+	height: image-height($img);
+}

data/stylesheets/recipes/image/_inline.scss

@@ -0,0 +1,12 @@
+@import "recipes/image/dimensions";
+
+@mixin image-inline($image)
+{
+	background: inline_image($image) no-repeat;
+}
+
+@mixin image-inline-with-dimensions($image)
+{
+	background: inline_image($image) no-repeat;
+	@include image-dimensions($image)
+}

data/stylesheets/recipes/image/_sprite.scss

@@ -0,0 +1,57 @@
+////
+// Sprites mixin/functions to make ti easier to deal with simple simple sprite
+//
+// $simple-sprite-map: simple-sprite();
+// rule { @include sprite-item(image-name)} // output background: {image-}url("sprite/image-name.png") x y no-repeat;
+////
+
+@import "recipes/image/dimensions";
+@import "compass/typography/text/replacement";
+
+$simple-sprite-path: "sprite" !default;
+$simple-sprite-map: null !default;
+
+// create simple sprite from image in $simple-sprite-path (default to "sprite" folder)
+@function simple-sprite-map()
+{
+	@return sprite-map($simple-sprite-path + "/*.png");
+}
+
+// return complete filename of the given sprite item
+@function sprite-item-file($image, $sprite-map: $simple-sprite-map)
+{
+	@return sprite-file($sprite-map, $image);
+}
+
+// return width of the given sprite item
+@function sprite-item-width($image, $sprite-map: $simple-sprite-map)
+{
+	@return image-width(sprite-item-file($image, $sprite-map));
+}
+
+// return height of the given sprite item
+@function sprite-item-height($image, $sprite-map: $simple-sprite-map)
+{
+	@return image-height(sprite-item-file($image, $sprite-map));
+}
+
+// include background property to use the sprite item
+@mixin sprite-item($image, $x: 0, $y: 0, $repeat: no-repeat, $sprite-map: $simple-sprite-map)
+{
+	background: sprite($sprite-map, $image, $x, $y) $repeat;
+}
+
+// include background property to use the sprite item + width & height (& line-height if you want (e.g. for button background))
+// do not forget to use a appropriated display property (like block or inline-block
+@mixin sprite-item-with-dimensions($image, $line-height: false, $x: 0, $y: 0, $sprite-map: $simple-sprite-map)
+{
+	@include image-dimensions(sprite-item-file($image, $sprite-map), true true $line-height);
+	@include sprite-item($image, $x, $y, $sprite-map: $sprite-map);
+}
+
+// include sprite item with dimensions (see sprite-item-with-dimensions()) + hide-text
+@mixin sprite-item-replacement($image, $line-height: false, $x: 0, $y: 0, $sprite-map: $simple-sprite-map)
+{
+	@include hide-text();
+	@include sprite-item-with-dimensions($image, $line-height, $x, $y, $sprite-map);
+}

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

@@ -1,65 +1,24 @@
-////
-// 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
-///
+@import "recipes/layout/vertical-align/block";
 
-@mixin vertical-align-requirement
+// Simple vertical align mixin
+// Parent must have the same height & line-height. It's does the trick
+// (use vertical-align-parent-height() mixin)
+// $line-height - original line-height to set back
+// $vertical-align - vertical align wanted
+// $text-align - optional text-align, can be set to null if not wanted
+@mixin vertical-align($line-height: 1, $vertical-align: middle, $text-align: center)
 {
-    html,
-    body
-    {
-        height:100%;
-        margin: 0;
-        padding: 0;
-    }
+	display: inline-block;
+	line-height: $line-height;
+	vertical-align: $vertical-align;
+	@if ($text-align != null)
+	{
+		text-align: $text-align;
+	}
 }
 
-@mixin vertical-align-container
+@mixin vertical-align-parent-height($height)
 {
-
-    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%;
-        }
+	height: $height;
+	line-height: $height;
+}

data/stylesheets/recipes/layout/vertical-align/_block.scss

@@ -0,0 +1,67 @@
+////
+// Vertical alignement for block
+// Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/
+//
+// @usage
+// --sass
+// @include vertical-align-block-page; // if your content is the entire webpage
+// .v-align-wrapper { @include vertical-align-block-wrapper }
+// .v-align-content { @include vertical-align-block }
+// if you support ie lte 7
+// .v-align-content { @include vertical-align-block-fallback }
+// --html
+// <body>
+//     <div class="v-align-wrapper">
+//         <div class="v-align-content">
+//             <div class="v-align-fallback"> <!-- wrapper for ie lte 7 support -->
+//             Your content !
+//             </div>
+//         </div>
+//     </div>
+// </body>
+//
+// @thanks Chris Coyier @chriscoyier
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
+
+// Use this if your content is the entire webpage
+@mixin vertical-align-block-page
+{
+    html,
+    body
+    {
+        height:100%;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+@mixin vertical-align-block-wrapper
+{
+
+    display: table;
+    overflow: hidden;
+    margin-left: auto;
+    margin-right: auto;
+    height: 100%;
+
+    // ie6 ie7
+    *position:relative;
+}
+
+    @mixin vertical-align-block
+    {
+        display: table-cell;
+        vertical-align: middle;
+
+        // ie6 ie7
+        *position: absolute;
+        *top: 50%;
+    }
+        // if you support ie lte 7, you need to add an additionnal wrapper under the `vertical-align-block` element
+        @mixin vertical-align-block-fallback
+        {
+            // ie6 ie7
+            *position: relative;
+            *top: -50%;
+        }