¨4.0.1¨

Modules/Media/Resources/assets/admin/sass/main.scss

@@ -1,16 +1,16 @@
-@import '~dropzone/dist/dropzone';
+@import "dropzone/dist/dropzone";
 
 .dropzone {
-    border: 1px dashed #d2d6de;
+    border: 2px dashed #d2d6de;
     min-height: 232px;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
 
     &.dz-clickable {
         border-radius: 3px;
     }
 
     .dz-message {
-        color: #646C7F;
+        color: #646c7f;
         font-size: 20px;
         margin-top: 82px;
     }
@@ -21,7 +21,7 @@
 }
 
 .file-icon {
-	font-size: 20px;
+    font-size: 20px;
 }
 
 .main-file {
@@ -52,49 +52,30 @@
 }
 
 .single-image {
-	padding: 10px;
-	background: #f1f1f1;
-	margin-top: 15px;
+    padding: 10px;
+    background: #f1f1f1;
+    margin-top: 15px;
     display: inline-block;
     border-radius: 3px;
     vertical-align: bottom;
-
-    > .image-holder {
-        cursor: default;
-        margin: 0;
-        border-radius: 3px;
-    }
-}
-
-.multiple-images-wrapper {
-    margin-top: 15px;
-
-    h4 {
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-}
-
-.multiple-images {
-	overflow: hidden;
-	padding: 10px 10px 0 10px;
-	background: #f1f1f1;
-	margin-top: 15px;
-    border-radius: 3px;
 }
 
 .image-holder {
-	position: relative;
-	float: left;
-	height: 125px;
-	width: 125px;
-	overflow: hidden;
-	background: #fff;
-	margin: 0 10px 10px 0;
-	border: 1px solid #d2d6de;
+    position: relative;
+    float: left;
+    height: 125px;
+    width: 125px;
+    overflow: hidden;
+    background: #fff;
+    margin: 0;
+    border: 1px solid #d2d6de;
     border-radius: 3px;
-	cursor: move;
     z-index: 0;
+    cursor: pointer;
+
+    .placeholder-image {
+        max-width: 80%;
+    }
 
     > i {
         position: absolute;
@@ -102,7 +83,7 @@
         color: #d9d9d9;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
         z-index: -1;
     }
 
@@ -118,31 +99,31 @@
 
     > .remove-image {
         position: absolute;
-        top: -2px;
-        right: 4px;
+        top: 2px;
+        right: 6px;
         color: #ffffff;
         padding: 0;
         background: transparent;
-        transition: 200ms;
+        transition: 150ms;
         visibility: hidden;
         opacity: 0;
         font-size: 18px;
-        font-family: 'FontAwesome';
+        font-family: "FontAwesome";
         -webkit-text-stroke: 1px #737881;
-           -moz-text-stroke: 1px #737881;
-            -ms-text-stroke: 1px #737881;
-             -o-text-stroke: 1px #737881;
+        -moz-text-stroke: 1px #737881;
+        -ms-text-stroke: 1px #737881;
+        -o-text-stroke: 1px #737881;
         z-index: 2;
 
         &:focus {
             border-color: transparent;
             -webkit-box-shadow: none;
-                    box-shadow: none;
+            box-shadow: none;
         }
 
         &:active {
             -webkit-box-shadow: none;
-                    box-shadow: none;
+            box-shadow: none;
         }
 
         &::after {