Added component styling

Changes
- Moved `rounded` and `bordered` to component styling
- Created and added `shadow` to component styling

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 8e2c105989c9a0d7d44ae5440ebe59112e852ec1..38d2058dbaec48adb3061d31513f44c359239afd 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -61,39 +61,27 @@ Looking for more customization including **responsive breakpoints?** Click here
 
 ---
 
-## Rounded & Bordered
+## Component Styling
 
-These `.rounded` & `.bordered` classes helps to make an element round its corners and give light borders respectively. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards, tables and many more
+These `.rounded`, `.bordered` & `.shadow` classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more
 
 #### Buttons
 
 ```html_example
-<button type="button" class="button rounded bordered primary">Primary</button>
-<button type="button" class="button rounded bordered secondary">Secondary</button>
-<button type="button" class="button rounded bordered success">Success</button>
-<button type="button" class="button rounded bordered alert">Alert</button>
-<button type="button" class="button rounded bordered warning">Warning</button>
+<button type="button" class="button rounded bordered shadow primary">Primary</button>
+<button type="button" class="button rounded bordered shadow secondary">Secondary</button>
+<button type="button" class="button rounded bordered shadow success">Success</button>
+<button type="button" class="button rounded bordered shadow alert">Alert</button>
+<button type="button" class="button rounded bordered shadow warning">Warning</button>
 ```
 
-#### Images
-
-```html
-<img src="" class="rounded">
-<img src="" class="rounded-circle">
-``` 
-
-<div class="docs-code-live margin-bottom-1">
-       <img src="http://placehold.it/100x100" class="rounded margin-right-1">
-       <img src="http://placehold.it/100x100" class="rounded-circle">
-</div>
-
 #### Cards
 
 ```html
-<div class="rounded bordered card">
+<div class="rounded bordered shadow card">
   <img src="assets/img/generic/rectangle-1.jpg">
   <div class="card-divider">
-    Rounded Card
+    Styled Card
   </div>
   <div class="card-section">
     <h4>This is a card.</h4>
@@ -105,10 +93,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
 <div class="docs-code-live">
        <div class="row">
                <div class="small-4 columns">
-                       <div class="rounded bordered card">
+                       <div class="rounded bordered shadow card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
-                           Rounded Card
+                           Styled Card
                          </div>
                          <div class="card-section">
                            <h4>This is a card.</h4>
@@ -117,10 +105,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
                        </div>
                </div>
                <div class="small-4 columns">
-                       <div class="rounded bordered card">
+                       <div class="rounded bordered shadow card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
-                           Rounded Card
+                           Styled Card
                          </div>
                          <div class="card-section">
                            <h4>This is a card.</h4>
@@ -129,10 +117,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
                        </div>
                </div>
                <div class="small-4 columns">
-                       <div class="rounded bordered card">
+                       <div class="rounded bordered shadow card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
-                           Rounded Card
+                           Styled Card
                          </div>
                          <div class="card-section">
                            <h4>This is a card.</h4>
@@ -146,13 +134,13 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
 #### Tables
 
 ```html
-<table class="rounded bordered">
+<table class="rounded bordered shadow">
        <!-- My Table goes here -->
 </table>
 ```
 
 <div class="docs-code-live">
-       <table class="rounded bordered">
+       <table class="rounded bordered shadow">
          <thead>
            <tr>
              <th width="200">Table Header</th>
@@ -190,6 +178,18 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
        </table>
 </div>
 
+#### Images
+
+```html
+<img src="" class="rounded">
+<img src="" class="rounded-circle">
+``` 
+
+<div class="docs-code-live margin-bottom-1">
+       <img src="http://placehold.it/100x100" class="rounded margin-right-1">
+       <img src="http://placehold.it/100x100" class="rounded-circle">
+</div>
+
 ---
 
 ## Font Styling

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index e05a3fe4ed32c9238b1ab90cadec4cb963830b02..41615cc09a54c3af013e6f57eb502ac9a2c6f254 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -36,6 +36,9 @@
 // Bordered Utility
 @import 'bordered';
 
+// Shadow Utility
+@import 'shadow';
+
 // Overflow helper classes
 @import 'overflow';
 
@@ -63,6 +66,7 @@
   @include foundation-prototype-list-style-type;
   @include foundation-prototype-rounded;
   @include foundation-prototype-bordered;
+  @include foundation-prototype-shadow;
   @include foundation-prototype-overflow;
   @include foundation-prototype-display;
   @include foundation-prototype-position;

diff --git a/scss/prototype/_shadow.scss b/scss/prototype/_shadow.scss
new file mode 100644 (file)
index 0000000..9dc45bb
--- /dev/null
+++ b/scss/prototype/_shadow.scss
@@ -0,0 +1,42 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-shadow
+////
+
+/// Responsive breakpoints for shadow utility.
+/// @type Boolean
+$prototype-shadow-breakpoints: $global-prototype-breakpoints !default;
+
+/// Default value for `prototype-box-shadow`
+/// @type Number
+$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12) !default;
+
+/// Shadow Utility: Adds a light box shadow to an element by default.
+/// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component
+@mixin shadow(
+  $shadow: $prototype-box-shadow
+) {
+  box-shadow: $shadow;
+}
+
+@mixin foundation-prototype-shadow {
+  .shadow {
+    @include shadow;
+  }
+
+  @if ($prototype-shadow-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-shadow {
+            @include shadow;
+          }
+        }
+      }
+    }
+  }
+}