compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/background/_noise.scss

@@ -0,0 +1,47 @@
+/**
+ * Background noise recipe
+ *
+ * This recipe use a sass function to generate a .png file
+ *
+ * Inspired by a jQuery plugin "Noisy" by Daniel Rapp @DanielRapp
+ * @link https://github.com/DanielRapp/Noisy
+ *
+ * Converted using Sass by Aaron Russell @aaronrussell & Philipp Bosch @philippbosch
+ * @link https://gist.github.com/1021332
+ *
+ * Ported to a sass gem by Antti Salonen @antsa
+ * @link https://github.com/antsa/sassy_noise
+ *
+ * Mixin:        background-noise
+ * Function:     background_noise
+ *
+ * @author Daniel Rapp @DanielRapp
+ * @author Aaron Russell @aaronrussell
+ * @author Philipp Bosch @philippbosch
+ * @author Antti Salonen @antsa
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+
+@import "compass/css3/images";
+
+// default values
+$background-noise-intensity:  0.5   !default;
+$background-noise-opacity:    0.12  !default;
+$background-noise-size:       200   !default;
+$background-noise-monochrome: true  !default;
+
+@mixin background-noise(
+    $intensity:   $background-noise-intensity,
+    $opacity:     $background-noise-opacity,
+    $size:        $background-noise-size,
+    $monochrome:  $background-noise-monochrome
+)
+{
+    background-image: background_noise(
+        $intensity: $intensity,
+        $opacity: $opacity,
+        $size: $size,
+        $monochrome: $monochrome
+    );
+    background-repeat: repeat;
+}

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

data/stylesheets/recipes/background/_radial-overlay.scss

@@ -0,0 +1,15 @@
+/**
+ * Background overlay inspired by Google Chrome modal overlay
+ * 
+ * @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
+ */
+
+@import "compass/css3/images";
+
+@mixin background-radial-overlay(
+    $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));
+}

data/stylesheets/recipes/background/_rainbow.scss

@@ -0,0 +1,27 @@
+//
+// Rainbow gradient function & background mixin
+//
+// @author Maxime Thirouin m@moox.fr
+//
+@import "recipes/color/name";
+
+@mixin background-rainbow($alpha: 1, $from: left)
+{
+    @include background-image(linear-gradient-rainbow($alpha, $from));
+}
+
+@function linear-gradient-rainbow($alpha: 1, $from: left)
+{
+    $alpha: 1 - $alpha;
+    $percentage: 100%/6; // 7 colors, so 6 gaps
+    @return linear-gradient(
+        $from,
+        transparentize($red, $alpha),
+        transparentize($orange, $alpha) $percentage,
+        transparentize($yellow, $alpha) $percentage * 2,
+        transparentize($green, $alpha)  $percentage * 3,
+        transparentize($blue, $alpha)   $percentage * 4,
+        transparentize($indigo, $alpha) $percentage * 5,
+        transparentize($violet, $alpha)
+    );
+}

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

data/stylesheets/recipes/background/_tablecloth.scss

