From 6af28abcabfc51d8f5cd645e13b3b66aca8da9a9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 12 Jan 2016 14:34:28 +0100
Subject: [PATCH] media picker (selected items) add a but more contrast to
 folders, use flex box

---
 .../src/less/property-editors.less            | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 36c8afc8d3..b3cb034596 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -181,23 +181,30 @@ ul.color-picker li a  {
     list-style-type: none;
     margin: 0;
     padding: 0;
-    display: block;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 
 .umb-sortable-thumbnails li {
-    display: inline-block;
     position: relative;
-    text-align: center;
-    vertical-align: top;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 2px;
+    margin: 5px;
+    background: white;
+    border: 1px solid #f8f8f8;
 }
 
-.umb-sortable-thumbnails li:hover a{
+.umb-sortable-thumbnails li:hover a {
   display: block;
 }
 
-.umb-sortable-thumbnails li img
-{
+.umb-sortable-thumbnails li img {
   max-width:100%;
   max-height:100%;
   margin:auto;
@@ -210,6 +217,17 @@ ul.color-picker li a  {
   max-height: none !important;
 }
 
+.umb-sortable-thumbnails .icon-holder {
+    text-align: center;
+}
+
+.umb-sortable-thumbnails .icon-holder .icon{
+    font-size: 40px;
+    line-height: 50px;
+    color: @gray;
+    display: block;
+}
+
 
 //
 // Cropper