From: harry <harmanmanchanda182@gmail.com>
Date: Sun, 4 Jun 2017 11:20:50 +0000 (+0530)
Subject: Add opacity mixin, No CSS Added!
X-Git-Tag: v6.4.0-rc3~15^2~1
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a5e39b2f50aec2fa26fbc8c6383d93ac4f291d39;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add opacity mixin, No CSS Added!
---

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 84a8b59ab..3653a7241 100644
--- 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 27a95cd43..4858a205d 100644
--- 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
index 000000000..919f64331
--- /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 e6f37b772..6dd6743db 100644
--- 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';