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

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.

+
+
+
@@ -48,5 +54,14 @@
+
+
+ +
+
+ +
+
+ \ No newline at end of file