From 1570e3ba33b7e6a6418181ecfefdf7a562a85c3f Mon Sep 17 00:00:00 2001
From: Phreshhh <thatismyspecial@gmail.com>
Date: Wed, 30 Jan 2019 12:36:11 +0100
Subject: [PATCH] Outline buttons

---
 docs/content/docs/components/buttons.md | 18 ++++++++++++++++++
 package.json                            |  2 +-
 src/components/_buttons.scss            | 22 +++++++++++++++++++++-
 src/core/_config.scss                   |  7 +++++++
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md
index 3a1efe5..8728105 100644
--- a/docs/content/docs/components/buttons.md
+++ b/docs/content/docs/components/buttons.md
@@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
 <button class="btn-warning">Warning</button>
 <button class="btn-danger">Danger</button>
 ```
+
+### Outline colors
+
+<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
+<input type="button" class="btn-secondary-outline" value="Secondary"/>
+<button class="btn-success-outline">Success</button>
+<button class="btn-warning-outline">Warning</button>
+<a class="btn-danger-outline">Danger</a>
+
+#### Code:
+
+```html
+<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
+<input type="button" class="btn-secondary-outline" value="Secondary"/>
+<button class="btn-success-outline">Success</button>
+<button class="btn-warning-outline">Warning</button>
+<a class="btn-danger-outline">Danger</a>
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 04d7aa2..33a0ba3 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "node node_modules/gulp/bin/gulp.js build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "postinstall": "gulp postinstall",
-    "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
+    "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
   },
   "repository": {
     "type": "git",
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index ca793f2..d68ace0 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -72,7 +72,6 @@ a {
   }
 }
 
-
 @each $colorName, $color, $color-light, $color-text in $colors {
   .alert-#{$colorName} {
     background-color: $color-light;
@@ -94,3 +93,24 @@ a {
     }
   }
 }
+
+@each $colorName, $color, $color-light, $color-text in $colors-outline {
+  button.btn-#{$colorName},
+  .paper-btn.btn-#{$colorName},
+  [type='button'].btn-#{$colorName} {
+    background-color: $white;
+    border-color: darken($color-light, 10%);
+    color: $color-text;
+
+    &:hover {
+      border-color: $color;
+      background-color: $color-light;
+    }
+
+    &:hover {
+      &:active {
+        background-color: darken($color-light, 10%);
+      }
+    }
+  }
+}
diff --git a/src/core/_config.scss b/src/core/_config.scss
index d0d8ebd..a9fc21c 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -45,6 +45,13 @@ $colors: (primary, $primary, $primary-light, $primary-text),
          (warning, $warning, $warning-light, $warning-text),
          (danger, $danger, $danger-light, $danger-text),
          (muted, $muted, $muted-light, $muted-text);
+
+$colors-outline: (primary-outline, $primary, $primary-light, $primary),
+                 (secondary-outline, $secondary, $secondary-light, $secondary-text),
+                 (success-outline, $success, $success-light, $success-text),
+                 (warning-outline, $warning, $warning-light, $warning-text),
+                 (danger-outline, $danger, $danger-light, $danger-text),
+                 (muted-outline, $muted, $muted-light, $muted-text);
 /* stylelint-enable */
 
 /**