From e63c7120b7528a3ba14a1ed5ecd6f152cf6828af Mon Sep 17 00:00:00 2001
From: Rune Strand <rune@umbraco.com>
Date: Thu, 12 Nov 2015 15:17:10 +0100
Subject: [PATCH] Add row title bar styling

---
 .../src/less/gridview.less                    | 27 ++++++++++++-------
 .../src/views/propertyeditors/grid/grid.html  | 11 +++++---
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index a68414c8cd..83b0a92cd6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -323,24 +323,33 @@
 }
 */
 
-.umb-grid .umb-row-title {
+.umb-grid .umb-row-title-bar {
    margin-bottom: 20px;
-   display: block;
+   display: flex;
    padding-left: 10px;
    padding-right: 10px;
 }
 
-.umb-grid ins.item-label {
-   text-transform: uppercase;
-   font-size: 13px;
-   color: @gray;
-   font-weight: bold;
-   text-decoration: none;
-   display: inline-block;
+.umb-grid .umb-row-title {
+    display: inline-block;
+    font-size: 15px;
+}
+
+.umb-grid .umb-row-title p{
+    font-weight: bold;
+    color: @black;
 }
 
 .umb-grid .row-tools {
    display: inline-block;
+   margin-left: 10px;
+   font-size: 18px;
+   color: @gray;
+}
+
+.row-tools i:hover {
+    color: @blueDark;
+    cursor: pointer;
 }
 
 .umb-grid .umb-add-row {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 0cc4380911..8ec7724061 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -54,9 +54,12 @@
                         <!-- ng-mouseleave="disableCurrentRow()"  -->
                         <div ng-repeat="row in section.rows" class="umb-row">
 
-                            <div class="umb-row-title">
+                            <div class="umb-row-title-bar">
+
+                                <div class="umb-row-title">
+                                    <p>{{row.name}}</p>
+                                </div>
 
-                               <ins class="item-label">{{row.name}}</ins>
 
                                <!-- Row tool -->
                                <div class="row-tools">
@@ -78,11 +81,11 @@
                                    </div>
 
                                    <div class="cell-tools-move">
-                                       <a ng-mouseover="setInfohighlightRow(row)"
+                                       <div ng-mouseover="setInfohighlightRow(row)"
                                           ng-mouseleave="disableInfohighlightRow(row)"
                                           href>
                                            <i class="icon icon-navigation" title="@general_move" localize="title"></i>
-                                       </a>
+                                       </div>
                                    </div>
 
                                    <div class="cell-tools-edit" ng-if="hasSettings">