Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adapting Form

Browse Source
This commit is contained in:
reverend 2021-10-24 18:28:09 +02:00
parent dd69cbbaaf
commit bbcbd19ef5
4 changed files with 96 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/03_Organisms/_organisms.scss
View File

@ -3,7 +3,7 @@
@import 'placeList/placeList'; @import 'placeList/placeList';
@import 'linkList/linkList'; @import 'linkList/linkList';
@import 'footer/footer'; @import 'footer/footer';
//@import 'form/form'; @import 'form/form';
//@import 'imageGrid/imageGrid'; //@import 'imageGrid/imageGrid';
//@import 'osmMap/osmMap'; //@import 'osmMap/osmMap';
//@import 'userProfile/userProfile'; //@import 'userProfile/userProfile';

23
components/03_Organisms/form/_form.scss
View File

@ -16,7 +16,8 @@
} }
.LP-Form__Button { .LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(max-content); @include RV-Flex__Item--fixedSize;
--fixed-size: max-content;
} }
fieldset.LP-Form__Fieldset { fieldset.LP-Form__Fieldset {
@ -31,23 +32,25 @@
&:not(.LP-Form--inline) { &:not(.LP-Form--inline) {
.LP-Form__Composition { .LP-Form__Composition {
@media(max-width: $-viewport-extra-small) { @media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Container--multiRow; @include RV-Flex--wrap;
} }
} }
.LP-Form__Button { .LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(130px); @include RV-Flex__Item--fixedSize;
--fixedSize: 130px;
@media(max-width: $-viewport-extra-small) { @media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%); @include RV-Flex__Item--fixedSize;
--fixedSize: 100%;
} }
} }
} }
.LP-Form__Fieldset { .LP-Form__Fieldset {
@include RV-Reset;
max-width: 1200px; max-width: 1200px;
min-width: $-viewport-medium; min-width: $-viewport-medium;
border: none;
@media(max-width: $-viewport-medium) { @media(max-width: $-viewport-medium) {
min-width: unset; min-width: unset;
@ -62,23 +65,23 @@
} }
.LP-Form__Composition { .LP-Form__Composition {
@include RV-FlexRow__Container; @include RV-Flex;
@include RV-Spacing__Inner--small(''); gap: $-spacing-small;
&--breakable { &--breakable {
@media(max-width: $-viewport-small) { @media(max-width: $-viewport-small) {
@include RV-FlexRow__Container--multiRow; @include RV-Flex--wrap;
} }
} }
&--buttons { &--buttons {
justify-content: flex-end; justify-content: flex-end;
@include RV-Spacing__Inner--small; gap: 20px;
} }
} }
.LP-Form__Field { .LP-Form__Field {
@include RV-FlexRow__Item; @include RV-Flex__Item;
} }
.LP-Form__InfoText { .LP-Form__InfoText {

81
public/main.css
View File

@ -27223,5 +27223,86 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
font-size: 1.3em; 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 */ /*# sourceMappingURL=main.css.map */

2
public/main.css.map
View File

File diff suppressed because one or more lines are too long