From e431d9a1a056ea0bd6a3ba98cd0c03913d8c3541 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Wed, 12 Aug 2020 18:29:08 +0200
Subject: [PATCH] Form squishiness and Button layout

---
 components/03_Organisms/form/_form.scss | 74 ++++++++++++++++++++-----
 components/03_Organisms/form/form.hbs   | 15 +++++
 2 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss
index 1620331..36ad098 100644
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,6 +1,13 @@
 .LP-Form{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
     .LP-Form__Fieldset{
-        border: none;
+		border: none;
+		
+		max-width: 1200px;
+		min-width: $-viewport-medium;
 
         .LP-Form__Legend{
             margin: 0;
@@ -9,42 +16,72 @@
 			font-size: 21px;
         }
 
+
         .LP-Form__Composition{
             display: flex;
             flex-direction: row;
-            justify-content: space-between;
-
+			justify-content: space-between;
+			
             .LP-Form__Field{
-                flex: 3 1 100px;
+                flex: 3 2 100px;
                 padding: 6px 15px;
 
                 &--wider{
-                    flex: 5 1;
+                    flex: 5 2;
                 }
 
                 &--wide{
-                    flex: 4 1;
+                    flex: 4 2;
                 }
 
                 &--narrow{
-                    flex: 2 0;
+                    flex: 2 1;
                 }
 
                 &--narrower{
-                    flex: 1 0;
+                    flex: 1 2;
                 }
-            }
+			}
+
+			&--buttons{
+				justify-content: flex-end;
+			}
+
+			.LP-Form__Button{
+				flex-grow: 0;
+				padding-left: 0;
+				min-width: 130px;
+
+				.LP-Link{
+					display:contents;
+				}
+			}
+			
+			.LP-Form__InfoText{
+				.LP-Paragraph{
+				font-family: $-primary-sans-serif-font;
+				color: $-grey;
+				}
+			}
         }
     }
 }
 
+@media(max-width: $-viewport-medium){
+.LP-Form{
+	.LP-Form__Fieldset{
+		min-width: unset;
+	}
+}
+}
+
 @media(max-width: $-viewport-small){
     .LP-Form{
         .LP-Form__Fieldset{
             .LP-Form__Composition--breakable{
                 display: flex;
                 flex-direction: column;
-                justify-content: space-between;
+				justify-content: space-between;
             }
         }
     }
@@ -59,9 +96,20 @@
                 justify-content: space-between;
 
                 .LP-Form__Field{
-					flex: 3 1 100px;
-					padding: 12px 15px;
-                }
+					
+					&:not(.LP-Form__Button){
+						flex: 3 1 100px;
+						padding: 12px 15px;
+					}
+				}
+				
+				.LP-Form__Button{
+					padding: 0 15px;
+				}
+				
+				&--buttons{
+					justify-content: flex-end;
+				}
             }
         }
     }
diff --git a/components/03_Organisms/form/form.hbs b/components/03_Organisms/form/form.hbs
index 47e6b45..1969592 100644
--- a/components/03_Organisms/form/form.hbs
+++ b/components/03_Organisms/form/form.hbs
@@ -37,6 +37,12 @@
             </div>
         </div>
 
+		<div class="LP-Form__Composition">
+			<div class="LP-Form__Field LP-Form__InfoText">
+				<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+			</div>
+		</div>
+
         <div class="LP-Form__Composition">
             <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
                 <label for="input123" class="LP-Input__Label">Postal Code</label>
@@ -48,5 +54,14 @@
             </div>
         </div>
 
+		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
+                <input type="submit" class="LP-Button" value="Submit"/>
+            </div>
+            <div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
+				<button class="LP-Button LP-Button--cancel">Kenschäll</button>
+            </div>
+        </div>
+
     </fieldset>
 </form>
\ No newline at end of file