51 lines
850 B
SCSS
51 lines
850 B
SCSS
.form-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
|
|
&:not(.form-row--padded):not(:last-of-type) {
|
|
margin-bottom: var(--spacing-medium);
|
|
}
|
|
|
|
.form-field {
|
|
&:not(:first-of-type) {
|
|
padding-left: var(--spacing-medium);
|
|
}
|
|
|
|
&.form-field--stretch {
|
|
width: 100%;
|
|
|
|
input {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
button + input,
|
|
input + button {
|
|
margin-left: var(--spacing-medium);
|
|
}
|
|
}
|
|
|
|
.form-row--centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-row--padded {
|
|
// Ignore the class name, margin allows these to collapse with other items
|
|
margin-top: var(--spacing-large);
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
|
|
.form-row--right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.form-row--stretch {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-row--vertically-centered {
|
|
align-items: center;
|
|
}
|