211 lines
2.9 KiB
SCSS
211 lines
2.9 KiB
SCSS
// Form Grid
|
|
.form-row {
|
|
margin: ($gap * 4) 0;
|
|
|
|
.form-col {
|
|
flex-grow: 1;
|
|
|
|
&:first-child .usa-input {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child .usa-input {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.usa-input {
|
|
input,
|
|
textarea {
|
|
max-width: $max-input-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media($medium-screen) {
|
|
@include grid-row;
|
|
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
.form-col {
|
|
&--half {
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
&--third {
|
|
flex-basis: 33.33%;
|
|
}
|
|
|
|
&--two-thirds {
|
|
flex-basis: 66.66%;
|
|
}
|
|
|
|
&--sixth {
|
|
flex-basis: 16.66%;
|
|
}
|
|
|
|
&--quarter {
|
|
flex-basis: 25%;
|
|
}
|
|
|
|
&--three-quarters {
|
|
flex-basis: 75%;
|
|
}
|
|
|
|
.usa-input {
|
|
margin-left: $gap * 4;
|
|
margin-right: $gap * 4;
|
|
|
|
label {
|
|
.icon-validation {
|
|
left: auto;
|
|
right: -$gap * 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
.usa-input {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.usa-input {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form__sub-fields {
|
|
@include alert;
|
|
@include alert-level("default");
|
|
|
|
margin-top: $gap * 2;
|
|
display: block;
|
|
|
|
.usa-input {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
> h1,
|
|
> h2,
|
|
> h3,
|
|
> h4,
|
|
> h5,
|
|
> h6,
|
|
> legend {
|
|
@include h3;
|
|
|
|
margin: ($gap * 4) 0;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.usa-sr-only {
|
|
+ .usa-input {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--warning {
|
|
@include alert-level("warning");
|
|
|
|
display: block;
|
|
}
|
|
|
|
&--error {
|
|
@include alert-level("error");
|
|
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.usa-input.date-picker {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
|
|
.date-picker-component {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
legend {
|
|
@include h4;
|
|
}
|
|
|
|
label {
|
|
font-weight: 400;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
|
|
&::-webkit-inner-spin-button {
|
|
appearance: none;
|
|
}
|
|
}
|
|
|
|
input.usa-input-error {
|
|
padding-left: 11px;
|
|
right: 0;
|
|
|
|
&:focus {
|
|
border-color: $color-red !important;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.usa-form-group-date-ok {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
p.usa-input-error-message {
|
|
display: inline-block;
|
|
line-height: 26px;
|
|
margin-bottom: 0;
|
|
padding-top: 10px;
|
|
visibility: hidden;
|
|
width: 100%;
|
|
|
|
&.form-has-errors {
|
|
visibility: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input__inline-fields {
|
|
margin: 1rem 0;
|
|
|
|
&--indented {
|
|
margin-left: $gap * 4;
|
|
}
|
|
|
|
& > fieldset.usa-input__choices label {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.form-container {
|
|
margin-bottom: $action-footer-height + $large-spacing;
|
|
|
|
&--narrow {
|
|
max-width: $max-input-width;
|
|
}
|
|
}
|