¨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 {

Modules/Media/Resources/assets/admin/sass/media-picker.scss

@@ -1,10 +1,10 @@
 .file-manager-iframe {
-	width: 100%;
-	vertical-align: bottom;
+    width: 100%;
+    vertical-align: bottom;
 }
 
 .file-manager {
-	background: #f9f9f9;
+    background: #f9f9f9;
     margin-top: 20px;
     overflow-x: auto;
 
@@ -14,10 +14,12 @@
 
     .dataTable {
         .btn {
-            padding: 10px 16px 8px;
+            padding: 9px 16px;
+        }
 
+        .select-media {
             > i {
-                margin-top: 5px;
+                -webkit-text-stroke: 1px #f1f1f1;
             }
         }
     }
@@ -25,7 +27,7 @@
 
 .media-picker-modal {
     padding-right: 0 !important;
-    z-index: 1050;
+    z-index: 1150;
 
     > i {
         margin-right: 5px;
@@ -44,13 +46,13 @@
     }
 
     .modal-header {
-        padding: 6px 15px;
+        padding: 10px 15px;
         background: #f1f1f1;
 
         > .close {
-            margin-top: 5px;
+            margin-top: 3px;
             -webkit-text-stroke: 0;
-            transition: 200ms;
+            transition: 150ms;
         }
     }
 
@@ -62,7 +64,7 @@
     .modal.fade .modal-dialog {
         transform: scale(0.8);
         opacity: 0;
-        transition: 200ms ease-in-out;
+        transition: 150ms ease-in-out;
 
         &.in .modal-dialog {
             transform: scale(1);
@@ -72,7 +74,7 @@
 }
 
 @media screen and (max-width: 767px) {
-	.media-picker-modal .modal-dialog {
-		margin: 10px;
-	}
+    .media-picker-modal .modal-dialog {
+        margin: 10px;
+    }
 }