From 538d04bc2c49d137d0399457db964fc6f7de0bb8 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sun, 28 Jul 2019 13:00:51 +0430
Subject: [PATCH] Refactored button and created icon button

---
 src/renderer/components/Button.vue     |  6 +-
 src/renderer/components/IconButton.vue | 82 ++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/components/IconButton.vue

diff --git a/src/renderer/components/Button.vue b/src/renderer/components/Button.vue
index 7a59349..c28dafc 100644
--- a/src/renderer/components/Button.vue
+++ b/src/renderer/components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <a href="#" role="button" class="btn" :class="className">
+  <a href="#" role="button" class="button" :class="className">
     <slot name="icon"></slot>
     <slot></slot>
   </a>
@@ -9,7 +9,7 @@
 export default {
   data () {
     return {
-      className: `btn--` + this.variant
+      className: `button--` + this.variant
     }
   },
 
@@ -19,7 +19,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.btn 
+.button 
   font-size: .9rem
   text-decoration: none
   padding: .5rem 1rem
diff --git a/src/renderer/components/IconButton.vue b/src/renderer/components/IconButton.vue
new file mode 100644
index 0000000..ac7715a
--- /dev/null
+++ b/src/renderer/components/IconButton.vue
@@ -0,0 +1,82 @@
+<template>
+  <a href="#" role="button" class="icon-button" :class="className">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'IconButton',
+  data () {
+    return {
+      className: `icon-button--` + this.variant
+    }
+  },
+
+  props: ['variant']
+
+}
+</script>
+
+<style lang="sass" scoped>
+.icon-button 
+  font-size: .9rem
+  text-decoration: none
+  padding: .5rem 1rem
+  text-transform: capitalize
+  border-radius: .375rem
+  transition: background-color 200ms
+  box-sizing: border-box
+  outline: unset
+  &--contained 
+    background-color: #0076F9
+    color: white
+    font-weight: 600
+    &:hover
+      background-color: lighten(#0076F9,5)
+    &:focus,&:active
+      background-color: darken(#0076F9,5)
+
+  svg
+    width: 14px
+    height: 14px
+    fill: white
+    transition: fill 200ms
+
+  &--flat 
+    color: grey
+    transition: all .2s ease-in-out
+    svg
+      fill: gray
+    &:hover
+      background-color: rgba(0,0,0,0.05)
+    &:focus,&:active
+      background-color: rgba(0,0,0,.15)
+
+  &--raised 
+    background-color: #0076F9
+    color: white
+    font-weight: 600
+    box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
+    &:hover
+      background-color: lighten(#0076F9,5)
+    &:focus,&:active
+      background-color: darken(#0076F9,5)
+  &--outlined 
+     background-color: white
+     color: #0076F9
+     border: 1px solid #0076F9
+     svg
+      fill: #0076F9
+     &:focus,&:active
+      background-color: darken(#0076F9,5)
+      color: white
+      svg
+        fill: white
+     &:hover
+      background-color: #0076F9
+      color: white
+      svg
+        fill: white
+</style>
+