Merge pull request #3513 from umbraco/temp7-cropper-inputs

fix alignment of cropper prevalue inputs
umbraco · Nov 6, 2018 · 061297c · 061297c
2 parents f2feaba + 0f4cf0a
commit 061297c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 79 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
@@ -219,91 +219,41 @@ div.umb-codeeditor .umb-btn-toolbar {
 // --------------------------------------------------
 
 .umb-prevalues-multivalues.umb-cropsizes{
-    max-width: none;
+
+    max-width: 500px;
     width: 100%;
+    min-width: 66.6%;
+
+    @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px) {
+        max-width: none;
+    }
 
-    .umb-overlay__form &{
+    .umb-overlay__form & {
         width: 100%;
     }
 }
 
-.umb-cropsizes{
-    float: left;
+.umb-cropsizes {
 
-    .control-group{
-        label{
-            display: block;
-        }
-   }
-
-   &__add{
-       display: flex;
-       align-items: center;
-       flex-wrap: wrap;
-   }
-
-   &__sortable{
-       max-width: 500px;
-       width: 100%;
-       min-width: 66.6%;
-
-       @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
-           max-width: none;
-       }
-   }
-
-   &__controls{
-       margin: 24px 0 0;
-   }
+    &__add {
+        display: inline-flex;
+        align-items: center;
+    }
 
-   &__input{
-       margin: 0 15px 0 0;
-       width: ~"calc(100% - 15px)";
-
-       @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
-           margin: 0;
-           width: 100%;
-           max-width: 220px;
-       }
-
-       &--narrow{
-           max-width: 95px;
-           width: 100%;
-       }
-
-       &-wrap{
-           position: relative;
-           max-width: 206px;
-           width: 100%;
-
-            @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
-                max-width: none;
-                flex: 1 1 100%;
-                margin: 0 0 20px;
+    &__controls {
+        margin: 24px 0 0;
+        display: flex;
+    }
+
+    &__input {
+        width: 100%;
+        &-wrap{
+            flex: 1 1 auto;
+            margin-right: 10px;
+            &--narrow {
+                flex: 0 1 100px;
             }
-
-           &--narrow{
-               margin: 0 15px 0 0;
-               max-width: 95px;
-               width: 100%;
-           }
-
-           &--icon{
-            padding: 0 15px 0 0;
-            width: ~"calc(100% + 15px)"; // Use an escape string in order to make use of CSS native calc function instead of the one built into less
-
-               &:after{
-                   content:"\00D7";
-                   position: absolute;
-                   bottom: -9px;
-                   top: 0;
-                   margin: auto;
-                   right: 0;
-                   width: 5px;
-                   height: 5px;
-               }
-           }
-       }
+        }
    }
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.prevalues.html
@@ -18,15 +18,15 @@
             />
         </div>
 
-        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow umb-cropsizes__input-wrap--icon">
+        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow">
             <label for="addcropwidth"><localize key="general_width">Width</localize></label>
             <input
                 name="newItem.width"
                 type="number"
                 localize="placeholder"
                 placeholder="@general_width"
                 ng-model="newItem.width"
-                class="umb-cropsizes__input umb-cropsizes__input--narrow"
+                class="umb-cropsizes__input"
                 val-highlight="{{hasError}}"
                 id="addcropwidth"
                 min="0"
@@ -42,7 +42,7 @@
                 localize="placeholder"
                 placeholder="@general_height"
                 ng-model="newItem.height"
-                class="umb-cropsizes__input umb-cropsizes__input--narrow"
+                class="umb-cropsizes__input"
                 val-highlight="{{hasError}}"
                 id="addcropheight"
                 min="0"