From 35d1c2fd6472779ab030c7df0173b4b6689a09fb Mon Sep 17 00:00:00 2001
From: Leo <contact@leonguyen.com>
Date: Fri, 22 Dec 2023 19:38:53 -0600
Subject: [PATCH] Update Essence.

---
 readme.md                   |  8 ++--
 scss/essence.scss           |  3 +-
 scss/vendors/_dropzone.scss | 90 +++++++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 scss/vendors/_dropzone.scss

diff --git a/readme.md b/readme.md
index 5a7c301..7af82ed 100644
--- a/readme.md
+++ b/readme.md
@@ -2,7 +2,7 @@
 
 On a web project that uses Bootstrap and Webpack, simply clone this repository and add the following `import` statements in your SCSS file.
 
-    @import 'path/to/variables'; // Optional, your own variables file to override Essence variables
-    @import 'path/to/essence/scss/variables'; // Essence variables file
-    @import '~bootstrap/scss/bootstrap`; // Bootstrap
-    @import 'path/to/essence/scss/essence'; // Core Essence file
+```sass
+@import 'path/to/variables'; // Optional variables override Essence variables
+@import 'path/to/essence';
+```
\ No newline at end of file
diff --git a/scss/essence.scss b/scss/essence.scss
index 9077dbf..a8e4a29 100644
--- a/scss/essence.scss
+++ b/scss/essence.scss
@@ -20,4 +20,5 @@
 @import 'elements/step-progress-bar';
 
 // Vendors
-@import 'vendors/prismjs';
\ No newline at end of file
+@import 'vendors/prismjs';
+@import 'vendors/dropzone';
diff --git a/scss/vendors/_dropzone.scss b/scss/vendors/_dropzone.scss
new file mode 100644
index 0000000..eecbce9
--- /dev/null
+++ b/scss/vendors/_dropzone.scss
@@ -0,0 +1,90 @@
+.dropzone.dropzone-horizontal {
+  position: relative;
+  border: 2px dashed #ccc;
+  border-radius: 5px;
+  min-height: 150px;
+
+  .dz-message {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #333;
+  }
+
+  .dz-preview {
+    display: block;
+    position: relative;
+    margin: 0;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+    min-height: 20px;
+
+    .dz-image {
+      display: none;
+    }
+
+    .dz-details {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      .dz-size {
+        display: inline-block;
+
+        strong {
+          font-weight: normal;
+        }
+      }
+    }
+
+    .dz-progress {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+
+      .dz-upload {
+        position: absolute;
+        height: 100%;
+        background-color: hsl(200deg 100% 90% / 50%);
+        transition: width 300ms ease-in-out;
+      }
+    }
+
+    .dz-success-mark, .dz-error-mark {
+      display: none
+    }
+
+    &.dz-success, &.dz-error {
+      .dz-progress {
+        display: none;
+      }
+    }
+
+    &.dz-error {
+      .dz-error-message {
+        padding-left: 10px;
+        color: #c00000;
+      }
+    }
+  }
+
+  &.dz-drag-hover {
+    background-color: #eff2f5;
+
+    .dz-message {
+      color: #000;
+    }
+  }
+
+  &.dz-started {
+    .dz-message {
+      display: none;
+    }
+  }
+}
\ No newline at end of file