Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add polkadot pattern

  • Loading branch information...
commit 13d20e563eb550e69414d948ec29bd10f979a9a0 1 parent f7187f1
@codingdesigner codingdesigner authored
View
1  stylesheets/recipes/_background.scss
@@ -11,3 +11,4 @@
@import "recipes/background/madras";
@import "recipes/background/checkerboard";
@import "recipes/background/houndstooth";
+@import "recipes/background/polka-dot";
View
28 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);
+}
View
2  tests/recipes/background/index.html
@@ -36,6 +36,8 @@
<div class="background-houndstooth"></div>
+<div class="background-polka-dot"></div>
+
<h2>Gradients</h2>
<p class="doc">
View
21 tests/recipes/background/s.css
@@ -187,6 +187,15 @@ h2 {
* @author Antoine Bernier http://abernier.name for the original pattern
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
*/
+/**
+ *
+ * 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
+ */
div {
width: 20em;
height: 20em;
@@ -349,6 +358,18 @@ div {
background-position: 0 0, 1em 1em, 1em 1em;
}
+.background-polka-dot {
+ background-color: black;
+ background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 16, color-stop(15%, #ffffff), color-stop(16%, rgba(0, 0, 0, 0))), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 16, color-stop(15%, #ffffff), color-stop(16%, rgba(0, 0, 0, 0)));
+ background-image: -webkit-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%), -webkit-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%);
+ background-image: -moz-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%), -moz-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%);
+ background-image: -o-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%), -o-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%);
+ background-image: -ms-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%), -ms-radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%);
+ background-image: radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%), radial-gradient(#ffffff 15%, rgba(0, 0, 0, 0) 16%);
+ background-size: 60px 60px;
+ background-position: 0 0, 30px 30px;
+}
+
.background-glossy {
background-image: none;
background-color: #cf714a;
View
4 tests/recipes/background/s.scss
@@ -79,6 +79,10 @@ div {
@include background-houndstooth;
}
+.background-polka-dot {
+ @include background-polka-dot;
+}
+
// Gradients
$gradient-color: #CF714A;
Please sign in to comment.
Something went wrong with that request. Please try again.