Merge branch 'master' of github.com:MoOx/compass-recipes

senchalabs · Jan 9, 2012 · 64f7d28 · 64f7d28
2 parents f447763 + 1ff4436
commit 64f7d28
Show file tree

Hide file tree

Showing 17 changed files with 660 additions and 75 deletions.
diff --git a/stylesheets/recipes/_background.scss b/stylesheets/recipes/_background.scss
@@ -3,4 +3,12 @@
 @import "recipes/background/blueprint-grid";
 @import "recipes/background/radial-overlay";
 @import "recipes/background/tartan";
-@import "recipes/background/carbon-fiber";
+@import "recipes/background/carbon-fiber";
+@import "recipes/background/stripes";
+@import "recipes/background/cicada";
+@import "recipes/background/tablecloth";
+@import "recipes/background/lined-paper";
+@import "recipes/background/madras";
+@import "recipes/background/checkerboard";
+@import "recipes/background/houndstooth";
+@import "recipes/background/polka-dot";
diff --git a/stylesheets/recipes/background/_checkerboard.scss b/stylesheets/recipes/background/_checkerboard.scss
@@ -0,0 +1,61 @@
+/**
+ * Checkerboard background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#checkerboard
+ * @link http://lea.verou.me/css3patterns/#diagonal-checkerboard
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-checkerboard($bg-color: #eee, $box-color:  black, $size: 60px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        ),
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        )
+    );
+    background-size: $size $size;
+    background-position: 0 0, ($size / 2) ($size / 2);
+}
+
+
+@mixin background-checkerboard-diagonal($bg-color: #eee, $box-color:  black, $size: 60px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        ),
+        linear-gradient(
+            -45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        )
+    );
+    background-size:$size $size;
+}
diff --git a/stylesheets/recipes/background/_cicada.scss b/stylesheets/recipes/background/_cicada.scss
@@ -0,0 +1,42 @@
+/**
+ * Cicada background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#cicada-stripes
+ *
+ * @author Randy Merril http://forthedeveloper.com/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-stripes-cicada($bg-color: gray, $stripe-color: white, $dir: left) {
+    $transparent: rgba(black, 0);
+    $stripe-color1: rgba($stripe-color, 0.07);
+    $stripe-color2: rgba($stripe-color, 0.13);
+    $stripe-color3: rgba($stripe-color, 0.17);
+    $stripe-color4: rgba($stripe-color, 0.19);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            $dir,
+            $stripe-color1 50%,
+            $transparent 50%
+        ),
+        linear-gradient(
+            $dir,
+            $stripe-color2 50%,
+            $transparent 50%
+        ),
+        linear-gradient(
+            $dir,
+            $transparent 50%,
+            $stripe-color3 50%
+        ),
+        linear-gradient(
+            $dir,
+            $transparent 50%,
+            $stripe-color4 50%
+        )
+    );
+    background-size: 13px, 29px, 37px, 53px;
+}
diff --git a/stylesheets/recipes/background/_houndstooth.scss b/stylesheets/recipes/background/_houndstooth.scss
@@ -0,0 +1,51 @@
+/**
+ *
+ * Houndstooth background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#houndstooth
+ *
+ * @author Antoine Bernier http://abernier.name for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-houndstooth($color-1: white, $color-2:  black, $size: 2em) {
+    $transparent: rgba(black, 0);
+    background-color: $color-1;
+    @include background-image(
+        linear-gradient(
+            -45deg,
+            $color-1 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $color-2 75%,
+            $color-2
+        ),
+        linear-gradient(
+            -45deg,
+            $color-2 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $color-1 75%,
+            $color-1
+        ),
+        linear-gradient(
+            45deg,
+            $color-2 17%,
+            $transparent 17%,
+            $transparent 25%,
+            $color-2 25%,
+            $color-2 36%,
+            $transparent 36%,
+            $transparent 64%,
+            $color-2 64%,
+            $color-2 75%,
+            $transparent 75%,
+            $transparent 83%,
+            $color-2 83%
+        )
+    );
+    background-size: $size $size;
+    background-position: 0 0, ($size / 2) ($size / 2), ($size / 2) ($size / 2)
+}
diff --git a/stylesheets/recipes/background/_lined-paper.scss b/stylesheets/recipes/background/_lined-paper.scss
@@ -0,0 +1,30 @@
+/**
+ * Lined paper background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#lined-paper
+ *
+ * @author Sarah Backhouse http://www.jadu.net/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-lined-paper($bg-color: white, $rule-color: #eeeeee, $guide-color: #abced4, $baseline: 1.5em, $margin: 79px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            left,
+            $transparent $margin,
+            $guide-color $margin,
+            $guide-color $margin + 3,
+            $transparent $margin + 3
+        ),
+        linear-gradient(
+            top,
+            $rule-color 0.05em,
+            $transparent 0.05em
+        )
+    );
+    background-size: 100% $baseline;
+}
diff --git a/stylesheets/recipes/background/_madras.scss b/stylesheets/recipes/background/_madras.scss
@@ -0,0 +1,84 @@
+/**
+ * Madras background pattern
+ *
+ * Before compass 0.11.5, you need to add
+ * Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
+ * To your configuration (config.rb)
+ * @see https://github.com/chriseppstein/compass/issues/401
+ *
+ * @link http://lea.verou.me/css3patterns/#madras
+ *
+ * @author Divya Manian http://nimbupani.com/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-madras($bg-color: hsl(34, 53%, 82%), $color1: $bg-color, $color2: $bg-color, $color3: $bg-color) {
+    $transparent: rgba(black, 0);
+    // calculate colors if specific colors aren't passed in
+    @if ($color1 == $bg-color){
+        $color1: change-color(rgba(complement($bg-color), 1), $saturation: 65%, $lightness: 10%, $alpha: 0.5);
+    }
+    @if ($color2 == $bg-color){
+        $color2: adjust-color(rgba($bg-color, 1), $hue: -30, $lightness: -20%, $alpha: -0.5);
+    }
+    @if ($color3 == $bg-color){
+        $color3: adjust-color(rgba($bg-color, 1), $saturation: 35%, $lightness: -20%, $alpha: -0.5);
+    }
+    background-color: $bg-color;
+    @include background-image(
+        repeating-linear-gradient(
+            45deg,
+            transparent 5px,
+            $color1 5px,
+            $color1 10px,
+            $transparent 10px,
+            $transparent 35px,
+            $color2 35px,
+            $color2 40px,
+            $color1 40px,
+            $color1 50px,
+            $transparent 50px,
+            $transparent 60px,
+            $color2 60px,
+            $color2 70px,
+            $color3 70px,
+            $color3 80px,
+            $transparent 80px,
+            $transparent 90px,
+            $color2 90px,
+            $color2 110px,
+            $transparent 110px,
+            $transparent 120px,
+            $color1 120px,
+            $color1 140px
+        ),
+        repeating-linear-gradient(
+            135deg,
+            transparent 5px,
+            $color1 5px,
+            $color1 10px,
+            $transparent 10px,
+            $transparent 35px,
+            $color2 35px,
+            $color2 40px,
+            $color1 40px,
+            $color1 50px,
+            $transparent 50px,
+            $transparent 60px,
+            $color2 60px,
+            $color2 70px,
+            $color3 70px,
+            $color3 80px,
+            $transparent 80px,
+            $transparent 90px,
+            $color2 90px,
+            $color2 110px,
+            $transparent 110px,
+            $transparent 140px,
+            $color1 140px,
+            $color1 160px
+        )
+    );
+}
diff --git a/stylesheets/recipes/background/_polka-dot.scss b/stylesheets/recipes/background/_polka-dot.scss
@@ -0,0 +1,28 @@
+/**
+ *
+ * Polkadot background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#polka-dot
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-polka-dot($bg-color: black, $dot-color:  white, $size: 15%, $spacing: 60px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        radial-gradient(
+            $dot-color $size,
+            $transparent $size + 1
+        ),
+        radial-gradient(
+            $dot-color $size,
+            $transparent $size + 1
+        )
+    );
+    background-size: $spacing $spacing;
+    background-position: 0 0, ($spacing / 2) ($spacing / 2);
+}
diff --git a/stylesheets/recipes/background/_radial-overlay.scss b/stylesheets/recipes/background/_radial-overlay.scss
@@ -7,9 +7,9 @@
 @import "compass/css3/images";
 
 @mixin background-radial-overlay(
-    $background-color: rgba(#fff, .7),
-    $foreground-color: rgba(#fff, .3),
-    $radial-change-color-distance: 35px)
+    $background-color: rgba(#000, .7),
+    $foreground-color: rgba(#7f7f7f, .5),
+    $radial-change-color-distance: 35%)
 {
     @include background-image(radial-gradient($foreground-color, $foreground-color $radial-change-color-distance, $background-color));
 }
diff --git a/stylesheets/recipes/background/_stripes.scss b/stylesheets/recipes/background/_stripes.scss
@@ -0,0 +1,46 @@
+/**
+ * Striped background patterns
+ *
+ * Before compass 0.11.5, you need to add
+ * Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
+ * To your configuration (config.rb)
+ * @see https://github.com/chriseppstein/compass/issues/401
+ *
+ * @link http://lea.verou.me/css3patterns/#horizontal-stripes
+ * @link http://lea.verou.me/css3patterns/#vertical-stripes
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-stripes-straight($dir: left, $bg-color: gray, $stripe-color:  rgba(white, 0.5), $size: 50px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            $dir,
+            $transparent 50%,
+            $stripe-color 50%
+        )
+    );
+    background-size: $size $size;
+}
+
+
+@mixin background-diagonal-stripes($dir: 45deg, $bg-color: gray, $stripe-color: rgba(white, 0.5), $size: 50px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        repeating-linear-gradient(
+            $dir,
+            $transparent,
+            $transparent $size / 2,
+            $stripe-color $size / 2,
+            $stripe-color $size
+        )
+    );
+}
+
+