Adapting Form
This commit is contained in:
parent
dd69cbbaaf
commit
bbcbd19ef5
@ -3,7 +3,7 @@
|
||||
@import 'placeList/placeList';
|
||||
@import 'linkList/linkList';
|
||||
@import 'footer/footer';
|
||||
//@import 'form/form';
|
||||
@import 'form/form';
|
||||
//@import 'imageGrid/imageGrid';
|
||||
//@import 'osmMap/osmMap';
|
||||
//@import 'userProfile/userProfile';
|
||||
|
@ -16,7 +16,8 @@
|
||||
}
|
||||
|
||||
.LP-Form__Button {
|
||||
@include RV-FlexRow__Item--fixedSize(max-content);
|
||||
@include RV-Flex__Item--fixedSize;
|
||||
--fixed-size: max-content;
|
||||
}
|
||||
|
||||
fieldset.LP-Form__Fieldset {
|
||||
@ -31,23 +32,25 @@
|
||||
&:not(.LP-Form--inline) {
|
||||
.LP-Form__Composition {
|
||||
@media(max-width: $-viewport-extra-small) {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
@include RV-Flex--wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Button {
|
||||
@include RV-FlexRow__Item--fixedSize(130px);
|
||||
@include RV-Flex__Item--fixedSize;
|
||||
--fixedSize: 130px;
|
||||
|
||||
@media(max-width: $-viewport-extra-small) {
|
||||
@include RV-FlexRow__Item--fixedSize(100%);
|
||||
@include RV-Flex__Item--fixedSize;
|
||||
--fixedSize: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Fieldset {
|
||||
@include RV-Reset;
|
||||
max-width: 1200px;
|
||||
min-width: $-viewport-medium;
|
||||
border: none;
|
||||
|
||||
@media(max-width: $-viewport-medium) {
|
||||
min-width: unset;
|
||||
@ -62,23 +65,23 @@
|
||||
}
|
||||
|
||||
.LP-Form__Composition {
|
||||
@include RV-FlexRow__Container;
|
||||
@include RV-Spacing__Inner--small('');
|
||||
@include RV-Flex;
|
||||
gap: $-spacing-small;
|
||||
|
||||
&--breakable {
|
||||
@media(max-width: $-viewport-small) {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
@include RV-Flex--wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&--buttons {
|
||||
justify-content: flex-end;
|
||||
@include RV-Spacing__Inner--small;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Field {
|
||||
@include RV-FlexRow__Item;
|
||||
@include RV-Flex__Item;
|
||||
}
|
||||
|
||||
.LP-Form__InfoText {
|
||||
|
@ -27223,5 +27223,86 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
.LP-Form--tagging {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.LP-Form--tagging div.LP-Form__Composition {
|
||||
gap: 25px;
|
||||
}
|
||||
.LP-Form--inline .LP-Form__Legend,
|
||||
.LP-Form--inline .LP-Input__Label {
|
||||
display: none;
|
||||
}
|
||||
.LP-Form--inline .LP-Form__Button {
|
||||
flex-basis: var(--fixedSize);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
--fixed-size: max-content;
|
||||
}
|
||||
.LP-Form--inline fieldset.LP-Form__Fieldset {
|
||||
max-width: unset;
|
||||
}
|
||||
.LP-Form--inline div.LP-Form__Composition {
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
.LP-Form:not(.LP-Form--inline) .LP-Form__Composition {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.LP-Form:not(.LP-Form--inline) .LP-Form__Button {
|
||||
flex-basis: var(--fixedSize);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
--fixedSize: 130px;
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
.LP-Form:not(.LP-Form--inline) .LP-Form__Button {
|
||||
flex-basis: var(--fixedSize);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
--fixedSize: 100%;
|
||||
}
|
||||
}
|
||||
.LP-Form .LP-Form__Fieldset {
|
||||
max-width: 1200px;
|
||||
min-width: 750px;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
.LP-Form .LP-Form__Fieldset {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
.LP-Form .LP-Form__Legend {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Montserrat", Helvetica, sans-serif;
|
||||
font-size: 21px;
|
||||
}
|
||||
.LP-Form .LP-Form__Composition {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.LP-Form .LP-Form__Composition--breakable {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.LP-Form .LP-Form__Composition--buttons {
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
}
|
||||
.LP-Form .LP-Form__Field {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 5;
|
||||
}
|
||||
.LP-Form .LP-Form__InfoText .LP-Paragraph {
|
||||
font-family: "Montserrat", Helvetica, sans-serif;
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user