Media Picker adjustments

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -120,7 +120,7 @@ h5.-black {
   margin: 20px;
 }
 .umb-control-group {
-  border-bottom: 1px solid @gray-10;
+  border-bottom: 1px solid @gray-11;
   padding-bottom: 20px;
   margin-bottom: 15px !important;
 }
@@ -671,4 +671,3 @@ input[type=checkbox]:checked + .input-label--small {
 	width: 1px !important;
 	overflow: hidden;
 }
-

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -4,9 +4,12 @@
 // Container styles
 // --------------------------------------------------
 .umb-property-editor {
-    
-    width: 100%;
-    max-width: 800px;
+    @media (max-width: 800px) {
+        width: 100%;
+    }
+    @media (min-width: 800px) {
+      min-width:66.6%;
+    }
 
 	&-pull {
 		float:left;
@@ -227,6 +230,18 @@
 //
 // Media picker
 // --------------------------------------------------
+
+.umb-mediapicker > div {
+    border: 1px solid @inputBorder;
+}
+.umb-mediapicker-single > div {
+    width:144px;
+}
+.umb-mediapicker-multi > div {
+    width:100%;
+}
+
+
 .umb-mediapicker .add-link {
     display: flex;
     justify-content:center;
@@ -327,19 +342,28 @@
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
-    padding: 2px;
+    padding: 5px;
     margin: 5px;
     background: @white;
-    border: 1px solid @gray-10;
+    //border: 1px solid @gray-10;
     max-width: 100%;
 }
+.umb-mediapicker {
+    
+    .umb-sortable-thumbnails li {
+        border:none;
+    }
+    
+}
+
 
 
 .umb-mediapicker .umb-sortable-thumbnails li {
     flex-direction: column;
-    margin: 0 0 5px 5px;
-    padding: 5px;
 }
+/*.umb-mediapicker .umb-sortable-thumbnails li.add-wrapper {
+    padding: 0px;
+}*/
 
 .umb-sortable-thumbnails li:hover a {
     display: flex;
@@ -442,6 +466,9 @@
     align-items: center;
     margin-left: 5px;
     text-decoration: none;
+    
+    //border-color: @inputBorder;
+    .box-shadow(0 1px 2px rgba(0,0,0,0.25));
 }
 
 .umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -88,6 +88,7 @@
 @gray-8:                #D8D7D9;
 @gray-9:                #E9E9EB;
 @gray-10:               #F3F3F5;
+@gray-11:               #F6F6F7;
 
 
 // Additional Icon Colours
@@ -518,4 +519,4 @@
 // SORTABLE
 // --------------------------------------------------
 @sortableHelperBg: @turquoise-l2;
-@sortablePlaceholderBg : @turquoise;
+@sortablePlaceholderBg : @turquoise;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

@@ -1,4 +1,4 @@
-<div class="umb-property-editor umb-mediapicker" ng-controller="Umbraco.PropertyEditors.MediaPickerController">
+<div class="umb-property-editor umb-mediapicker" ng-class="{'umb-mediapicker-multi':isMultiPicker, 'umb-mediapicker-single':!isMultiPicker}" ng-controller="Umbraco.PropertyEditors.MediaPickerController">
 
     <p ng-if="(mediaItems|filter:{trashed:true}).length == 1"><localize key="mediaPicker_pickedTrashedItem"></localize></p>
     <p ng-if="(mediaItems|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>