Update Essence.

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';
+```

scss/essence.scss

@@ -20,4 +20,5 @@
 @import 'elements/step-progress-bar';
 
 // Vendors
-@import 'vendors/prismjs';
+@import 'vendors/prismjs';
+@import 'vendors/dropzone';

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;
+    }
+  }
+}