Closes #10045 - Add border none reset utility!

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 8aa5d54fbeca414e5321a354de892bf9f1a9badb..17263db368b0056794bc2089bb27002ad5eb411e 100644 (file)
--- 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 1ab606f11b4a8b6d7c08285f81e9bd3518ff23fc..e04b5f021b6604c7c583fbdd9415c8db8a2b6991 100644 (file)
--- 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 (file)
index 0000000..5408038
--- /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 fc6f7617b491246bd048aaab145824ee3f87de0b..e6f37b772c77857908fdc1762e717ac622122d79 100644 (file)
--- 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;
 }