@@ -0,0 +1,30 @@
+/**
+ *
+ * Tablecloth background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#tablecloth
+ *
+ * @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-tablecloth($bg-color: white, $stripe-color: rgba(200,0,0,.5), $size: 50px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            0,
+            $stripe-color 50%,
+            $transparent 50%
+        ),
+        linear-gradient(
+            $stripe-color 50%,
+            $transparent 50%
+        )
+    );
+    background-size: $size $size;
+}
+
+

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

data/stylesheets/recipes/base/_normalize.scss

@@ -0,0 +1,455 @@
+/**
+ * Normalize.css
+ * Opposite approche from CSS reset
+ * 
+ * Based on normalize.css commit 9576d48fc234c5224b1fc4dccba2f5965243843d
+ *
+ * @link http://github.com/necolas/normalize.css
+ */
+
+/*! normalize.css 2011-07-12T10:51 UTC · http://github.com/necolas/normalize.css */
+
+/* =============================================================================
+   HTML5 element display
+   ========================================================================== */
+@mixin base-normalize-html5
+{
+    /*
+     * Corrects block display not defined in IE6/7/8/9 & FF3
+     */
+
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    nav,
+    section {
+        display: block;
+    }
+
+    /*
+     * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+     * Known limitation: IE6 will not apply style for 'audio[controls]'
+     */
+
+    audio[controls],
+    canvas,
+    video {
+        display: inline-block;
+        *display: inline;
+        *zoom: 1;
+    }
+}
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+@mixin base-normalize-page
+{
+    /*
+     * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+     *    http://clagnut.com/blog/348/#c790
+     * 2. Keeps page centred in all browsers regardless of content height
+     * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
+     *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+     * 4. Prevents iOS text size adjust after orientation change, without disabling user zoom
+     *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+     */
+
+    html {
+        font-size: 100%; /* 1 */
+        overflow-y: scroll; /* 2 */
+        -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
+        -webkit-text-size-adjust: 100%; /* 4 */
+        -ms-text-size-adjust: 100%; /* 4 */
+    }
+
+    /*
+     * Addresses margins handled incorrectly in IE6/7
+     */
+
+    body {
+        margin: 0;
+    }
+
+    /*
+     * Addresses font-family inconsistency between 'textarea' and other form elements.
+     */
+
+    body,
+    button,
+    input,
+    select,
+    textarea {
+        font-family: sans-serif;
+    }
+}
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+@mixin base-normalize-links
+{
+    a {
+        color: #00e;
+    }
+
+    a:visited {
+        color: #551a8b;
+    }
+
+    /*
+     * Addresses outline displayed oddly in Chrome
+     */
+
+    a:focus {
+        outline: thin dotted;
+    }
+
+    /*
+     * Improves readability when focused and also mouse hovered in all browsers
+     * people.opera.com/patrickl/experiments/keyboard/test
+     */
+
+    a:hover,
+    a:active {
+        outline: 0;
+    }
+}
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+@mixin base-normalize-typography
+{
+    /*
+     * Addresses styling not present in IE7/8/9, S5, Chrome
+     */
+
+    abbr[title] {
+        border-bottom: 1px dotted;
+    }
+
+    /*
+     * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
+    */
+
+    b,
+    strong {
+        font-weight: bold;
+    }
+
+    blockquote {
+        margin: 1em 40px;
+    }
+
+    /*
+     * Addresses styling not present in S5, Chrome
+     */
+
+    dfn {
+        font-style: italic;
+    }
+
+    /*
+     * Addresses styling not present in IE6/7/8/9
+     */
+
+    mark {
+        background: #ff0;
+        color: #000;
+    }
+
+    /*
+     * Corrects font family set oddly in IE6, S5, Chrome
+     * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+     */
+
+    pre,
+    code,
+    kbd,
+    samp {
+        font-family: monospace, monospace;
+        _font-family: 'courier new', monospace;
+        font-size: 1em;
+    }
+
+    /*
+     * Improves readability of pre-formatted text in all browsers
+     */
+
+    pre {
+        white-space: pre;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+
+    /*
+     * 1. Addresses CSS quotes not supported in IE6/7
+     * 2. Addresses quote property not supported in S4
+     */
+
+    /* 1 */
+
+    q {
+        quotes: none;
+    }
+
+    /* 2 */
+
+    q:before,
+    q:after {
+        content: '';
+        content: none;
+    }
+
+    small {
+        font-size: 75%;
+    }
+
+    /*
+     * Prevents sub and sup affecting line-height in all browsers
+     * gist.github.com/413930
+     */
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+}
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+@mixin base-normalize-lists
+{
+    ul,
+    ol {
+        margin: 1em 0;
+        padding: 0 0 0 40px;
+    }
+
+    dd {
+        margin: 0 0 0 40px;
+    }
+
+    nav ul,
+    nav ol {
+        list-style: none;
+    }
+}
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+@mixin base-normalize-embed
+{
+    /*
+     * 1. Removes border when inside 'a' element in IE6/7/8/9
+     * 2. Improves image quality when scaled in IE7
+     *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+     */
+
+    img {
+        border: 0; /* 1 */
+        -ms-interpolation-mode: bicubic; /* 2 */
+    }
+
+    /*
+     * Corrects overflow displayed oddly in IE9
+     */
+
+    svg:not(:root) {
+        overflow: hidden;
+    }
+}
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+@mixin base-normalize-figures
+{
+    /*
+     * Addresses margin not present in IE6/7/8/9, S5, O11
+     */
+
+    figure {
+        margin: 0;
+    }
+}
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+@mixin base-normalize-forms
+{
+    /*
+     * Corrects margin displayed oddly in IE6/7
+     */
+
+    form {
+        margin: 0;
+    }
+
+    /*
+     * Define consistent margin and padding
+     */
+
+    fieldset {
+        margin: 0 2px;
+        padding: 0.35em 0.625em 0.75em;
+    }
+
+    /*
+     * 1. Corrects color not being inherited in IE6/7/8/9
+     * 2. Corrects alignment displayed oddly in IE6/7
+     */
+
+    legend {
+        border: 0; /* 1 */
+        *margin-left: -7px; /* 2 */
+    }
+
+    /*
+     * 1. Corrects font size not being inherited in all browsers
+     * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
+     * 3. Improves appearance and consistency in all browsers
+     */
+
+    button,
+    input,
+    select,
+    textarea {
+        font-size: 100%; /* 1 */
+        margin: 0; /* 2 */
+        vertical-align: baseline; /* 3 */
+        *vertical-align: middle; /* 3 */
+    }
+
+    /*
+     * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
+     * 2. Corrects inner spacing displayed oddly in IE6/7
+     */
+
+    button,
+    input {
+        line-height: normal; /* 1 */
+        *overflow: visible;  /* 2 */
+    }
+
+    /*
+     * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
+     * Known issue: reintroduces inner spacing
+     */
+
+    table button,
+    table input {
+        *overflow: auto;
+    }
+
+    /*
+     * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+     * 2. Corrects inability to style clickable 'input' types in iOS
+     */
+
+    button,
+    html input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        cursor: pointer; /* 1 */
+        -webkit-appearance: button; /* 2 */
+    }
+
+    /*
+     * Addresses box sizing set to content-box in IE8/9
+     */
+
+    input[type="checkbox"],
+    input[type="radio"] {
+        box-sizing: border-box;
+    }
+
+    /*
+     * 1. Addresses appearance set to searchfield in S5, Chrome
+     * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
+     */
+
+    input[type="search"] {
+        -webkit-appearance: textfield; /* 1 */
+        -moz-box-sizing: content-box;
+        -webkit-box-sizing: content-box; /* 2 */
+        box-sizing: content-box;
+    }
+
+    /*
+     * Corrects inner padding displayed oddly in S5, Chrome on OSX
+     */
+
+    input[type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /*
+     * Corrects inner padding and border displayed oddly in FF3/4
+     * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+     */
+
+    button::-moz-focus-inner,
+    input::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    /*
+     * 1. Removes default vertical scrollbar in IE6/7/8/9
+     * 2. Improves readability and alignment in all browsers
+     */
+
+    textarea {
+        overflow: auto; /* 1 */
+        vertical-align: top; /* 2 */
+    }
+}
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+@mixin base-normalize-table
+{
+    /*
+     * Remove most spacing between table cells
+     */
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+}
+
+@mixin base-normalize
+{
+    @include base-normalize-html5;
+    @include base-normalize-page;
+    @include base-normalize-links;
+    @include base-normalize-typography;
+    @include base-normalize-lists;
+    @include base-normalize-embed;
+    @include base-normalize-figures;
+    @include base-normalize-forms;
+    @include base-normalize-table;
+}