From ca254eabf2fc665de5e6aed04086be1d264f3388 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 23 Apr 2019 00:11:19 +0900
Subject: [PATCH] Add base button component

Add Login/Streaming button
---
 src/components/Welcome.vue            |  4 +-
 src/components/globals/BaseButton.vue | 56 +++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/components/globals/BaseButton.vue

diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index fbe9c399..bc5d2c55 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -1,7 +1,9 @@
 <template>
   <div id="welcome">
     <img alt="Vue logo" src="@/assets/logo.png">
-    <h1>Welcome TheDesk</h1>
+    <h1>Welcome to TheDesk</h1>
+    <BaseButton class="primary fill" disabled>Login</BaseButton>
+    <BaseButton class="primary">Streaming Public Timeline</BaseButton>
   </div>
 </template>
 
diff --git a/src/components/globals/BaseButton.vue b/src/components/globals/BaseButton.vue
new file mode 100644
index 00000000..657524c9
--- /dev/null
+++ b/src/components/globals/BaseButton.vue
@@ -0,0 +1,56 @@
+<template>
+  <button :type="type || 'button'" v-bind="$attrs">
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  inheritAttrs: false,
+})
+export default class BaseButton extends Vue {
+  @Prop() private type?: string
+}
+</script>
+
+<style scoped lang="postcss">
+button {
+  --btn-color: var(--color);
+  --btn-bg-color: var(--bg-color);
+
+  &.fill {
+    border-style: none;
+  }
+
+  color: var(--btn-color);
+  border-color: var(--btn-color);
+  background-color: var(--btn-bg-color);
+
+  &.primary {
+    --btn-color: #3388cc;
+
+    &.fill {
+      --btn-color: whitesmoke;
+      --btn-bg-color: #3388cc;
+    }
+  }
+
+  &:disabled {
+    --btn-color: darkgray !important;
+    border-style: solid !important;
+    --btn-bg-color: var(--bg-color) !important;
+  }
+
+  font-size: 1em;
+  margin: 0 0.5em;
+  padding: 0.8em 2em;
+
+  transition-duration: 0.5s;
+
+  &:hover:not(:disabled) {
+    filter: brightness(90%);
+  }
+}
+</style>
\ No newline at end of file