From 85da726272097cf71aaedc5d5090ecb48ceef9f4 Mon Sep 17 00:00:00 2001
From: RafiBomb <rafi@zurb.com>
Date: Thu, 27 Apr 2017 17:20:09 -0700
Subject: [PATCH] adds docs

---
 docs/pages/button.md         | 18 +++++++-
 scss/components/_button.scss | 86 ++++++++++++++++++++----------------
 2 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 2a396abd..4fd55fc2 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -13,7 +13,7 @@ In Inky HTML, the `<button>` tag creates all of this markup for you.
 ```
 
 <div class="callout primary">
-- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br> 
+- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br>
 - Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
 </div>
 
@@ -68,11 +68,25 @@ Change the background color of a button by adding the class `.secondary`, `.succ
 
 ---
 
+## Hollow
+
+Make any button a hollow button by adding the `.hollow` class to the `<button>` tag in Inky HTML).
+
+```inky_example
+<button href="#" class="hollow">Default Hollow</button>
+<button href="#" class="hollow secondary">Secondary Hollow</button>
+<button href="#" class="hollow success">Success Hollow</button>
+<button href="#" class="hollow warning">Warning Hollow</button>
+<button href="#" class="hollow alert">Alert Hollow</button>
+```
+
+---
+
 ## Radius and Round
 
 Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the `.radius` or `.rounded` class to a button.
 
-*Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)*
+*Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4 (Gmail)*
 
 *Note - In order to create `.radius` and `.rounded` buttons, the border needs to be removed.*
 
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 3bc1a3f7..f57f9765 100755
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -313,44 +313,54 @@ table.button.warning:hover {
 
 // Hollow Buttons
 @mixin hollowButton($color,$class:false) {
-    // If this mixin is called with a class, then a class will be added
-    // Then the mixin calls itself with just the color to obtain the color styles
-    @if $class {
-        &.#{$class} {
-            @include hollowButton($color);
-        }
-    }
-    @else {
-        table a {
-            border:1px solid $color;
-            color: $color;
-        }
-        &:hover {
-            table a {
-              border-color:1px solid darken($color, 10%);
-              color: darken($color, 10%);
-            }
-        }
+// If this mixin is called with a class, then a class will be added
+// Then the mixin calls itself with just the color to obtain the color styles
+  @if $class {
+    &.#{$class} {
+      @include hollowButton($color);
     }
+  }
+  @else {
+    table a {
+      border:1px solid $color;
+      color: $color;
+    }
+    &:hover {
+      table a {
+        border-color:1px solid darken($color, 10%);
+        color: darken($color, 10%);
+      }
+    }
+  }
 }
+
 table.button.hollow {
-    table td,
-    &:hover table td {
-        border:none!important;
-        border-radius:0px;
-        background: transparent!important;
-    }
-    table a {border-radius:0px;}
-    &.radius {
-      table a {border-radius:$global-radius;}
-    }
-    &.rounded {
-      table a {border-radius:$global-rounded;}
-    }
-
-    @include hollowButton($primary-color);
-    @include hollowButton($secondary-color,'secondary');
-    @include hollowButton($alert-color,'alert');
-    @include hollowButton($warning-color,'warning');
-    @include hollowButton($success-color,'success');
-}
\ No newline at end of file
+  table td,
+  &:hover table td {
+    border:none!important;
+    border-radius:0px;
+    background: transparent!important;
+  }
+
+  table a {
+    border-radius:0px;
+  }
+
+  &.radius {
+    table a {
+      border-radius:$global-radius;
+    }
+  }
+
+  &.rounded {
+    table a {
+      border-radius:$global-rounded;
+    }
+  }
+
+  @include hollowButton($primary-color);
+  @include hollowButton($secondary-color,'secondary');
+  @include hollowButton($alert-color,'alert');
+  @include hollowButton($warning-color,'warning');
+  @include hollowButton($success-color,'success');
+}
-- 
2.47.2