115 lines
1.6 KiB
SCSS
115 lines
1.6 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 {
|
|
max-width: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media($medium-screen) {
|
|
@include grid-row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
.form-col {
|
|
&.form-col--half {
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
&.form-col--third {
|
|
flex-basis: 33.33%;
|
|
}
|
|
|
|
&.form-col--two-thirds {
|
|
flex-basis: 66.66%;
|
|
}
|
|
|
|
.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');
|
|
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;
|
|
}
|
|
}
|
|
|