compass-recipes 0.3.0.alpha.2 → 0.3.0

data/README.md

@@ -4,23 +4,24 @@ A series of Compass and Sass mixins and functions for creating delicious CSS eff
 
 _Compass Recipes is currently under active development. While it's being already used on multiple projects (even in production), you may encounter some issues. Please try it out in a project, and [make suggestions](https://github.com/MoOx/compass-recipes/issues/new) or [report bugs](https://github.com/MoOx/compass-recipes/issues) ! Your feedback matters._
 
-## [Demos](http://moox.github.com/compass-recipes/)
-
-_Note: These are demos of the repository at its current state, *not* the last stable gem. To get the most up-to-date recipes, please see Installation for instructions on installing the repo at his current state_
-
-## Types of Recipes
-
-* **[Backgrounds](http://moox.github.com/compass-recipes/recipes/background/)** - Background patterns, gradients.
-* **Color** Variables Names & Advanced color functions like `brightness()`
-* **[Effects](http://moox.github.com/compass-recipes/recipes/effect/)** - Visual effects like `bevel` and `cutout`
-* **[Form skins](http://moox.github.com/compass-recipes/recipes/form/skin/)** - Only one at the moment.
-* **[Icon Fonts](http://moox.github.com/compass-recipes/recipes/icon-fonts)** - Includes icon fonts helper and a few open source fonts.
-* **[Layout](http://moox.github.com/compass-recipes/recipes/layout)** - Vertical centering and box layout shortcuts.
-* **[Media queries](http://moox.github.com/compass-recipes/recipes/media-queries)** - Predefined queries for common device widths. *Experimental: Uses `sass --pre`*
-* **[Shadows](http://moox.github.com/compass-recipes/recipes/shadow/)** - A wide collection of shadows which use pseudo elements to create fold effects, etc.
-* **[Shapes](http://moox.github.com/compass-recipes/recipes/shape/)** - Geometric and iconic shapes, created only with CSS
-* **[Shared](http://moox.github.com/compass-recipes/recipes/shared/)** - Common CSS tricks and hacks.
-* **[UI](http://moox.github.com/compass-recipes/recipes/ui/)** Lots of element styling for menu, buttons, loader, etc.
+## [Online Demos](http://moox.github.com/compass-recipes/tests/)
+
+If you want to view the Sass(scss) source of a demo, remember to find the appropriate `.scss` file of the deserved `s.css` (e.g. : open it from the source & switch extension).
+
+## Availables Recipes
+
+* **[Backgrounds](http://moox.github.com/compass-recipes/tests/recipes/background/)** - Background patterns, gradients.
+* **[Color](http://moox.github.com/compass-recipes/tests/recipes/color/)** Variables Names, advanced color functions like `brightness()` & color scheme functions
+* **[Effects](http://moox.github.com/compass-recipes/tests/recipes/effect/)** - Visual effects like `glass`, `bevel`, `cutout` or `ribbon`
+* **[Form skins](http://moox.github.com/compass-recipes/tests/recipes/form/skin/)** - Only one at the moment. Please add yours :)
+* **[Icon Fonts](http://moox.github.com/compass-recipes/tests/recipes/icon-font/)** - Includes icon fonts helper and a few open source fonts as a compass extension ([more info](https://github.com/MoOx/compass-recipes/blob/master/templates/icon-fonts/README.md))
+* **[Image](http://moox.github.com/compass-recipes/tests/recipes/image/)** - More image mixins (& functions) than Compass deserve (dimensions, inline, simple spriting)
+* **[Layout](http://moox.github.com/compass-recipes/tests/recipes/layout/)** - Vertical centering and box layout shortcuts.
+* **[Media queries](http://moox.github.com/compass-recipes/tests/recipes/media-queries/)** - Shortcuts for media queries.
+* **[Shadows](http://moox.github.com/compass-recipes/tests/recipes/shadow/)** - A wide collection of shadows which use pseudo elements to create fold effects, etc.
+* **[Shapes](http://moox.github.com/compass-recipes/tests/recipes/shape/)** - Geometric and iconic shapes, created only with CSS
+* **[UI](http://moox.github.com/compass-recipes/tests/recipes/ui/)** Lots of element styling for loader, menu, overlay, separator, tooltip, etc.
+* **[Utilities](http://moox.github.com/compass-recipes/tests/recipes/utilities/)** Very usefull utilities, trick, hacks
 * [View other potential icoming items](https://github.com/MoOx/compass-recipes/issues?labels=enhancement%2Cfeature)
 
 ## Installation
@@ -80,7 +81,7 @@ There is also an IRC channel, **#compass-recipes** on _irc.freenode.net_.
 
 Feel free to ping @MoOx if he’s there to get his attention quickly. If there’s no one on **#compass-recipes**, you can try the **#compass** or maybe the **#sass** channel on IRC.
 
-If you have a longer question (or no one’s around on IRC at the moment), the Sass Google group is a great place to go. You’ll usually get a response within a couple hours or so.
+If you have a longer question (or no one’s around on IRC at the moment), drop a mail at [compass-recipes@moox.fr](mailto:compass-recipes@moox.fr). You’ll usually get a response within a couple hours or so.
 
 ## Open to All
 
@@ -94,7 +95,7 @@ Licences are distributed with the fonts.
 ## Build Documentation
 
 *You do not need to build documentation for testing your recipes.*
-*Just run `compass watch/compile` at the root of the repositorie.*
+*Just run `compass watch/compile` at the root of the repository.*
 
 First you need bundle
 
@@ -104,17 +105,13 @@ Then, to build the gh-pages from the `tests/`, you need to call
 
 ```bundle exec rake pages```
 
-This process create the pages & push them to your gh-pages branch.
+This process create the pages & commit them to your gh-pages branch.
 
 ## Authors/Maintainers
 
-Compass Recipes is maintained by [Maxime Thirouin](http://moox.fr), a french front-end web developer, and [David Kaneda](http://www.davidkaneda.com), creative director at [Sencha](http://www.sencha.com).
+Compass Recipes is maintained by [Maxime Thirouin](http://moox.fr), a french front-end web developer, and [David Kaneda](http://www.davidkaneda.com), previously creative director at [Sencha](http://www.sencha.com).
 
-### Recurrent Contributors
-
-* [@canarymason](https://github.com/canarymason)
-
-#### Sous Chefs
+[See all contributors](https://github.com/MoOx/compass-recipes/graphs/contributors)
 
 While Maxime and David are the primary project maintainers, most of the core ideas and techniques in the recipes are not from them.
 
@@ -124,7 +121,7 @@ Credits & Thanks:
 * [@leaverou](https://github.com/leaverou) (backgrounds patterns)
 * [@necolas](https://github.com/necolas) (normalize & tricks)
 * [@simurai](https://github.com/simurai) (awesomes design stuffs)
-* All of the people who contribute to the recipes (all names are in each recipes)
+* All of the people who contribute to the recipes (all names should be in each recipes source)
 
 ### Additional Resources
 

data/VERSION

@@ -1 +1 @@
-0.3.0.alpha.2
+0.3.0

data/lib/compass-recipes/sass_extensions.rb

@@ -2,7 +2,7 @@
 # Sass extensions for Compass Recipes
 ##
 
-%w(_error background_noise gravatar math).each do |lib|
+%w(_error background_noise gravatar).each do |lib|
   require File.join(File.dirname(__FILE__), 'sass_extensions', lib)
 end
 

data/stylesheets/_recipes.scss

@@ -1,6 +1,5 @@
 @import "recipes/animation";
 @import "recipes/background";
-@import "recipes/base";
 @import "recipes/color";
 @import "recipes/effect";
 @import "recipes/font";
@@ -8,9 +7,10 @@
 @import "recipes/google-webfont";
 @import "recipes/icon-font";
 @import "recipes/icons";
+@import "recipes/image";
 @import "recipes/layout";
 @import "recipes/media-queries";
 @import "recipes/shadow";
 @import "recipes/shape";
-@import "recipes/shared";
-@import "recipes/ui";
+@import "recipes/ui";
+@import "recipes/utilities";

data/stylesheets/recipes/_background.scss

@@ -1,15 +1,16 @@
-@import "recipes/background/noise";
-@import "recipes/background/gradients";
 @import "recipes/background/blueprint-grid";
-@import "recipes/background/radial-overlay";
-@import "recipes/background/tartan";
 @import "recipes/background/carbon-fiber";
-@import "recipes/background/stripes";
-@import "recipes/background/cicada";
-@import "recipes/background/tablecloth";
-@import "recipes/background/lined-paper";
-@import "recipes/background/madras";
 @import "recipes/background/checkerboard";
+@import "recipes/background/cicada-stripes";
+@import "recipes/background/gradients";
 @import "recipes/background/houndstooth";
+@import "recipes/background/lined-paper";
+@import "recipes/background/madras";
+@import "recipes/background/metal";
+@import "recipes/background/noise";
 @import "recipes/background/polka-dot";
+@import "recipes/background/radial-overlay";
 @import "recipes/background/rainbow";
+@import "recipes/background/stripes";
+@import "recipes/background/tablecloth";
+@import "recipes/background/tartan";

data/stylesheets/recipes/_color.scss

@@ -4,7 +4,8 @@
 // @author David Kaneda - http://www.davidkaneda.com
 ///
 
-@import "color/name";
+@import "recipes/color/name";
+@import "recipes/color/scheme";
 
 ////
 // Returns the brightness (out of 100) of a specified color.
@@ -78,7 +79,7 @@
     @if $inverse == true {
         $mode: reverse-color-mode($mode);
     }
-    
+
     @if ($mode == light) {
         @return rgba(lighten($flat_color, $contrast), opacity($color));
     } @else if ($mode == dark) {
@@ -110,7 +111,7 @@
 @function color-by-background($bg-color, $contrast: $default-text-contrast) {
     $bg-color: check-opacity($bg-color);
     $tmpmode: get-color-mode($bg-color);
-    
+
     @return color-offset($bg-color, $contrast, $tmpmode, $inverse: true);
 }
 
@@ -136,7 +137,7 @@
     } @else {
         color: color-by-background($bg-color, $contrast);
     }
-    
+
     @if $inset-text {
         @include inset-by-background($bg-color);
     }
@@ -149,7 +150,7 @@
     @if ($box == true) {
         @include box-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
     }
-    
+
     @include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
 }
 
@@ -161,7 +162,20 @@ $base-gradient: matte !default;
 $default-text-contrast: 85% !default;
 $color-mode: get-color-mode($neutral-color) !default;
 
-// @debug color-difference(#95419F, #0FFF90);
-// @debug brightness(#cbea0d) - brightness(#ea850d);
-// @debug contrast-ratio(#95419F, #0FFF90);
-// @debug brightness(#E0F200);
+// Default black used for the black() helper
+$default-black: #000 !default;
+
+// Helper to generate transparent black
+// $opacity - opacity. Default to 1 (no opacity)
+@function black($opacity: 1) {
+    @return rgba($default-black, $opacity);
+}
+
+// Default white used for the white() helper
+$default-white: #fff !default;
+
+// Helper to generate transparent white
+// $opacity - opacity. Default to 1 (no opacity)
+@function white($opacity: 1) {
+    @return rgba($default-white, $opacity)
+}

data/stylesheets/recipes/_font.scss

@@ -10,32 +10,28 @@
 
 @import "compass/css3/font-face";
 
-@mixin font-face-kit($font-name, $font-id, $font-file-suffix: auto, $font-dir: auto)
+@mixin font-face-kit($name, $id, $location: auto)
 {
-    @if ($font-file-suffix == auto)
+    @if ($location == auto)
     {
-        $font-file-suffix: $font-name + '-webfont';
+        $location: $name;
     }
-    @if ($font-dir == auto)
+    // append / if location present
+    @if ($location != false)
     {
-        $font-dir: $font-name;
-    }
-    // append / if font-dir present
-    @if ($font-dir != false)
-    {
-        $font-dir: $font-dir + "/";
+        $location: $location + "/";
     }
     @else
     {
-        $font-dir: "";
+        $location: "";
     }
     @include font-face(
-        "#{$font-name}",
+        "#{$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}"
+            "#{$location}#{$name}.eot?#iefix",
+            "#{$location}#{$name}.woff",
+            "#{$location}#{$name}.ttf",
+            "#{$location}#{$name}.svg##{$id}"
         )
     );
 }

data/stylesheets/recipes/_icon-font.scss

@@ -1,6 +1,6 @@
 ////
 // Icon Fonts helpers
-// 
+//
 // Great to use with the some pictos fonts
 ///
 
@@ -10,197 +10,282 @@
 @import "compass/typography/text/replacement";
 
 @import "recipes/font";
+@import "recipes/text/gradient";
 @import "recipes/background/gradients";
 
-// @todo add http://fortaweso.me/font-awesome
+// The default dir where webfont icons are located.
+// Not need to specify Compass fonts_dir (automatically prefixed).
+$icon-font-dir: 'icons' !default;
 
-$icon-font-class-suffix: icon-font !default;
-$icon-font-base-class:   "#{$icon-font-class-suffix}-base" !default;
+// The default suffix for all placeholders.
+$icon-font-placeholder-suffix: icon-font !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;
+// The default placeholder name for icon parent container.
+$icon-font-parent-placeholder: "#{$icon-font-placeholder-suffix}-parent" !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;
+// The default placeholder name for icon base style.
+$icon-font-base-placeholder: "#{$icon-font-placeholder-suffix}-base" !default;
 
-$icon-font-highlight-color: #3778E5 !default;
+// The default attribute name which contains the icon character code.
+$icon-font-attr-name: data-icon !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}
-{
-    color: transparent;
-    @include background-clip(text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    text-indent: 0;
-    @include text-shadow(none);
-    @include user-select(none);
+// The default icon font size
+$icon-font-size: 1em !default;
+
+// The default color of the icon.
+$icon-font-color: #999 !default;
+
+// The default color of the icon.
+$icon-font-color-hover: darken($icon-font-color, 10%) !default;
+
+// $icon-font-color - The default color of the icon.
+$icon-font-color-active: darken($icon-font-color, 20%) !default;
+
+// The default gradient type of the icon.
+// Compatibility Webkit only
+$icon-font-gradient-type: matte !default;
+
+// The default gradient type of the icon when state is :hover.
+// Compatibility in Webkit only
+$icon-font-gradient-type-hover: $icon-font-gradient-type !default;
+
+// The default gradient type of the icon when state is :active.
+// Compatibility in Webkit only
+$icon-font-gradient-type-active: recessed !default;
+
+// The default shadow type of the icon.
+$icon-font-shadow: rgba(#000, .6) 0 1px 0 !default;
+
+// The default shadow type of the icon when state is :hover.
+$icon-font-shadow-hover: rgba(#000, .8) 0 1px 0 !default;
+
+// The default shadow type of the icon when state is :active.
+$icon-font-shadow-active: $icon-font-shadow !default;
+
+// The default color to use on the border of icons
+// Compatibility in Webkit only
+$icon-font-stroke: null !default;
+
+// Common base style for icon parent container
+%#{$icon-font-parent-placeholder} {
+	position: relative;
+	display: inline-block;
+	overflow: visible;
+}
+
+// Common base style for pseudo-selectors
+%#{$icon-font-base-placeholder} {
+	position: absolute;
+	top: 0;
+	left: 0;
+	text-indent: 0;
+	@include text-shadow(none);
+	@include user-select(none);
+}
+
+// automatically apply the good font family from the font name
+// Use @extend
+@mixin icon-font-family($name) {
+	@if ($name != null) {
+		@extend %#{$icon-font-placeholder-suffix}-#{$name};
+	}
 }
 
+// Icon font declaration using font face
 // http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+// $name - font name
+// $id - font svg #id. Default to the font name
+// $location - directory where the icon font is located. Default to auto (=> fonts_dir/$icon-font-dir/$name)
+@mixin icon-font-face($name, $id: $name, $location: auto) {
+	@if ($location == auto) {
+		$location: '#{$icon-font-dir}/#{$name}';
+	}
 
-@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);
+	// include the font
+	@include font-face-kit($name, $id, $location);
 
-    %#{$icon-font-class-suffix}-#{$font-name}
-    {
-        font-family: #{$font-name};
-        @extend %#{$icon-font-base-class};
-    }
+	// declare the icon font family placeholder
+	%#{$icon-font-placeholder-suffix}-#{$name} {
+		font-family: #{$name};
+	}
 }
 
-@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); }
+// Include the icon font broccolidry
+@mixin icon-font-face-broccolidry()			{ @include icon-font-face(broccolidry); }
+// Include the icon font cuticons
+@mixin icon-font-face-cuticons()			{ @include icon-font-face(cuticons); }
+// Include the icon font ecoico
+@mixin icon-font-face-ecoico()				{ @include icon-font-face(ecoico); }
+// Include the icon font entypo
+@mixin icon-font-face-entypo()				{ @include icon-font-face(entypo, EntypoRegular); }
+// Include the icon font fontawesome
+@mixin icon-font-face-fontawesome()			{ @include icon-font-face(fontawesome, FontAwesomeRegular); }
+// Include the icon font heydings_controls
+@mixin icon-font-face-heydings_controls()	{ @include icon-font-face(heydings_controls, HeydingsControlsRegular); }
+// Include the icon font heydings_icons
+@mixin icon-font-face-heydings_icons()		{ @include icon-font-face(heydings_icons, HeydingsCommonIconsRegular); }
+// Include the icon font icomoon
+@mixin icon-font-face-icomoon()				{ @include icon-font-face(icomoon, IcoMoonRegular); }
+// Include the icon font iconic_fill
+@mixin icon-font-face-iconic_fill()			{ @include icon-font-face(iconic_fill, IconicFill); }
+// Include the icon font iconic_stroke
+@mixin icon-font-face-iconic_stroke()		{ @include icon-font-face(iconic_stroke, IconicStroke); }
+// Include the icon font iconminia
+@mixin icon-font-face-iconminia()			{ @include icon-font-face(iconminia); }
+// Include the icon font meteocons
+@mixin icon-font-face-meteocons()			{ @include icon-font-face(meteocons); }
+// Include the icon font modern_pictograms
+@mixin icon-font-face-modern_pictograms()	{ @include icon-font-face(modern_pictograms, ModernPictogramsNormal);}
+// Include the icon font silkcons
+@mixin icon-font-face-silkcons()			{ @include icon-font-face(silkcons); }
+// Include the icon font socialico
+@mixin icon-font-face-socialico()			{ @include icon-font-face(socialico, SocialicoRegular); }
+// Include the icon font typicons
+@mixin icon-font-face-typicons()			{ @include icon-font-face(typicons); }
+// Include the icon font websymbols
+@mixin icon-font-face-websymbols()			{ @include icon-font-face(websymbols, WebSymbolsRegular); }
+// Include the icon font wpzoom
+@mixin icon-font-face-wpzoom()				{ @include icon-font-face(wpzoom); }
 
-////
-// 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
+// Includes a icon font from a character code (Unicode), styled as an icon.
 //
-// @param {color} $stroke
-// The color of the border. Defautls to {@link #$icon-font-default-border $icon-font-default-border}.
+// $character - font character code used. Default to the attribute specified by $icon-font-attr-name
+// $size - size of the icon. Default to $icon-font-size
+// $font - icon font family to use. If you use a lot of icon, prefer to use icon-font-attr-rules() mixin to define font globally
+// $color - The color of the icon. Defaults to $icon-font-color.
+// $color-hover - The color of the icon when :hover. Default to $icon-font-color-hover,
+// $color-active - The color of the icon when :active. Default to $icon-font-color-active,
+
+// $gradient-type - The gradient type of the icon. Default to $icon-font-gradient-type. See @function background-gradient() for available types.
+// $gradient-type-hover - The gradient type of the icon when :hover. Default to $icon-font-gradient-type-hover. See @function background-gradient() for available types.
+// $gradient-type-active - The gradient type of the icon when :active. Default to $icon-font-gradient-type-active. See @function background-gradient() for available types.
+
+// $shadow - The shadow of the icon. Default to $icon-font-shadow,
+// $shadow-hover - The shadow of the icon when :hover. Default to $icon-font-shadow-hover,
+// $shadow-active - The shadow of the icon when :active. Default to $icon-font-shadow-active,
+
+// $stroke - The stroke color of the icon. Default to $icon-font-stroke (null)
+// $stroke-hover - The stroke color of the icon when :hover. Default to null,
+// $stroke-active - The stroke color of the icon when :active. Default to null,
+
+// $include-states - Whether to include or not :hover & :active states. Default to true,
+// $hidetext - Whether to hide the default text of the element. Default to true.
 //
-// @param {boolean} $include-staes
-// True to include states for hover and active. Defaults to `true`.
-///
+// Compatibility in Chrome, Safari, Firefox, Opera & IE8+
 @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%),
+	$character: attr(#{$icon-font-attr-name}),
+	$size: $icon-font-size,
+	$font: null,
 
-    $glow: null,
-    $glow-hover: $icon-font-highlight-color 0 0 10px,
-    $glow-active: $glow-hover,
+	$color: $icon-font-color,
+	$color-hover: $icon-font-color-hover,
+	$color-active: $icon-font-color-active,
 
-    $shadow: rgba(#000, .5) 0 1px 3px, // Shadow doesn't change, but hover does
+	$gradient-type: $icon-font-gradient-type,
+	$gradient-type-hover: $icon-font-gradient-type-hover,
+	$gradient-type-active: $icon-font-gradient-type-active,
 
-    $stroke: false,
-    $stroke-hover: 1px darken($color-hover, 5),
-    $stroke-active: 1px darken($color-active, 5),
+	$shadow: $icon-font-shadow,
+	$shadow-hover: $icon-font-shadow-hover,
+	$shadow-active: $icon-font-shadow-active,
 
-    $gradient: $icon-font-default-gradient,
-    $gradient-hover: $gradient,
-    $gradient-active: recessed,
+	$stroke: null,
+	$stroke-hover: null,
+	$stroke-active: null,
 
-    $include-states: true,
-    $hidetext: true
+	$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);
-            }
-        }
-    }
+	@extend %#{$icon-font-parent-placeholder};
+
+	// icon are square
+	width: $size;
+	height: $size;
+	line-height: $size;
+
+	@if $hidetext {
+		text-indent: -9999px;
+		//@include hide-text();
+	}
+
+	// before is for the shadow
+	&:before,
+	// after is for the gradient text trick
+	&:after {
+		@extend %#{$icon-font-base-placeholder};
+		@include icon-font-family($font);
+		content: $character;
+		font-size: $size;
+	}
+
+	// Since :after is using text-fill-color: transparent, :before is only used for the shadow;
+	&:before {
+		color: transparent;
+	}
+
+	@include icon-font-effect($color, $gradient-type, $shadow, $stroke);
+
+	@if $include-states {
+		&:hover {
+			@include icon-font-effect($color-hover, $gradient-type-hover, $shadow-hover, $stroke-hover)
+		}
+		&:active {
+			@include icon-font-effect($color-active, $gradient-type-active, $shadow-active, $stroke-active)
+		}
+	}
 }
 
-$icon-font-attr-name: data-icon !default;
-$icon-font-attr-default-pseudo: before !default;
-
-@mixin icon-font-attr-rules()
-{
-    [#{$icon-font-attr-name}]:#{$icon-font-attr-default-pseudo},
-    [#{$icon-font-attr-name}-before]:before,
-    [#{$icon-font-attr-name}-after]:after
-    {
-        content: attr($icon-font-attr-name);
-    }
+	// Mixin to include icon-font color, shadow & stroke
+	// Used by @mixin icont-font()
+	//
+	// $color - The color of the icon
+	// $gradient-type - The gradient-type
+	// $color - The color of the icon
+	@mixin icon-font-effect($color, $gradient-type, $shadow, $stroke) {
+		@if $shadow {
+			&:before {
+				@include text-shadow($shadow);
+			}
+		}
+
+		@if $color and $gradient-type {
+			&:after {
+				@include text-gradient($color, $gradient-type);
+			}
+		}
+
+		@if $stroke {
+			-webkit-text-stroke: $stroke;
+			text-stroke: $stroke;
+		}
+	}
+
+@mixin icon-font-from-attr($font, $attr-name: $icon-font-attr-name) {
+	[#{$attr-name}] {
+		@include icon-font(attr($attr-name), $font: $font);
+		@content;
+	}
+}
+
+@mixin icon-font-attr-pseudo($pseudo: before, $font: null) {
+	$attr: #{$icon-font-attr-name}-#{$pseudo};
+	[#{$attr}]:#{$pseudo} {
+		content: attr($attr);
+		@include icon-font-family($name);
+		@content;
+	}
+}
+
+	@mixin icon-font-before($font: null) {
+		@include icon-font-attr-pseudo(before, $font) { @content; }
+	}
+
+	@mixin icon-font-after($font: null) {
+		@include icon-font-attr-pseudo(after, $font) { @content; }
+	}
+
+@mixin icon-font-attr-rules($font: null, $from-attr-pseudo: before) {
+	@include icon-font-from-attr($font, $pseudo: $from-attr-pseudo);
+	@include icon-font-attr-before($font);
+	@include icon-font-attr-after($font);
 }