Styling for Period of Performance Section

This commit is contained in:
leigh-mil 2019-09-03 11:56:20 -04:00
parent 8a16b61e80
commit f08088c736
3 changed files with 19 additions and 3 deletions

View File

@ -41,6 +41,7 @@ class CLINForm(FlaskForm):
) )
end_date = DateField( end_date = DateField(
translate("task_orders.form.pop_end"), translate("task_orders.form.pop_end"),
description="For example: 07 04 1776",
format="%m/%d/%Y", format="%m/%d/%Y",
validators=[Optional()], validators=[Optional()],
) )

View File

@ -84,7 +84,7 @@
} }
.card { .card {
padding: ($gap * 4) ($gap * 5); padding: ($gap * 4) ($gap * 5) 0;
.usa-input { .usa-input {
margin: 0 $gap 0 0; margin: 0 $gap 0 0;
@ -106,6 +106,21 @@
button { button {
margin-bottom: $gap * 3; margin-bottom: $gap * 3;
} }
.date-picker {
padding-bottom: $gap * 3;
.usa-input__title {
padding-bottom: $gap;
font-weight: $font-bold;
}
.usa-input__help {
font-style: italic;
color: $color-gray;
margin-bottom: 1rem;
}
}
} }
.usa-input__title, .usa-input__title,

View File

@ -176,7 +176,7 @@
<div class="form-row"> <div class="form-row">
<div class="form-col"> <div class="form-col">
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template> <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }"> <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
<legend> <legend>
<div class="usa-input__title"> <div class="usa-input__title">
{{ 'task_orders.form.pop_start' | translate }} {{ 'task_orders.form.pop_start' | translate }}
@ -239,7 +239,7 @@
<div class="form-row"> <div class="form-row">
<div class="form-col"> <div class="form-col">
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template> <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }"> <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
<legend> <legend>
<div class="usa-input__title"> <div class="usa-input__title">
{{ 'task_orders.form.pop_end' | translate }} {{ 'task_orders.form.pop_end' | translate }}