compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/_effect.scss

@@ -1 +1,6 @@
-@import "recipes/effect/glass";
+@import "effect/glass";
+@import "effect/cutout";
+@import "effect/bevel";
+@import "effect/tape";
+@import "effect/corner-folded";
+@import "effect/folded-corner";

data/stylesheets/recipes/_font.scss

@@ -0,0 +1,32 @@
+//
+// Font face mixin to import a pack generated from fontsquirrel.com
+// include .eot (ie), .svg (iphone), .ttf & .woff
+//
+// @link http://www.fontsquirrel.com/fontface/generator
+// @link http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+//
+// @author Maxime Thirouin m@moox.fr
+//
+
+@import "compass/css3/font-face";
+
+@mixin font-face-kit($font-name, $font-id, $font-file-suffix: auto, $font-dir: auto)
+{
+    @if ($font-file-suffix == auto)
+    {
+        $font-file-suffix: $font-name + '-webfont';
+    }
+    @if ($font-dir == auto)
+    {
+        $font-dir: $font-name;
+    }
+    @include font-face(
+        "#{$font-name}",
+        font-files(
+            "#{$font-dir}/#{$font-file-suffix}.eot?#iefix",
+            "#{$font-dir}/#{$font-file-suffix}.woff",
+            "#{$font-dir}/#{$font-file-suffix}.ttf",
+            "#{$font-dir}/#{$font-file-suffix}.svg##{$font-id}"
+        )
+    );
+}

data/stylesheets/recipes/_google-webfont.scss

@@ -0,0 +1,15 @@
+$google-font-name: false !default;
+$google-font-weights: false !default;
+
+@if $google-font-name and $google-font-weights {
+    @include google-webfont($google-font-name, $google-font-weights);
+}
+
+@mixin google-webfont(
+    $font-name,
+    $font-weights: 500
+) {
+    // @debug join($font-name,'', '|');
+
+    @import url("//fonts.googleapis.com/css?family=#{$font-name}:#{$font-weights}");
+}

data/stylesheets/recipes/_icon-font.scss

