From 981fb39af62abcfe4f868af0efdb219f3c373b11 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Wed, 24 Feb 2016 09:14:13 +0100
Subject: [PATCH] Fixed crop slider

---
 .../src/less/property-editors.less            | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 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 4a82f742cf..02badb9e7a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -350,27 +350,34 @@ ul.color-picker li a  {
 }
 
 .umb-cropper .crop-slider {
-   vertical-align: middle;
    padding: 10px;
    border-top: 1px solid @grayLighter;
    margin-top: 10px;
 
+   display: flex;
+   align-items: center;
+   justify-content: center;
+
+   flex-wrap: wrap;
+
    @media (min-width: 769px) {
         padding: 10px 50px 10px 50px;
    }
 }
 
-.umb-cropper .crop-slider i{
+.umb-cropper .crop-slider i {
     color: @gray;
+    flex: 0 0 25px;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.umb-cropper .crop-slider i:first-of-type {
+    text-align: right;
 }
 
 .umb-cropper .crop-slider input {
-    margin-top: 7px;
-    width: ~"calc(100% - 45px)";
-
-   @media (min-width: 769px) {
-        width: 320px;
-   }
+    flex: 0 1 auto;
 }
    .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder {
         display: inline-block;