add a wrapper for the applies-to value and its action buttons

This commit is contained in:
tophf 2018-07-03 09:16:46 +03:00
parent 6b2adcf6c3
commit 997eacc64a
2 changed files with 12 additions and 6 deletions

View File

@ -100,6 +100,7 @@
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
<div class="applies-value-wrapper">
<input name="applies-value" class="applies-value style-contributor" spellcheck="false"> <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
<div class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove"> <div class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove">
<svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg> <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
@ -107,6 +108,7 @@
<div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd"> <div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg> <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
</div> </div>
</div>
</li> </li>
</template> </template>

View File

@ -415,6 +415,10 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
.applies-to li .add-applies-to:first-child { .applies-to li .add-applies-to:first-child {
margin-left: 1rem; margin-left: 1rem;
} }
.applies-to li .applies-value-wrapper {
flex-grow: 1;
display: flex;
}
.applies-to li .applies-value { .applies-to li .applies-value {
flex-grow: 1; flex-grow: 1;
padding-left: 0.2rem; padding-left: 0.2rem;