From f829b0b16cbac8087e7cd4be6f0167f8f21629c0 Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Wed, 13 May 2015 10:56:25 +1000
Subject: [PATCH] Fixes text not overlayed on top of icon for folders in folder
 browser

---
 .../src/less/property-editors.less            | 19 ++++++++++++++-----
 .../directives/html/umb-photo-folder.html     |  3 +--
 2 files changed, 15 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 7c7c8414ee..01430ac2ec 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -308,10 +308,6 @@ ul.color-picker li a  {
   line-height: 120px
 }
 
-.umb-folderbrowser .selector-overlay{
-  display: none;
-}
-
 .umb-upload-drop-zone{
     margin-bottom:5px;
 }
@@ -369,7 +365,7 @@ ul.color-picker li a  {
 
 
 .umb-photo-folder .picrow div a:first-child {
-    width:100%;
+     width:100%;
     height:100%;
 }
 
@@ -389,6 +385,10 @@ ul.color-picker li a  {
   text-decoration: none;
 }
 
+.umb-photo-folder .selector-overlay{
+  display: none;
+}
+
 //this is a temp hack, to provide selectors in the dialog:
 .umb-photo-folder .pic:hover .selector-overlay {
   position: absolute;
@@ -421,6 +421,15 @@ ul.color-picker li a  {
   transform: translateY(-50%);
 }
 
+.umb-photo-folder .umb-non-thumbnail span{
+  display: block;
+  margin: auto;
+  /*vertically aligns */
+  position: static;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .umb-photo-folder .selected{
   position: relative;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
index 6353c49152..67e0ecbf66 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
@@ -11,8 +11,7 @@
 
                 <div ng-style="img.style" class="umb-non-thumbnail" ng-if="!img.thumbnail">
                     <i class="icon large {{img.icon}}"></i>
-                    {{img.name}}
-                    
+                    <span>{{img.name}}</span>
                 </div>
 
                 <div ng-if="img.thumbnail" class="umb-photo" ng-style="img.thumbStyle" alt="{{img.name}}">