Merge pull request #6962 from kjac/v8/fix/upload-imagecropper-styling

V8: Styling updates to image cropper and upload property editors

src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less

@@ -1,6 +1,7 @@
 .umb-property-file-upload {
 
     .umb-upload-button-big {
+        max-width: (@propertyEditorLimitedWidth - 40);
         display: block;
         padding: 20px;
         opacity: 1;

src/Umbraco.Web.UI.Client/src/less/mixins.less

@@ -418,7 +418,7 @@
 // --------------------------------------------------
 // Limit width of specific property editors
 .umb-property-editor--limit-width {
-    max-width: 800px;
+    max-width: @propertyEditorLimitedWidth;
 }
 
 // Horizontal dividers

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -722,6 +722,10 @@
 //
 // File upload
 // --------------------------------------------------
+.umb-fileupload {
+    display: flex;
+}
+
 .umb-fileupload .preview {
   border-radius: 5px;
   border: 1px solid @gray-6;

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -244,6 +244,7 @@
 @paddingSmall:          2px 10px;  // 26px
 @paddingMini:           0 6px;   // 22px
 
+@propertyEditorLimitedWidth: 800px;
 
 // Disabled this to keep consistency throughout the backoffice UI. Untill a better solution is thought up, this will do.
 @baseBorderRadius:      3px; // 2px;