compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/animation/_fade.scss

@@ -0,0 +1,29 @@
+@include keyframes(fade-in)
+{
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@mixin fade-in
+{
+    // @todo ?
+}
+
+@include keyframes(fade-out)
+{
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@mixin fade-out
+{
+    // @todo ?
+}

data/stylesheets/recipes/animation/_keyframes.scss

@@ -0,0 +1,17 @@
+// Keyframes for Animations
+
+@mixin keyframes($name)
+{
+    @-webkit-keyframes $name
+    {
+        @content;
+    }
+    @-moz-keyframes $name
+    {
+        @content;
+    }
+    @keyframes $name
+    {
+        @content;
+    }
+}

data/stylesheets/recipes/animation/_timing-function.scss

@@ -0,0 +1,29 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785, 0.135, 0.150, 0.860);

data/stylesheets/recipes/background/_blueprint-grid.scss

@@ -0,0 +1,52 @@
+/**
+ * Blueprint grid background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#blueprint-grid
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-blueprint-grid(
+    $background-color: #2574b0,
+    $foreground-color: rgba(#fff, .2),
+    $foreground-color-alt: rgba(#fff, .1),
+    $width: 100px,
+    $width-alt: 20px,
+    $border-width: 1px,
+    $border-width-alt: 1px)
+{
+    background-color: $background-color;
+
+    $transparent: transparentize($foreground-color, 1);
+
+    // cannot use 0 (sass_extensions error) for horizontal linear-gradient, so we use keyword 'left'
+    @include background-image(
+        // big square
+        linear-gradient($foreground-color $border-width, $transparent $border-width),
+        linear-gradient(left, $foreground-color $border-width, $transparent $border-width),
+
+        // tiny square
+        linear-gradient($foreground-color-alt $border-width-alt, $transparent $border-width-alt),
+        linear-gradient(left, $foreground-color-alt $border-width-alt, $transparent $border-width-alt)
+    );
+
+    background-size:
+        // big square
+        $width $width,
+        $width $width,
+        // tiny square
+        $width-alt $width-alt,
+        $width-alt $width-alt
+    ;
+
+    // to replace the grid correctly
+    background-position:
+        -#{$border-width} -#{$border-width},
+        -#{$border-width} -#{$border-width},
+        -#{$border-width-alt} -#{$border-width-alt},
+        -#{$border-width-alt} -#{$border-width-alt}
+    ;
+}

data/stylesheets/recipes/background/_carbon-fiber.scss

@@ -0,0 +1,33 @@
+/**
+ * Carbon Fiber background pattern
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author David Kaneda http://www.davidkaneda.com/ for the Sass mixin
+ *
+ * @link http://lea.verou.me/css3patterns/
+ *
+ */
+
+@import "compass/css3/images";
+
+$background-carbon-fiber-base-color: #222 !default;
+
+@mixin background-carbon-fiber(
+    $background-color: $background-carbon-fiber-base-color,
+    $dot-color: scale-lightness($background-color, -50),
+    $highlight-color: rgba(#fff, .1),
+    $spacing-size: 16px,
+    $dot-size: 2px
+) {
+    @include background-image(
+        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
+        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
+        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px),
+        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px)
+    );
+
+    background-repeat: repeat;
+    background-position: 0 0, $spacing-size/2 $spacing-size/2, 0 1px, $spacing-size/2 $spacing-size/2 + 1px;
+    background-color: $background-color;
+    background-size: $spacing-size $spacing-size;
+}

data/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;
+}

data/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;
+}

data/stylesheets/recipes/background/_gradients.scss

@@ -0,0 +1,81 @@
+/**
+ *
+ * @class Gradients
+ * @author David Kaneda http://www.davidkaneda.com/
+ *
+ */
+
+/**
+ * Adds a background gradient into a specified selector.
+ * 
+ *     @include background-gradient(#444, 'glossy');
+ * 
+ * You can also use color-stops if you want full control of the gradient:
+ * 
+ *     @include background-gradient(#444, color-stops(#333, #222, #111));
+ * 
+ * @param {color} $bg-color
+ * The base color of the gradient.
+ * 
+ * @param {string/list} $type
+ * The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or linear:
+ *
+ *     @include background-gradient(red, 'glossy');
+ *
+ * It can also accept a list of color-stop values:;
+ * 
+ *     @include background-gradient(black, color-stops(#333, #111, #000));
+ * 
+ * @param {string} $direction
+ * The direction of the gradient.
+ */
+
+@import "compass/css3/images";
+
+@mixin background-gradient($bg-color, $type: null, $direction: top) {
+    background-image: none;
+    background-color: $bg-color;
+
+    @if $type != null and $bg-color != transparent {
+        // Color stops provided
+        @if type-of($type) == "list" {
+            @include background-image(linear-gradient($direction, $type));
+        }
+
+        // Default gradients
+        @else if $type == bevel {
+            @include background-image(bevel-gradient($bg-color, $direction));
+        } @else if $type == glossy {
+            @include background-image(glossy-gradient($bg-color, $direction));
+        } @else if $type == recessed {
+            @include background-image(recessed-gradient($bg-color, $direction));
+        } @else if $type == linear {
+            @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));
+        } @else if $type == matte {
+            @include background-image(matte-gradient($bg-color, $direction));
+        }
+    }
+}
+
+// These are functions so they can be combined together with background-image()// ie. @include background-image(background_noise(), glossy-gradient());
+
+@function bevel-gradient($bg-color: $base-color, $direction: top) {
+    @return linear-gradient($direction, color_stops(
+        lighten($bg-color, 15%), 
+        lighten($bg-color, 8%) 30%, 
+        $bg-color 65%, 
+        darken($bg-color, 6%)
+    ));
+}
+
+@function glossy-gradient($bg-color: $base-color, $direction: top) {
+    @return linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%)));
+}
+
+@function recessed-gradient($bg-color: $base-color, $direction: top) {
+    @return linear-gradient($direction, color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%)));
+}
+
+@function matte-gradient($bg-color: $base-color, $direction: top) {
+    @return linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 3%, darken($bg-color, 5%)));
+}

data/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)
+}

data/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;
+}

data/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
+        )
+    );
+}