compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/color/_name.scss

@@ -0,0 +1,151 @@
+//
+// Colors name definitions
+//
+
+$aliceblue:#f0f8ff;
+$antiquewhite:#faebd7;
+$aqua:#00ffff;
+$aquamarine:#7fffd4;
+$azure:#f0ffff;
+$beige:#f5f5dc;
+$bisque:#ffe4c4;
+$black:#000000;
+$blanchedalmond:#ffebcd;
+$blue:#0000ff;
+$blueviolet:#8a2be2;
+$brown:#a52a2a;
+$burlywood:#deb887;
+$cadetblue:#5f9ea0;
+$chartreuse:#7fff00;
+$chocolate:#d2691e;
+$coral:#ff7f50;
+$cornflowerblue:#6495ed;
+$cornsilk:#fff8dc;
+$crimson:#dc143c;
+$cyan:#00ffff;
+$darkblue:#00008b;
+$darkcyan:#008b8b;
+$darkgoldenrod:#b8860b;
+$darkgray:#a9a9a9;
+$darkgrey:#a9a9a9;
+$darkgreen:#006400;
+$darkkhaki:#bdb76b;
+$darkmagenta:#8b008b;
+$darkolivegreen:#556b2f;
+$darkorange:#ff8c00;
+$darkorchid:#9932cc;
+$darkred:#8b0000;
+$darksalmon:#e9967a;
+$darkseagreen:#8fbc8f;
+$darkslateblue:#483d8b;
+$darkslategray:#2f4f4f;
+$darkslategrey:#2f4f4f;
+$darkturquoise:#00ced1;
+$darkviolet:#9400d3;
+$deeppink:#ff1493;
+$deepskyblue:#00bfff;
+$dimgray:#696969;
+$dimgrey:#696969;
+$dodgerblue:#1e90ff;
+$firebrick:#b22222;
+$floralwhite:#fffaf0;
+$forestgreen:#228b22;
+$fuchsia:#ff00ff;
+$gainsboro:#dcdcdc;
+$ghostwhite:#f8f8ff;
+$gold:#ffd700;
+$goldenrod:#daa520;
+$gray:#808080;
+$grey:#808080;
+$green:#008000;
+$greenyellow:#adff2f;
+$honeydew:#f0fff0;
+$hotpink:#ff69b4;
+$indianred:#cd5c5c;
+$indigo:#4b0082;
+$ivory:#fffff0;
+$khaki:#f0e68c;
+$lavender:#e6e6fa;
+$lavenderblush:#fff0f5;
+$lawngreen:#7cfc00;
+$lemonchiffon:#fffacd;
+$lightblue:#add8e6;
+$lightcoral:#f08080;
+$lightcyan:#e0ffff;
+$lightgoldenrodyellow:#fafad2;
+$lightgreen:#90ee90;
+$lightgray:#d3d3d3;
+$lightgrey:#d3d3d3;
+$lightpink:#ffb6c1;
+$lightsalmon:#ffa07a;
+$lightseagreen:#20b2aa;
+$lightskyblue:#87cefa;
+$lightslategray:#778899;
+$lightslategrey:#778899;
+$lightsteelblue:#b0c4de;
+$lightyellow:#ffffe0;
+$lime:#00ff00;
+$limegreen:#32cd32;
+$linen:#faf0e6;
+$magenta:#ff00ff;
+$maroon:#800000;
+$mediumaquamarine:#66cdaa;
+$mediumblue:#0000cd;
+$mediumorchid:#ba55d3;
+$mediumpurple:#9370db;
+$mediumseagreen:#3cb371;
+$mediumslateblue:#7b68ee;
+$mediumspringgreen:#00fa9a;
+$mediumturquoise:#48d1cc;
+$mediumvioletred:#c71585;
+$midnightblue:#191970;
+$mintcream:#f5fffa;
+$mistyrose:#ffe4e1;
+$moccasin:#ffe4b5;
+$navajowhite:#ffdead;
+$navy:#000080;
+$oldlace:#fdf5e6;
+$olive:#808000;
+$olivedrab:#6b8e23;
+$orange:#ffa500;
+$orangered:#ff4500;
+$orchid:#da70d6;
+$palegoldenrod:#eee8aa;
+$palegreen:#98fb98;
+$paleturquoise:#afeeee;
+$palevioletred:#db7093;
+$papayawhip:#ffefd5;
+$peachpuff:#ffdab9;
+$peru:#cd853f;
+$pink:#ffc0cb;
+$plum:#dda0dd;
+$powderblue:#b0e0e6;
+$purple:#800080;
+$red:#ff0000;
+$rosybrown:#bc8f8f;
+$royalblue:#4169e1;
+$saddlebrown:#8b4513;
+$salmon:#fa8072;
+$sandybrown:#f4a460;
+$seagreen:#2e8b57;
+$seashell:#fff5ee;
+$sienna:#a0522d;
+$silver:#c0c0c0;
+$skyblue:#87ceeb;
+$slateblue:#6a5acd;
+$slategray:#708090;
+$slategrey:#708090;
+$snow:#fffafa;
+$springgreen:#00ff7f;
+$steelblue:#4682b4;
+$tan:#d2b48c;
+$teal:#008080;
+$thistle:#d8bfd8;
+$tomato:#ff6347;
+$turquoise:#40e0d0;
+$violet:#ee82ee;
+$wheat:#f5deb3;
+$white:#ffffff;
+$whitesmoke:#f5f5f5;
+$yellow:#ffff00;
+$yellowgreen:#9acd32;

