Introduced new "large" overlay size (#11945)

* Introduced new "large" overlay size (1/2)

* Introduced new "large" overlay size (2/2)

* #H5IS

Co-authored-by: Owain <[email protected]>

Author: abjerner

src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less

@@ -69,7 +69,8 @@
 // and also use a loop to build editor sizes - easily extended with new sizes by adding to the map
 @editorSizes:
     small 500px,
-    medium 800px;
+    medium 800px,
+    large 1600px;
 
 .create-editor-sizes(@iterator:1) when(@iterator <= length(@editorSizes)) {
     .umb-editor {
@@ -92,6 +93,11 @@
 
 .create-editor-sizes();
 
+.umb-editor--large {
+    max-width: 1600px;
+    width: calc(100% - 50px);
+}
+
 .umb-editor__overlay {
     .absolute();
     background: rgba(0,0,0,0.4);

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editors.html

@@ -6,6 +6,7 @@
                          ng-attr-inert="{{$last ? undefined : true}}"
                          ng-class="{'umb-editor--small': model.size === 'small',
                 'umb-editor--medium': model.size === 'medium',
+                'umb-editor--large': model.size === 'large',
                 'umb-editor--animating': model.animating,
                 'umb-editor--notInFront': model.inFront !== true,
                 'umb-editor--infiniteMode': model.infiniteMode,