@@ -0,0 +1,224 @@
+
+@import 'compass';
+@import "compass/typography/text/replacement";
+
+@import 'shared';
+@import 'font';
+
+@import 'background/gradients';
+
+// @todo add http://fortaweso.me/font-awesome
+
+/**
+ * @class font Icon
+ * Great to use with the some pictos fonts
+ */
+
+$icon-font-class-suffix: "icon-font" !default;
+$icon-font-base-class:   ".#{$icon-font-class-suffix}-base" !default;
+
+/**
+ * @cfg {color} $icon-font-base-color
+ * The default color of icons when using the {@link #icon-font} mixin.
+ *
+ * Defaults to `white`.
+ */
+$icon-font-base-color: #999 !default;
+
+/**
+ * @cfg {color} $icon-font-default-stroke
+ * The default color to use on the border of icons, when using the {@link #icon-font} mixin.
+ *
+ * Defaults to `null`.
+ */
+$icon-font-default-stroke: darken($icon-font-base-color, 10) !default;
+
+$icon-font-highlight-color: #3778E5 !default;
+
+/**
+ * @cfg {string} $icon-font-default-gradient
+ * The default gradient to use when using the {@link #icon-font} mixin.
+ *
+ * Defaults to `matte`.
+ */
+$icon-font-default-gradient: matte !default;
+
+// Base style for pseudo-selectors
+// @todo Doc me yo
+
+#{$icon-font-base-class}
+{
+    @silent;
+    color: transparent;
+    @include background-clip(text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-indent: 0;
+    @include text-shadow(none);
+    @include user-select(none);
+}
+
+// http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+
+@mixin icon-font-face($font-name, $font-id, $font-file-suffix: auto, $font-dir: auto)
+{
+    @include font-face-kit($font-name, $font-id, $font-file-suffix, $font-dir);
+
+    .#{$icon-font-class-suffix}-#{$font-name}
+    {
+        font-family: #{$font-name};
+        @extend #{$icon-font-base-class};
+    }
+}
+
+@mixin icon-font-face-entypo()                  { @include icon-font-face(entypo, EntypoRegular, entypo-webfont, icons/entypo); }
+@mixin icon-font-face-heydings()                { @include icon-font-face(heydings, HeydingsCommonIconsRegular, heydings_icons-webfont, icons/heydings); }
+@mixin icon-font-face-heydings_controls()       { @include icon-font-face(heydings_controls, HeydingsControlsRegular, heydings_controls-webfont, icons/heydings-controls); }
+@mixin icon-font-face-iconic_fill()             { @include icon-font-face(iconic_fill, IconicFill, iconic_fill, icons/iconic); }
+@mixin icon-font-face-iconic_stroke()           { @include icon-font-face(iconic_stroke, IconicStroke, iconic_stroke, icons/iconic); }
+@mixin icon-font-face-icomoon()                 { @include icon-font-face(icomoon, IcoMoonRegular, icomoon, icons/icomoon); }
+@mixin icon-font-face-modern-pictograms()       { @include icon-font-face(modern-pictograms, ModernPictogramsNormal, modernpics-webfont, icons/modern-pictograms);}
+@mixin icon-font-face-socialico()               { @include icon-font-face(socialico, SocialicoRegular, socialico-webfont, icons/socialico); }
+@mixin icon-font-face-websymbols()              { @include icon-font-face(websymbols, WebSymbolsRegular, websymbols-regular-webfont, icons/websymbols); }
+
+/**
+ * Includes a character into the specified selector, styled as an icon.
+ *
+ *     @include icon-font('a');
+ *
+ * @param {color} $color
+ * The color of the icon. Defaults to {@link #$icon-font-default-background $icon-font-default-background}.
+ *
+ * @param {measurement} $size
+ * The size of the icon
+ *
+ * @param {color} $stroke
+ * The color of the border. Defautls to {@link #$icon-font-default-border $icon-font-default-border}.
+ *
+ * @param {boolean} $include-staes
+ * True to include states for hover and active. Defaults to `true`.
+ */
+@mixin icon-font(
+    $character: attr(data-icon),
+    $size: 48px,
+    $class: 'base',
+
+    $color: $icon-font-base-color,
+    $color-hover: $icon-font-highlight-color,
+    $color-active: darken($color-hover, 7%),
+
+    $glow: null,
+    $glow-hover: $icon-font-highlight-color 0 0 10px,
+    $glow-active: $glow-hover,
+
+    $shadow: rgba(#000, .5) 0 1px 3px, // Shadow doesn't change, but hover does
+
+    $stroke: false,
+    $stroke-hover: 1px darken($color-hover, 5),
+    $stroke-active: 1px darken($color-active, 5),
+
+    $gradient: $icon-font-default-gradient,
+    $gradient-hover: $gradient,
+    $gradient-active: recessed,
+
+    $include-states: true,
+    $hidetext: true
+) {
+    position: relative;
+    @include background-clip(text);
+    overflow: visible;
+    display: inline-block;
+
+    // icon are square
+    width: $size;
+    line-height: $size;
+    height: $size;
+
+    @if ($hidetext == true)
+    {
+        text-indent: -9999px;
+        //@include hide-text();
+    }
+
+    @if $stroke
+    {
+        -webkit-text-stroke: if($stroke == true, darken($color, 10), $stroke);
+        text-stroke: if($stroke == true, darken($color, 10), $stroke);
+    }
+
+    &:after,
+    &:before
+    {
+        @extend .#{$icon-font-class-suffix}-#{$class};
+        font-size: $size;
+        content: $character;
+
+        @include background-gradient($color, $gradient);
+    }
+
+    &:before
+    {
+        // @include background-clip(padding-box);
+        background: none;
+        @include text-shadow($shadow);
+    }
+
+    @if $include-states {
+        &:hover {
+            @if $stroke-hover and $stroke {
+                -webkit-text-stroke: $stroke-hover;
+                text-stroke: $stroke-hover;
+            }
+
+            &:before {
+                @include text-shadow($shadow, $glow-hover);
+            }
+            &:after {
+                @include background-gradient($color-hover, $gradient-hover);
+            }
+        }
+        &:active {
+            @if $stroke-active and $stroke {
+                -webkit-text-stroke: $stroke-active;
+                text-stroke: $stroke-active;
+            }
+            &:before {
+                @include text-shadow($shadow, $glow-active);
+            }
+            &:after {
+                @include background-gradient($color-active, $gradient-active);
+            }
+        }
+    }
+}
+
+$icon-font-attr-name: data-icon !default;
+$icon-font-attr-default-pseudo: before !default;
+
+@mixin icon-font-attr-rules()
+{
+    [data-icon]
+    {
+        &:#{$icon-font-from-attr-default-pseudo}
+        {
+            content: attr($icon-font-attr-name);
+        }
+    }
+
+    [data-icon-before]
+    {
+        &:before
+        {
+            content: attr($icon-font-attr-name);
+        }
+    }
+
+    [data-icon-after]
+    {
+        &:after
+        {
+            content: attr($icon-font-attr-name);
+        }
+    }
+}

data/stylesheets/recipes/_icons.scss

@@ -6,8 +6,13 @@
     vertical-align: middle;
 }
 
-@mixin icon-inline($side: left, $width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
-{
+@mixin icon-inline(
+    $side: left,
+    $width: 24px,
+    $height: auto,
+    $background-position: 2px 50%,
+    $display: inline-block
+) {
     @if $height == auto
     {
         $height: $width;
@@ -18,12 +23,12 @@
     line-height: $height;
 }
 
-    @mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
-    {
-        @include icon-inline(left, $width, $height, $background-position, $display);
-    }
+@mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
+{
+    @include icon-inline(left, $width, $height, $background-position, $display);
+}
 
-    @mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
-    {
-        @include icon-inline(right, $width, $height, $background-position, $display);
-    }
+@mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
+{
+    @include icon-inline(right, $width, $height, $background-position, $display);
+}

data/stylesheets/recipes/_media-queries.scss

@@ -0,0 +1,72 @@
+//
+// Predefined Media Queries Mixins
+//
+// @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
+//
+// @author Maxime Thirouin <maxime.thirouin@gmail.com>
+//
+
+// sizes
+$media-query-width-xxl: 1824px  !default; // eg. oversized luxury screen
+$media-query-width-xl:  1382px  !default; // eg. high-res. PC browser
+$media-query-width-l:   992px   !default; // 1024 eg. common resolution PC
+$media-query-width-m:   768px   !default; // eg. portrait iPad
+$media-query-width-s:   600px   !default; // eg. Kindle
+$media-query-width-xs:  480px   !default; // eg. landscape iPhone
+$media-query-width-xxs: 320px   !default; // eg. portrait iPhone
+
+// size: exclusive queries
+@mixin media-xxl        { @media (min-width: $media-query-width-xxl)                                                        { @content } }
+// this syntax do not work for now
+//@mixin media-xl         { @media (min-width: $media-query-width-xl)     and (max-width: $media-query-width-xxl    - 1px)    { @content } }
+//@mixin media-l          { @media (min-width: $media-query-width-l)      and (max-width: $media-query-width-xl     - 1px)    { @content } }
+//@mixin media-m          { @media (min-width: $media-query-width-m)      and (max-width: $media-query-width-l      - 1px)    { @content } }
+//@mixin media-s          { @media (min-width: $media-query-width-s)      and (max-width: $media-query-width-m      - 1px)    { @content } }
+//@mixin media-xs         { @media (min-width: $media-query-width-xs)     and (max-width: $media-query-width-s      - 1px)    { @content } }
+//@mixin media-xxs        { @media (min-width: $media-query-width-xxs)    and (max-width: $media-query-width-xs     - 1px)    { @content } }
+@mixin media-xl         { $max: $media-query-width-xxl  - 1px; @media (min-width: $media-query-width-xl)     and (max-width: $max)  { @content } }
+@mixin media-l          { $max: $media-query-width-xl   - 1px; @media (min-width: $media-query-width-l)      and (max-width: $max)  { @content } }
+@mixin media-m          { $max: $media-query-width-l    - 1px; @media (min-width: $media-query-width-m)      and (max-width: $max)  { @content } }
+@mixin media-s          { $max: $media-query-width-m    - 1px; @media (min-width: $media-query-width-s)      and (max-width: $max)  { @content } }
+@mixin media-xs         { $max: $media-query-width-s    - 1px; @media (min-width: $media-query-width-xs)     and (max-width: $max)  { @content } }
+@mixin media-xxs        { @media (max-width: $media-query-width-xs)                                                          { @content } }
+
+// size: min/max queries
+@mixin media-xxl-max    { @media (max-width: $media-query-width-xxl)    { @content } }
+@mixin media-xl-max     { @media (max-width: $media-query-width-xl)     { @content } }
+@mixin media-l-max      { @media (max-width: $media-query-width-l)      { @content } }
+@mixin media-m-max      { @media (max-width: $media-query-width-m)      { @content } }
+@mixin media-s-max      { @media (max-width: $media-query-width-s)      { @content } }
+@mixin media-xs-max     { @media (max-width: $media-query-width-xs)     { @content } }
+@mixin media-xxs-max    { @media (max-width: $media-query-width-xxs)    { @content } }
+
+@mixin media-xxl-min    { @media (min-width: $media-query-width-xxl)    { @content } }
+@mixin media-xl-min     { @media (min-width: $media-query-width-xl)     { @content } }
+@mixin media-l-min      { @media (min-width: $media-query-width-l)      { @content } }
+@mixin media-m-min      { @media (min-width: $media-query-width-m)      { @content } }
+@mixin media-s-min      { @media (min-width: $media-query-width-s)      { @content } }
+@mixin media-xs-min     { @media (min-width: $media-query-width-xs)     { @content } }
+@mixin media-xxs-min    { @media (min-width: $media-query-width-xxs)    { @content } }
+
+// @todo add/review more verbose mixins ?
+
+// orientation (horizontal & vertical)
+@mixin media-portrait   { @media (orientation:portrait)     { @content } }
+@mixin media-landscape  { @media (orientation:landscape)    { @content } }
+// shortcuts
+@mixin media-h          { @include media-portrait           { @content } }
+@mixin media-v          { @include media-landscape          { @content } }
+
+// high resolution screen
+@mixin media-highres($coefficient: 2)
+{
+    $oCoef: $coefficient*2;
+    @media
+        (-webkit-min-device-pixel-ratio: $coefficient),
+        (-moz-min-device-pixel-ratio: $coefficient),
+        (-o-min-device-pixel-ratio: $oCoef/2),
+        (min-device-pixel-ratio: $coefficient)
+    {
+        @content;
+    }
+}

data/stylesheets/recipes/_shared.scss

@@ -1,4 +1,5 @@
-@import "recipes/shared/block-inline-block";
-@import "recipes/shared/clearfix";
-@import "recipes/shared/list-inline-block";
-@import "recipes/shared/pseudo-element";
+@import "shared/block-inline-block";
+@import "shared/clearfix";
+@import "shared/list-inline-block";
+@import "shared/pseudo-element";
+@import "shared/user-select";

data/stylesheets/recipes/_ui.scss

@@ -1,5 +1,8 @@
-@import "recipes/ui/border/bevel";
 @import "recipes/ui/convex";
 @import "recipes/ui/glossy";
 @import "recipes/ui/gradient";
-@import "recipes/ui/menu-dropdown";
+@import "recipes/ui/helper";
+@import "recipes/ui/keyboard";
+@import "recipes/ui/menu";
+@import "recipes/ui/overlay";
+@import "recipes/ui/separator";

data/stylesheets/recipes/animation/_animation.scss

@@ -0,0 +1,145 @@
+// taken from bourbon
+
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+  $animation-2: false, $animation-3: false,
+  $animation-4: false, $animation-5: false,
+  $animation-6: false, $animation-7: false,
+  $animation-8: false, $animation-9: false)
+  {
+    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+  -webkit-animation: $full;
+     -moz-animation: $full;
+          animation: $full;
+}
+
+// Individual Animation Properties
+@mixin animation-name ($name-1,
+  $name-2: false, $name-3: false,
+  $name-4: false, $name-5: false,
+  $name-6: false, $name-7: false,
+  $name-8: false, $name-9: false)
+  {
+    $full:  compact($name-1, $name-2, $name-3, $name-4,
+                    $name-5, $name-6, $name-7, $name-8, $name-9);
+
+  -webkit-animation-name: $full;
+     -moz-animation-name: $full;
+          animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-duration: $full;
+     -moz-animation-duration: $full;
+          animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+//  ease | linear | ease-in | ease-out | ease-in-out
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
+                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+  -webkit-animation-timing-function: $full;
+     -moz-animation-timing-function: $full;
+          animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+//  infinite | <number>
+  $value-2: false, $value-3: false,
+  $value-4: false, $value-5: false,
+  $value-6: false, $value-7: false,
+  $value-8: false, $value-9: false)
+  {
+    $full:  compact($value-1, $value-2, $value-3, $value-4,
+                    $value-5, $value-6, $value-7, $value-8, $value-9);
+
+  -webkit-animation-iteration-count: $full;
+     -moz-animation-iteration-count: $full;
+          animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+//  normal | alternate
+  $direction-2: false, $direction-3: false,
+  $direction-4: false, $direction-5: false,
+  $direction-6: false, $direction-7: false,
+  $direction-8: false, $direction-9: false)
+  {
+    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
+                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+  -webkit-animation-direction: $full;
+     -moz-animation-direction: $full;
+          animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+//  running | paused
+  $state-2: false, $state-3: false,
+  $state-4: false, $state-5: false,
+  $state-6: false, $state-7: false,
+  $state-8: false, $state-9: false)
+  {
+    $full:  compact($state-1, $state-2, $state-3, $state-4,
+                    $state-5, $state-6, $state-7, $state-8, $state-9);
+
+  -webkit-animation-play-state: $full;
+     -moz-animation-play-state: $full;
+          animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-delay: $full;
+     -moz-animation-delay: $full;
+          animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+//  http://goo.gl/l6ckm
+//  none | forwards | backwards | both
+  $mode-2: false, $mode-3: false,
+  $mode-4: false, $mode-5: false,
+  $mode-6: false, $mode-7: false,
+  $mode-8: false, $mode-9: false)
+  {
+    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
+                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+  -webkit-animation-fill-mode: $full;
+     -moz-animation-fill-mode: $full;
+          animation-fill-mode: $full;
+}