data/stylesheets/recipes/effect/_bevel.scss

@@ -0,0 +1,37 @@
+$bevel-base-color: rgba(#333, .5) !default;
+$bevel-size: 5px !default;
+$bevel-contrast: 8% !default;
+$bevel-border-width: 1px !default;
+$bevel-blur: 0 !default;
+
+@mixin bevel
+{
+    @include bevel-border;
+    @include bevel-shadow;
+}
+
+@mixin bevel-border(
+    $base-color: $bevel-base-color,
+    $border-width: $bevel-border-width,
+    $contrast: $bevel-contrast
+)
+{
+    border: $border-width solid $base-color;
+    border-top-color: lighten($base-color, $contrast);
+    border-bottom-color: darken($base-color, $contrast);
+}
+
+// @todo: $direction
+
+@mixin bevel-shadow(
+    $size: $bevel-size,
+    $blur: $bevel-blur
+)
+{
+    @include box-shadow(
+        inset 0 0 (1px + $blur) rgba(#000, .8),
+        inset 0 2px $blur rgba(#fff, .5),
+        inset 0 (-$size) $blur rgba(#000, .6),
+        inset 0 (-$size - 1px - $blur) $blur rgba(#fff, .3)
+    );
+}

data/stylesheets/recipes/effect/_corner-folded.scss

@@ -0,0 +1,26 @@
+/**
+ * Corner folded with pure CSS
+ * 
+ * Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
+ * IE8 is not supported because it not render properly box-shadow and
+ * pseudo element should be selected with ::element and not :element
+ * 
+ * @thanks Nicolas Gallagher @necolas
+ * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
+ * @todo Nix in .4
+ */
+
+@import "recipes/effect/folded-corner";
+
+@mixin effect-corner-folded(
+    $position: top-right,
+    $color: #ddd,
+    $background-color: #fff,
+    $width: 1em,
+    $border-radius: .3em,
+    $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
+{
+    @warn 'Deprecated, please use folded-corner mixin instead.';
+
+    @include folded-corner($position, $color, $background-color, $width, $border-radius, $box-shadow);
+}

data/stylesheets/recipes/effect/_corners-tucked.scss

@@ -0,0 +1,48 @@
+/**
+ * CSS3 Tucked Corners effect
+ *
+ * @thanks Chris Coyier @chriscoyier
+ * @link http://css-tricks.com/snippets/css/tucked-corners/
+ * @author Mason Wendell http://thecodingdesigner.com
+ *
+ */
+
+// $tape-color: the background css property
+// $inner-element: the selector for the inner element (for bottom corners)
+@mixin corners-tucked($tape-color: white, $height: 50px, $width: 100px, $inner-element: "span.bottom-corners") {
+    position: relative;
+    @include box-sizing(border-box);
+    &:after, &:before, #{$inner-element}:after, #{$inner-element}:before {
+        position: absolute;
+        content: "";
+        z-index: 10;
+        background: $tape-color;
+        height: $height;
+        width: $width;
+        @include box-shadow(rgba(black, 0.5) 0 6px 9px -8px); }
+    &:after {
+        top: -($height * 0.5);
+        left: -($width * 0.5);
+        @include rotate(-45deg); }
+    &:before {
+        top: -($height * 0.5);
+        right: -($width * 0.5);
+        @include rotate(45deg); }
+    #{$inner-element} {
+        display: block;
+        position: relative;
+        width: 100%;
+        @include box-sizing(border-box);
+        &:after {
+            bottom: -($height * 0.5);
+            left: -($width * 0.5);
+            @include rotate(-135deg); }
+        &:before {
+            bottom: -($height * 0.5);
+            right: -($width * 0.5);
+            @include rotate(135deg); } } }
+
+
+@mixin corners-taped($tape-color: rgba(white, 0.5), $height: 50px, $width: 100px, $inner-element: "span.bottom-corners") {
+    @include corners-tucked($tape-color, $height, $width, $inner-element);
+}

data/stylesheets/recipes/effect/_cutout.scss

@@ -0,0 +1,20 @@
+$cutout-size: 5px !default;
+$cutout-blur: 5px !default;
+
+@mixin cutout(
+    $size: 5px,
+    $blur: 5px
+)
+{
+    @include box-shadow(cutout($size, $blur))
+}
+
+@function cutout(
+    $depth: 5px,
+    $blur: 5px
+) {
+    @return
+        0 1px 0 rgba(255,255,255,.2),
+        inset 0 $depth ($blur) rgba(0,0,0,.6),
+        inset 0 1px $blur rgba(0,0,0,.6)
+}

data/stylesheets/recipes/{enhancement/_corner-folded.scss → effect/_folded-corner.scss}

@@ -11,7 +11,13 @@
 
 @import "recipes/shared/pseudo-element";
 
-@mixin corner-folded($position: top-right, $color: #ddd, $background-color: #fff, $width: 1em, $border-radius: .3em, $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
+@mixin folded-corner (
+    $position: top-right,
+    $color: #ddd,
+    $background-color: #fff,
+    $width: 1em,
+    $border-radius: .3em,
+    $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
 {
     position: relative;
     overflow: hidden;

data/stylesheets/recipes/effect/_glass.scss

@@ -2,25 +2,38 @@
  * Glass effect
  * Use this on image for better effect render
  * 
- * Inspired from Simurai's Imdb redisign
+ * Inspired from Simurai's IMDB redisign
  *
  * @link http://lab.simurai.com/redesign/imdb
  * @thanks Simurai @simurai
  */
-@mixin effect-glass($color: #fff, $reflectDegree: -45deg, $border-radius: 4px)
+
+@import '../shared/pseudo-element';
+
+@mixin effect-glass(
+    $color: #fff,
+    $reflectDegree: -45deg,
+    $border-radius: 4px
+)
 {
     position: relative;
     @include border-radius($border-radius);
 
-    &:before
+    &:after
     {
-        content: "";
-        position:absolute;
-        z-index: 1; // really need that ?
-        top: 0; right: 0; bottom: 0; left: 0;
+        @include pseudo-element($width: auto);
+        overflow: hidden;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         border: transparent solid 1px;
         @include border-radius($border-radius);
-        @include box-shadow(inset $color 0 0 2px, inset rgba($color,.4) 0 5px 10px);
-        @include background(linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
+        @include box-shadow(
+            inset $color 0 0 2px,
+            inset rgba($color,.4) 0 5px 10px
+        );
+        @include background(
+            linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
     }
 }

data/stylesheets/recipes/effect/_ribbon-tied.scss

@@ -0,0 +1,133 @@
+// <div class="tied"><span class="ribbon-bump"><span class="ribbon-band">Hi There</span></span></div>
+// .tied { @include effect-ribbon-tied() }
+
+@mixin effect-ribbon-tied($ribbon-bump: '.ribbon-bump', $ribbon-band: '.ribbon-band')
+{
+    // http://jsfiddle.net/Calou/juQ9n/
+    div {
+        width: 500px;
+        height: 200px;
+        background-color: #ded8c5;
+        margin: 0 auto;
+        padding: 20px 0px;
+        -webkit-transition: .2s;
+    }
+
+    & {
+        position: relative;
+        width: 100%;
+        margin: 0;
+    }
+
+    &:before,
+    & #{$ribbon-bump}:before {
+        content: '';
+        position: absolute;
+        bottom: -23px;
+        border: 24px solid #c45045;
+    }
+
+    &:before {
+        left: -54px;
+        border-left-color: transparent;
+        -webkit-transform: rotate(-16deg);
+    }
+    .oldie &:before {
+        left: -48px;
+    }
+
+    & #{$ribbon-bump}:before {
+        right: -54px;
+        border-right-color: transparent;
+        -webkit-transform: rotate(16deg);
+        z-index: -1;
+    }
+    .oldie & #{$ribbon-bump}:before {
+        right: -48px;
+    }
+
+    & #{$ribbon-bump}:after,
+    & #{$ribbon-band}:after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        bottom: -16px;
+        z-index: 0;
+    }
+
+    & #{$ribbon-bump}:after {
+        right: -16px;
+        border-color: transparent transparent transparent #a33d33;
+        border-width: 0 0 16px 16px;
+    }
+
+    & #{$ribbon-band}:after {
+        left: 0;
+        border-color: transparent #a33d33 transparent transparent;
+        border-width: 0 16px 16px 0;
+    }
+
+    & #{$ribbon-band} {
+        display: block;
+        position: relative;
+        width: 100%;
+        left: -16px;
+        padding: 0 16px 16px;
+        background: #d0726a;
+
+        background-image: -webkit-linear-gradient(#d0726a, #c7574d);
+
+        -webkit-border-top-left-radius: 50% 16px;
+        -webkit-border-top-right-radius: 50% 16px;
+
+        text-align: center;
+        font: 28px/48px Museo, cursive;
+        font-weight: 700;
+        text-decoration: none;
+        text-transform: upperppercase;
+        color: #fff;
+        text-shadow: 0 1px 1px rgba(163, 61, 51, .8), 0 2px 1px rgba(163, 61, 51, .6);
+    }
+    .oldie & #{$ribbon-band} {
+        padding: 0 16px;
+        *left: 0px;
+        *padding: 0;
+
+    }
+
+    & #{$ribbon-band} {
+        left: 0;
+        margin: 0 -16px;
+        width: auto;
+    }
+
+    & #{$ribbon-band}::selection { background-color: #a33d33; }
+    & #{$ribbon-band}::-moz-selection { background-color: #a33d33; }
+
+    & #{$ribbon-band}:before,
+    &:after {
+        content: '';
+        position: absolute;
+        height: 16px;
+        left: 0;
+        bottom: 0;
+        -webkit-border-top-left-radius: 50% 16px;
+        -webkit-border-top-right-radius: 50% 16px;
+        box-shadow: #{$ribbon-bump}nset 0 2px 3px rgba(0, 0, 0, .3);
+    }
+    .oldie & #{$ribbon-band}:before,
+    .oldie &:after {
+        content: none;
+    }
+
+    & #{$ribbon-band}:before {
+        width: 100%;
+        background: #a33d33;
+    }
+
+    &:after {
+        width: 100%;
+        background: #ded8c5;
+        z-index: 1;
+    }
+}