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 678db3f798..e9d598a8cf 100644 --- 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; - width: 100%; - .umb-overlay__form &{ + 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 & { width: 100%; } } -.umb-cropsizes{ - float: left; +.umb-cropsizes { - .control-group{ - label{ - display: block; - } - } + &__add { + display: inline-flex; + align-items: center; + } - &__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; - } - - &__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 index 0be82ff52f..6341d6f11c 100644 --- 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,7 +18,7 @@ /> -
+