atst/styles/components/_forms.scss
2018-08-17 14:36:03 -04:00

89 lines
1.2 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;
}
}
}
@include media($medium-screen) {
@include grid-row;
align-items: flex-start;
.form-col {
.usa-input {
margin-left: ($gap * 4);
margin-right: ($gap * 4);
}
&: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;
}
}