From 6888339cdb678c017cd23d542f15942a5047330e Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
Date: Tue, 23 Jul 2019 12:42:26 +0400
Subject: =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D0=B0=20LES?=
 =?UTF-8?q?S=20=D0=B4=D0=BB=D1=8F=20=D0=BD=D0=B5=D0=BA=D0=BE=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D1=8B=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=BE=D0=B2.=20=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B9=20=D1=82=D0=B5=D0=B3=20<fo?=
 =?UTF-8?q?rm>=20=D0=B8=D0=B7=20EditFromBox.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 day9/task5_vue/src/components/UploadFileButton.vue | 23 ++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

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

diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue
index 96f3576..c668a0e 100644
--- a/day9/task5_vue/src/components/UploadFileButton.vue
+++ b/day9/task5_vue/src/components/UploadFileButton.vue
@@ -11,7 +11,7 @@
                 @click="triggerUploadFile">
             <div v-if="isHovered">Upload File</div>
             <div v-else>
-                <img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">
+                <img src="/static/images/upload_icon.png">
             </div>
         </button>
     </div>
@@ -36,7 +36,10 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+    @button-radius: 100px;
+    @button-hovered-width: 300px;
+
     button {
         overflow: hidden;
         white-space: nowrap;
@@ -44,13 +47,13 @@
         position: fixed;
 
         padding: 5px;
-        border-radius: 50px;
-        width: 100px;
-        height: 100px;
+        border-radius: @button-radius / 2;
+        width: @button-radius;
+        height: @button-radius;
         border: none;
         background-color: #2871e2;
         color: white;
-        font-size: 45px;
+        font-size: 30px;
 
         transition-property: width;
         transition-duration: 0.6s;
@@ -60,12 +63,16 @@
     }
 
     button:hover {
-        width: 300px;
-        font-size: 30px;
+        width: @button-hovered-width;
         background-color: #286bd6;
     }
 
     button:focus {
         background-color: #2861c3;
     }
+
+    img {
+        width: @button-radius * 0.7;
+        height: @button-radius * 0.7;
+    }
 </style>
\ No newline at end of file
-- 
cgit v1.2.3

