From 23f36b9d4e19eec960cc8b99540b147670aea3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 22 Mar 2019 09:20:50 +0100
Subject: [PATCH] top: 70px; in infinity mode

---
 .../components/umbstickybar.directive.js         |  4 ++--
 .../editor/subheader/umb-editor-sub-header.less  | 16 ++++++++++++----
 .../src/views/propertyeditors/grid/grid.html     |  2 +-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
index fb5a558fd0..2f2df7c12b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
@@ -56,7 +56,7 @@ Use this directive make an element sticky and follow the page when scrolling.
                 }
 
                 if (attr.scrollableContainer) {
-                    scrollableContainer = $(attr.scrollableContainer);
+                    scrollableContainer = bar.closest(attr.scrollableContainer);
                 } else {
                     scrollableContainer = $(window);
                 }
@@ -121,7 +121,7 @@ Use this directive make an element sticky and follow the page when scrolling.
             function calculateSize() {
                 var width = bar.innerWidth();
                 clonedBar.css({
-                    width: width
+                    width: width + 10 // + 10 (5*2) because we need to add border to avoid seeing the shadow beneath. Look at the CSS.
                 });
             }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
index 0c11349841..2e599252bb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
@@ -1,7 +1,11 @@
 .umb-editor-sub-header {
    padding: 10px 0;
    margin-bottom: 10px;
-   background: @gray-10;
+   background: @brownGrayLight;
+   border-left: 5px solid @brownGrayLight;
+   border-right: 5px solid @brownGrayLight;
+   margin-left: -5px;
+   margin-right: -5px;
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
@@ -12,7 +16,7 @@
     &.nested {
         margin-top: 0;
         margin-bottom: 0;
-        background: @gray-10;
+        background: @brownGrayLight;
     }
 }
 
@@ -25,10 +29,14 @@
 
 .umb-editor-sub-header.-umb-sticky-bar {
     box-shadow: 0 6px 3px -3px rgba(0,0,0,.16);
-    transition: box-shadow 1s;
-    top: calc(@appHeaderHeight + @editorHeaderHeight);
+    transition: box-shadow 240ms;
     margin-top: 0;
     margin-bottom: 0;
+    top: calc(@appHeaderHeight + @editorHeaderHeight);
+    
+    .umb-editor--infinityMode & {
+        top: calc(@editorHeaderHeight);
+    }
 }
 
 .umb-group-builder__property-preview .umb-editor-sub-header {
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 0c6078478a..f0171e2d00 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
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-property-editor clearfix" id="umb-grid">
 
-    <umb-editor-sub-header ng-if="showReorderButton()" style="background-color: white;">
+    <umb-editor-sub-header ng-if="showReorderButton()" style="background-color: white; border-color: white;">
 
         <umb-editor-sub-header-content-right>
             <umb-button