Adapting Form

components/03_Organisms/_organisms.scss

@@ -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';

components/03_Organisms/form/_form.scss

@@ -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 {

public/main.css

@@ -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 */