Add opacity mixin, No CSS Added!

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 84a8b59ab5aa97cf0bfde3ab2241f5051e4c1665..3653a724127adaa83d5d3139ebc571b7cfab5604 100644 (file)
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -748,6 +748,16 @@ This mixin helps you to easily create a square, rectangle or a circle. Sass Refe
 }
 ```
 
+### Opacity Mixin
+
+This mixin helps you easily create opacity/transparency of an element. Sass Reference [here](#opacity)
+
+```scss
+.foo {
+  @include opacity(0.7); 
+}
+```
+
 ### Rotate Mixin
 These Rotate mixins lets you rotate an element to a certain degree. Clockwise is the default direction but adding a `-` in front of the degrees will make it counter-clockwise.
 

diff --git a/docs/pages/sass-mixins.md b/docs/pages/sass-mixins.md
index 27a95cd43420a9656ee2a9bcd46c56fa51b9c929..4858a205d2a9ea434b76c15b78048426b0d5544e 100644 (file)
--- a/docs/pages/sass-mixins.md
+++ b/docs/pages/sass-mixins.md
@@ -50,6 +50,7 @@ Here is a list of available mixins:
 - [Font Italic](#font-italic)
 - [Style Type Unordered](#style-type-unordered)
 - [Style Type Ordered](#style-type-ordered)
+- [Opacity](#opacity)
 - [Overflow](#overflow)
 - [Overflow-x](#overflow-x)
 - [Overflow-y](#overflow-y)

diff --git a/scss/prototype/_opacity.scss b/scss/prototype/_opacity.scss
new file mode 100644 (file)
index 0000000..919f643
--- /dev/null
+++ b/scss/prototype/_opacity.scss
@@ -0,0 +1,15 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-opacity
+////
+
+/// Opacity Mixin: Easily create opacity to an element
+/// @param {Number} $opacity[] Opacity/Transparency of an element
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  filter: alpha(opacity=$opacity-ie); //IE8
+}

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index e6f37b772c77857908fdc1762e717ac622122d79..6dd6743db097bcdeb49916ad0b9031de890c2653 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -15,6 +15,9 @@
 // Rotate Mixin
 @import 'rotate';
 
+// Opacity Mixin
+@import 'opacity';
+
 // Typescale
 @import 'typescale';