From 58b780563c7fc4a1496f5c676f2d14faddb096e0 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Fri, 3 Jul 2020 17:32:40 -0700
Subject: merge with master

---
 src/mobile/ImageUpload.scss | 130 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 117 insertions(+), 13 deletions(-)

(limited to 'src/mobile/ImageUpload.scss')

diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index eea69b81c..890258918 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,8 +5,32 @@
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    max-width: 400px;
+    min-width: 400px;
+
+    .upload_label {
+        font-weight: 700;
+        color: black;
+        background-color: rgba(0, 0, 0, 0);
+        border: solid 3px black;
+        margin: 10px;
+        font-size: 30;
+        height: 70px;
+        width: 80%;
+        display: flex;
+        font-family: sans-serif;
+        text-transform: uppercase;
+        justify-content: center;
+        flex-direction: column;
+        border-radius: 10px;
+    }
+
+    .file {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: ltr;
+    }
 
     .button_file {
         text-align: center;
@@ -17,18 +41,98 @@
         font-size: 3em;
     }
 
-    .input_file {
-        display: none;
+    .inputfile {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
     }
 
-    .upload_label,
-    .upload_button {
-        background: $dark-color;
-        font-size: 500%;
-        font-family: $sans-serif;
-        text-align: center;
-        padding: 5vh;
-        margin-bottom: 20px;
-        color: white;
+    .inputfile+label {
+        font-weight: 700;
+        color: black;
+        background-color: rgba(0, 0, 0, 0);
+        border: solid 3px black;
+        margin: 10px;
+        font-size: 30;
+        height: 70px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 30px;
+        width: 80%;
+        display: flex;
+        font-family: sans-serif;
+        text-transform: uppercase;
+        justify-content: center;
+        flex-direction: column;
+        border-radius: 10px;
+    }
+
+    .inputfile.active+label {
+        font-style: italic;
+        color: black;
+        background-color: lightgreen;
+        border: solid 3px darkgreen;
+    }
+
+    .status {
+        font-size: 2em;
     }
+
+}
+
+.image-upload {
+    top: 100%;
+    opacity: 0;
+}
+
+.image-upload.active {
+    top: 0;
+    position: absolute;
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    opacity: 1;
+}
+
+.uploadContainer {
+    top: 40;
+    position: absolute;
+    z-index: 1000;
+    height: 20vh;
+    width: 80vw;
+    opacity: 1;
+}
+
+.closeUpload {
+    position: absolute;
+    border-radius: 10px;
+    top: 3;
+    color: black;
+    font-size: 30;
+    right: 3;
+    z-index: 1002;
+    padding: 0px 3px;
+    background: rgba(0, 0, 0, 0);
+    transition: 0.5s ease all;
+    border: 0px solid;
+}
+
+.loadingImage {
+    display: inline-flex;
+    width: max-content;
+}
+
+.loadingSlab {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    margin: 10;
+    border-radius: 20px;
+    opacity: 0.2;
+    background-color: black;
+    transition: all 2s, opacity 1.5s;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2