From 35177eea9f2c629100e762a5e14c67d5bb0a06b2 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Wed, 20 Sep 2017 18:01:51 +0200
Subject: [PATCH] Fix image cropper z-index with focal point behind sticky bar

---
 src/Umbraco.Web.UI.Client/src/less/components/overlays.less | 2 +-
 .../src/less/components/overlays/umb-overlay-backdrop.less  | 4 ++--
 src/Umbraco.Web.UI.Client/src/less/property-editors.less    | 4 ++--
 src/Umbraco.Web.UI.Client/src/less/variables.less           | 6 ++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index 68d3b20cab..d5b3651625 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -2,7 +2,7 @@
     position: fixed;
     overflow: hidden;
     background: @white;
-    z-index: 7500;
+    z-index: @zindexUmbOverlay;
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
index a05e9c8f95..0a8cdf94e6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
@@ -3,8 +3,8 @@
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.50);
-   z-index: 2000;
+   z-index: @zindexOverlayBackdrop;
    top: 0;
    left: 0;
    animation: fadeIn 0.2s;
-}
+}
\ No newline at end of file
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 2388aae2b2..a818cd2605 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -304,7 +304,7 @@ ul.color-picker li a  {
   top: 0;
   left: 0;
   cursor: move;
-  z-index: 6001;
+  z-index: @zindexCropperOverlay;
   position: absolute;
 }
 
@@ -331,7 +331,7 @@ ul.color-picker li a  {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 5999;
+  z-index: @zindexCropperOverlay - 1;
   -moz-opacity: .75;
   opacity: .75;
   filter: alpha(opacity=7);
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 635d75d895..673631c630 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -230,6 +230,12 @@
 @zindexModalBackdrop:     1040;
 @zindexModal:             1050;
 
+@zindexUmbOverlay:        7500;
+@zindexOverlayBackdrop:   2000;
+
+// Sticky bar has a z-index of "500", which is set from javascript in directive
+// so set z-index of cropper should be lower to be behind sticky bar.
+@zindexCropperOverlay:    499;
 
 // Sprite icons path
 // -------------------------