Outline buttons

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>
+```

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",

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%);
+      }
+    }
+  }
+}

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 */
 
 /**