General form styles
This commit is contained in:
parent
c05e72d98f
commit
22ccd237bf
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
@import 'core/grid';
|
@import 'core/grid';
|
||||||
@import 'core/util';
|
@import 'core/util';
|
||||||
|
@import 'core/transitions';
|
||||||
|
|
||||||
@import 'elements/typography';
|
@import 'elements/typography';
|
||||||
@import 'elements/icons';
|
@import 'elements/icons';
|
||||||
@ -30,6 +31,7 @@
|
|||||||
@import 'components/footer';
|
@import 'components/footer';
|
||||||
@import 'components/progress_menu.scss';
|
@import 'components/progress_menu.scss';
|
||||||
@import 'components/search_bar';
|
@import 'components/search_bar';
|
||||||
|
@import 'components/forms';
|
||||||
|
|
||||||
@import 'sections/login';
|
@import 'sections/login';
|
||||||
@import 'sections/request_approval';
|
@import 'sections/request_approval';
|
||||||
|
88
styles/components/_forms.scss
Normal file
88
styles/components/_forms.scss
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
// 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 {
|
||||||
|
// background-color: $color-aqua-lightest;
|
||||||
|
// padding: $gap;
|
||||||
|
// margin: ($gap * 4) 0;
|
||||||
|
@include alert;
|
||||||
|
@include alert-level('default');
|
||||||
|
|
||||||
|
// @include media($medium-screen) {
|
||||||
|
// padding: $gap * 2;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @include media($large-screen) {
|
||||||
|
// padding: $gap * 4;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -225,49 +225,3 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user