import Sencha Touch 2.4.2 source

[sencha-touch.git] / src / resources / themes / vendor / compass-recipes / stylesheets / recipes / background / _tartan.scss

diff --git a/src/resources/themes/vendor/compass-recipes/stylesheets/recipes/background/_tartan.scss b/src/resources/themes/vendor/compass-recipes/stylesheets/recipes/background/_tartan.scss
new file mode 100644 (file)
index 0000000..b8995c1
--- /dev/null
+++ b/src/resources/themes/vendor/compass-recipes/stylesheets/recipes/background/_tartan.scss
@@ -0,0 +1,81 @@
+/**
+ *
+ * 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/#tartan
+ *
+ * @author Marta Armada http://swwweet.com/ for the original pattern
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-tartan($background-color: hsl(2, 57%, 40%))
+{
+    $transparent: rgba(#fff, 0);
+    
+    background-color: $background-color;
+    @include background-image(
+        repeating-linear-gradient(
+            $transparent,
+            $transparent 50px,
+            rgba(#000,.4) 50px,
+            rgba(#000,.4) 53px,
+            $transparent 53px,
+            $transparent 63px,
+            rgba(#000,.4) 63px,
+            rgba(#000,.4) 66px,
+            $transparent 66px,
+            $transparent 116px,
+            rgba(#000,.5) 116px,
+            rgba(#000,.5) 166px,
+            rgba(#fff,.2) 166px,
+            rgba(#fff,.2) 169px,
+            rgba(#000,.5) 169px,
+            rgba(#000,.5) 179px,
+            rgba(#fff,.2) 179px,
+            rgba(#fff,.2) 182px,
+            rgba(#000,.5) 182px,
+            rgba(#000,.5) 232px,
+            $transparent 232px
+        ),
+        repeating-linear-gradient(
+            180deg,
+            // same as above, just with 180deg
+            $transparent,
+            $transparent 50px,
+            rgba(#000,.4) 50px,
+            rgba(#000,.4) 53px,
+            $transparent 53px,
+            $transparent 63px,
+            rgba(#000,.4) 63px,
+            rgba(#000,.4) 66px,
+            $transparent 66px,
+            $transparent 116px,
+            rgba(#000,.5) 116px,
+            rgba(#000,.5) 166px,
+            rgba(#fff,.2) 166px,
+            rgba(#fff,.2) 169px,
+            rgba(#000,.5) 169px,
+            rgba(#000,.5) 179px,
+            rgba(#fff,.2) 179px,
+            rgba(#fff,.2) 182px,
+            rgba(#000,.5) 182px,
+            rgba(#000,.5) 232px,
+            $transparent 232px
+        ),
+        repeating-linear-gradient(
+            -35deg,
+            $transparent,
+            $transparent 2px,
+            rgba(#000,.2) 2px,
+            rgba(#000,.2) 3px,
+            $transparent 3px,
+            $transparent 5px,
+            rgba(#000,.2) 5px
+        )
+    );
+}
\ No newline at end of file