From 70c3b1e1c5e1bbc354fe5961bae613bd23c4d8a2 Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
Date: Thu, 18 Jul 2019 23:12:10 +0400
Subject: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81=D0=B0=D0=BB?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20Vue.=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task5_vue/src/components/AddNewEntryButton.vue | 64 ++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 day9/task5_vue/src/components/AddNewEntryButton.vue

(limited to 'day9/task5_vue/src/components/AddNewEntryButton.vue')

diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue
new file mode 100644
index 0000000..fa52f8b
--- /dev/null
+++ b/day9/task5_vue/src/components/AddNewEntryButton.vue
@@ -0,0 +1,64 @@
+<template>
+    <button
+            @mouseenter="isHovered = true"
+            @mouseleave="isHovered = false"
+            @click="showCreateForm">
+        <div v-if="isHovered">Add new entry</div>
+        <div v-else>+</div>
+    </button>
+</template>
+
+<script>
+    import EditFormBox from "./EditFormBox.vue";
+
+    export default {
+        name: "AddNewEntryButton",
+        components: {EditFormBox},
+
+        data() {
+            return {
+                isHovered: false
+            }
+        },
+
+        methods: {
+            showCreateForm() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    button {
+        overflow: hidden;
+        white-space: nowrap;
+
+        position: fixed;
+
+        padding: 5px;
+        border-radius: 50px;
+        width: 100px;
+        height: 100px;
+        border: none;
+        background-color: #2871e2;
+        color: white;
+        font-size: 45px;
+
+        transition-property: width;
+        transition-duration: 0.6s;
+
+        bottom: 50px;
+        left: 50px;
+    }
+
+    button:hover {
+        width: 300px;
+        font-size: 30px;
+        background-color: #286bd6;
+    }
+
+    button:focus {
+        background-color: #2861c3;
+    }
+</style>
\ No newline at end of file
-- 
cgit v1.2.3

