Permalink
Browse files

add polkadot pattern

  • Loading branch information...
codingdesigner committed Jan 8, 2012
1 parent f7187f1 commit 13d20e563eb550e69414d948ec29bd10f979a9a0
@@ -11,3 +11,4 @@
@import "recipes/background/madras";
@import "recipes/background/checkerboard";
@import "recipes/background/houndstooth";
+@import "recipes/background/polka-dot";
@@ -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);
+}
@@ -36,6 +36,8 @@ <h2>Patterns</h2>
<div class="background-houndstooth"></div>
+<div class="background-polka-dot"></div>
+
<h2>Gradients</h2>
<p class="doc">

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -79,6 +79,10 @@ div {
@include background-houndstooth;
}
+.background-polka-dot {
+ @include background-polka-dot;
+}
+
// Gradients
$gradient-color: #CF714A;

0 comments on commit 13d20e5

Please sign in to comment.