lostplaces-frontend/components/03_Organisms/form/_form.scss
2021-10-24 18:28:09 +02:00

94 lines
1.8 KiB
SCSS

.LP-Form {
&--tagging {
margin-top: 25px;
div.LP-Form__Composition {
gap: 25px;
}
}
&--inline {
.LP-Form__Legend,
.LP-Input__Label {
display: none;
}
.LP-Form__Button {
@include RV-Flex__Item--fixedSize;
--fixed-size: max-content;
}
fieldset.LP-Form__Fieldset {
max-width: unset;
}
div.LP-Form__Composition {
padding: 0;
}
}
&:not(.LP-Form--inline) {
.LP-Form__Composition {
@media(max-width: $-viewport-extra-small) {
@include RV-Flex--wrap;
}
}
.LP-Form__Button {
@include RV-Flex__Item--fixedSize;
--fixedSize: 130px;
@media(max-width: $-viewport-extra-small) {
@include RV-Flex__Item--fixedSize;
--fixedSize: 100%;
}
}
}
.LP-Form__Fieldset {
max-width: 1200px;
min-width: $-viewport-medium;
border: none;
@media(max-width: $-viewport-medium) {
min-width: unset;
}
}
.LP-Form__Legend {
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
.LP-Form__Composition {
@include RV-Flex;
gap: $-spacing-small;
&--breakable {
@media(max-width: $-viewport-small) {
@include RV-Flex--wrap;
}
}
&--buttons {
justify-content: flex-end;
gap: 20px;
}
}
.LP-Form__Field {
@include RV-Flex__Item;
}
.LP-Form__InfoText {
.LP-Paragraph {
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}