From: harry <harmanmanchanda182@gmail.com>
Date: Sun, 21 May 2017 14:41:30 +0000 (+0530)
Subject: Closes #10045 - Add border none reset utility!
X-Git-Tag: v6.4.0-rc1~23^2~20^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1094564dbde0baaf966752a1672b58fe45d7f02f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Closes #10045 - Add border none reset utility!
---

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 8aa5d54fb..17263db36 100644
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -55,6 +55,7 @@ or, if you looking for specific utility instead of all, these helper classes can
 @include foundation-prototype-display;
 @include foundation-prototype-position;
 @include foundation-prototype-border-box;
+@include foundation-prototype-border-none;
 @include foundation-prototype-sizing;
 @include foundation-prototype-spacing;
 ```
@@ -585,6 +586,18 @@ Border box lets you only add the content, padding and border, but not the margin
 
 ---
 
+## Border none 
+
+Border none lets you quickly resets border to `none` into a component.
+
+```html_example
+<div class="callout primary border-none">
+  Hi! I am a callout with no Borders
+</div>
+``` 
+
+---
+
 ## Display Classes
 
 Display classes helps to display the elements in specific positions inside any other HTML elements.
diff --git a/scss/prototype/_border-box.scss b/scss/prototype/_border-box.scss
index 1ab606f11..e04b5f021 100644
--- a/scss/prototype/_border-box.scss
+++ b/scss/prototype/_border-box.scss
@@ -3,7 +3,7 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group prototype-bordered
+/// @group prototype-border-box
 ////
 
 /// Responsive breakpoints for border box.
diff --git a/scss/prototype/_border-none.scss b/scss/prototype/_border-none.scss
new file mode 100644
index 000000000..54080384e
--- /dev/null
+++ b/scss/prototype/_border-none.scss
@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-border-none
+////
+
+/// Responsive breakpoints for border none.
+/// @type Boolean
+$prototype-border-none-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border none utility
+@mixin border-none {
+  border: none !important;
+}
+
+@mixin foundation-prototype-border-none {
+  .border-none {
+    @include border-none;
+  }
+
+  @if ($prototype-border-none-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-none {
+            @include border-none;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index fc6f7617b..e6f37b772 100644
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -57,6 +57,9 @@
 // Border box
 @import 'border-box';
 
+// Border none Utilty
+@import 'border-none';
+
 // Sizing Utilities
 @import 'sizing';
 
@@ -78,6 +81,7 @@
   @include foundation-prototype-display;
   @include foundation-prototype-position;
   @include foundation-prototype-border-box;
+  @include foundation-prototype-border-none;
   @include foundation-prototype-sizing;
   @include foundation-prototype-spacing;
 }