Merge pull request #11 from nikandlv/development

Standardized button component and implemented focus,active,hover styles

src/renderer/components/Button.vue

@@ -1,16 +1,19 @@
 <template>
-  <a href="#" role="button" class="btn" :class="className"><slot></slot></a>
+  <a href="#" role="button" class="btn" :class="className">
+    <slot name="icon"></slot>
+    <slot></slot>
+  </a>
 </template>
 
 <script>
 export default {
   data () {
     return {
-      className: `btn--` + this.type
+      className: `btn--` + this.variant
     }
   },
 
-  props: ['type']
+  props: ['variant']
 
 }
 </script>
@@ -22,36 +25,57 @@ export default {
   padding: .5rem 1rem
   text-transform: capitalize
   border-radius: .375rem
-
+  transition: background-color 200ms
+  box-sizing: border-box
+  overflow: hidden
+  outline: unset
   &--contained 
     background-color: #336cfb
     color: white
     font-weight: 600
-    align-self: flex-starts
-
-  #btn__icon
+    &:hover
+      background-color: lighten(#336cfb,5)
+    &:focus,&:active
+      background-color: darken(#336cfb,5)
+  svg
     width: 14px
     height: 14px
     fill: white
+    transition: fill 200ms
 
   &--flat 
     color: grey
     transition: all .2s ease-in-out
-    &:hover 
+    svg
+      fill: gray
+    &:hover
+      background-color: rgba(0,0,0,0.05)
+    &:focus,&:active
       background-color: rgba(0,0,0,.15)
 
   &--raised 
     background-color: #336cfb
     color: white
     font-weight: 600
-    box-shadow: 0 .6rem .6rem rgba(#336cfb , .5)
-
+    box-shadow: 0 .3rem .7rem rgba(#336cfb , .5)
+    &:hover
+      background-color: lighten(#336cfb,5)
+    &:focus,&:active
+      background-color: darken(#336cfb,5)
   &--outlined 
      background-color: white
      border: 1px solid #336cfb
-     transition: all 0.2s ease-in-out
+     svg
+      fill: #336cfb
+     &:focus,&:active
+      background-color: darken(#336cfb,5)
+      color: white
+      svg
+        fill: white
      &:hover
       background-color: #336cfb
       color: white
+      svg
+        fill: white
 </style>
 

src/renderer/layouts/DockableSidebar.vue

@@ -77,15 +77,17 @@
                 </MenuItem>
             </MenuGroup>
 
-            <Button type="contained">
-                <svg version="1.1" id="btn__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
-                    <g id="Add">
-                        <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898
-                            s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39
-                            c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898
-                            C286.376,133.303,278.362,125.29,268.477,125.29z"/>
-                    </g>
-                </svg>
+            <Button variant="contained" class="playlist-button">
+                <template v-slot:icon>
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
+                        <g id="Add">
+                            <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898
+                                s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39
+                                c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898
+                                C286.376,133.303,278.362,125.29,268.477,125.29z"/>
+                        </g>
+                    </svg>
+                </template>
                 Add new list
             </Button>
             <div class="grow"></div>
@@ -174,6 +176,8 @@ section.sidebar
     flex-direction: column
     overflow-y: auto
     transition: width 300ms,transform 300ms,padding 500ms
+    .playlist-button
+        align-self: flex-start
     .icon
         width: 18px
         height: auto