yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
fix alignment of cropper prevalue inputs
This commit is contained in:
Robert
2018-11-06 12:48:42 +01:00
committed by GitHub
parent f2feaba604 0f4cf0a97c
commit 061297cdcf
2 changed files with 30 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -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;
}
}
}
}
}
}

6
src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.prevalues.html
View File

@@ -18,7 +18,7 @@
/>
</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"
@@ -26,7 +26,7 @@
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"