From 25c6cbd29aff90f694d72afe28ab56b0113fb16a Mon Sep 17 00:00:00 2001
From: Guille Cura <cura.gf@gmail.com>
Date: Thu, 5 Jul 2018 02:37:43 -0300
Subject: Update stylesheets and added darkMode variable and toggle.

---
 src/styles/image-upload.scss | 93 ++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 42 deletions(-)

(limited to 'src/styles/image-upload.scss')

diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
index 06176a7af..e93884b36 100644
--- a/src/styles/image-upload.scss
+++ b/src/styles/image-upload.scss
@@ -1,74 +1,89 @@
+.theme__dark {
+  .image-upload {
+    background: $dark-theme-gray-darker;
+    border: 1px solid $dark-theme-gray-light;
+    color: $dark-theme-gray-lighter;
+
+    &__action {
+      &-background { background: rgba($dark-theme-black, .7); }
+
+      button {
+        color: $dark-theme-gray-lightest;
+
+        .mdi { color: $dark-theme-gray-lightest; }
+      }
+    }
+  }
+
+  .image-upload-wrapper .mdi { color: $dark-theme-gray-light; }
+}
+
 .image-upload {
-  position: absolute;
-  width: 140px;
-  height: 140px;
+  background: $theme-gray-lightest;
   border: 1px solid $theme-gray-lighter;
   border-radius: $theme-border-radius-small;
-  background: $theme-gray-lightest;
-  overflow: hidden;
+  height: 140px;
   margin-top: 5px;
+  overflow: hidden;
+  position: absolute;
+  width: 140px;
 
   &__preview,
   &__action {
-    position: absolute;
-    top: 0;
     left: 0;
+    position: absolute;
     right: 0;
+    top: 0;
   }
 
   &__preview {
-    z-index: 1;
-    background-size: cover;
-    background-size: 100%;
-    background-repeat: no-repeat;
     background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
     border-radius: 3px;
+    z-index: 1;
   }
 
   &__action {
-    position: relative;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.5s;
     display: flex;
     justify-content: center;
+    opacity: 0;
+    position: relative;
+    transition: opacity .5s;
+    z-index: 10;
 
     &-background {
-      position: absolute;
-      top: 0;
+      background: rgba($theme-gray, .7);
+      bottom: 0;
       left: 0;
+      position: absolute;
       right: 0;
-      bottom: 0;
-      background: rgba($theme-gray, 0.7);
+      top: 0;
       z-index: 10;
     }
 
     button {
+      color: #FFF;
       position: relative;
       z-index: 100;
-      color: #FFF;
 
-      .mdi {
-        color: #FFF;
-      }
+      .mdi { color: #FFF; }
     }
   }
 
   &__dropzone {
-    text-align: center;
+    align-items: center;
     border-radius: 5px;
-    padding: 10px;
     display: flex;
-    align-items: center;
-    justify-content: center;
     flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+    text-align: center;
   }
 
-  &__dropzone, 
+  &__dropzone,
   button {
-    .mdi {
-      margin-bottom: 5px;
-    }
+    .mdi { margin-bottom: 5px; }
 
     p {
       font-size: 10px;
@@ -76,16 +91,10 @@
     }
   }
 
-  &:hover {
-    .image-upload__action {
-      opacity: 1;
-    }
-  }
+  &:hover .image-upload__action { opacity: 1; }
 }
 
-.image-upload-wrapper {
-  .mdi {
-    font-size: 40px;
-    color: $theme-gray-light;
-  }
-}
\ No newline at end of file
+.image-upload-wrapper .mdi {
+  color: $theme-gray-light;
+  font-size: 40px;
+}
-- 
cgit v1.2.3-54-g00ecf