Fix spacing on CLIN type and number, use .form-row in macro

This commit is contained in:
leigh-mil 2019-06-12 16:44:59 -04:00
parent 88fe358ced
commit d8f7f7e912
2 changed files with 37 additions and 19 deletions

View File

@ -83,7 +83,29 @@
} }
.usa-input { .usa-input {
margin: $gap 0; margin-top: $gap;
margin-bottom: $gap;
}
.form-row {
margin-bottom: 0;
.usa-input {
margin-left: $gap;
margin-right: $gap;
}
.form-col:first-child {
.usa-input {
margin-left: 0;
}
}
.form-col:last-child {
.usa-input {
margin-right: 0;
}
}
} }
.task-order__loa-fieldset { .task-order__loa-fieldset {
@ -105,7 +127,13 @@
} }
button.icon-link { button.icon-link {
padding: $gap * 3 0 0; margin-top: 0;
margin-left: 0;
padding-left: 0;
&.icon-link__add-another-clin {
margin-top: $gap * 3;
}
} }
.task-order__pdf-help-text { .task-order__pdf-help-text {
@ -113,16 +141,6 @@
} }
} }
.row.row__form-fields {
.col {
margin-left: $gap;
}
.col:first-child {
margin-left: 0;
}
}
.panel { .panel {
@include shadow-panel; @include shadow-panel;
} }

View File

@ -60,11 +60,11 @@
v-bind:initial-loa-count="{{ fields.loas.data | length }}" v-bind:initial-loa-count="{{ fields.loas.data | length }}"
inline-template> inline-template>
<div> <div>
<div class="row row__form-fields"> <div class="form-row">
<div class="col"> <div class="form-col form-col--two-thirds">
{{ OptionsInput(fields.jedi_clin_type) }} {{ OptionsInput(fields.jedi_clin_type) }}
</div> </div>
<div class="col"> <div class="form-col form-col--third">
{{ TextInput(fields.number) }} {{ TextInput(fields.number) }}
</div> </div>
</div> </div>
@ -144,8 +144,8 @@
<hr v-if="clinIndex !== 0"> <hr v-if="clinIndex !== 0">
<clin-fields v-bind:initial-clin-index='clinIndex' inline-template> <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
<div> <div>
<div class="row row__form-fields"> <div class="form-row">
<div class="col"> <div class="form-col form-col--two-thirds">
<div class="usa-input"> <div class="usa-input">
<fieldset data-ally-disabled="true" class="usa-input__choices"> <fieldset data-ally-disabled="true" class="usa-input__choices">
<legend> <legend>
@ -162,7 +162,7 @@
</fieldset> </fieldset>
</div> </div>
</div> </div>
<div class="col"> <div class="form-col form-col--third">
<textinput :name="'clins-' + clinIndex + '-number'" inline-template> <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
<div class="usa-input"> <div class="usa-input">
<label :for="name"> <label :for="name">
@ -357,7 +357,7 @@
</div> </div>
<button <button
class="icon-link" class="icon-link icon-link__add-another-clin"
v-on:click="addClin" v-on:click="addClin"
type="button"> type="button">
{{ Icon('plus') }} {{ Icon('plus') }}