From: harry <harmanmanchanda182@gmail.com>
Date: Fri, 24 Feb 2017 03:52:14 +0000 (+0530)
Subject: Improved helper box mixin and added it in docs
X-Git-Tag: v6.4.0-rc1~23^2~20^2~29
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2869c5fbacb57ec2665962b224d145c98e321aff;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Improved helper box mixin and added it in docs
---

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 7a02430ca..f2c14991e 100644
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -627,3 +627,25 @@ Oppositely, if you are looking for text wrapping into the next line, you can use
 ```html
 <p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
 ``` 
+
+---
+
+## Helper Box Mixin
+
+This mixin helps you to easily create a square, rectangle or a circle
+
+#### Box: Usage a mixin 
+
+```scss 
+.foo {
+	@include box(1rem, 2rem); // Rectangle
+}
+.bar {
+	@include box(1rem); // Square
+}
+.baz {
+	@include box(1rem, $circle: true); // Circle
+}
+``` 
+
+Sass Reference [here](#box)
diff --git a/scss/prototype/_box.scss b/scss/prototype/_box.scss
index aa949f3c6..f5cfcd95d 100644
--- a/scss/prototype/_box.scss
+++ b/scss/prototype/_box.scss
@@ -1,8 +1,12 @@
 /// Box Mixin: Easily create a square, rectangle or a circle
 /// @param {Number} $width[] Width of the box
-/// @param {Number} $height[] Height of the box
+/// @param {Number} $height[$width] Height of the box, defaults to `$width` to easily make a square
 /// @param {Boolean} $circle[false] Makes the box a circle, by default `false`.
-@mixin box($width, $height, $circle: false) {
+@mixin box(
+	$width, 
+	$height: $width, 
+	$circle: false
+) {
   width: $width;
   height: $height;
   @if $circle {