adds docs

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 2a396abdfa8c34d68621c7ba24656c358655b240..4fd55fc2db6a70177dda8acd9fe4bb9412c3b0a2 100644 (file)
--- 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 3bc1a3f781ddb7d093db3eac9d390a940d93df71..f57f976580d8032b88db2d2f3c45547fc022478e 100755 (executable)
--- 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');
+}