diff --git a/components/02_Molecules/form/_form.scss b/components/02_Molecules/form/_form.scss index e69de29..5729e65 100644 --- a/components/02_Molecules/form/_form.scss +++ b/components/02_Molecules/form/_form.scss @@ -0,0 +1,70 @@ +.LP-Form{ + max-width: 900px; + .LP-Form__Fieldset{ + border: none; + + .LP-Form__Legend{ + margin: 0; + padding: 0; + } + + .LP-Form__Composition{ + display: flex; + flex-direction: row; + justify-content: space-between; + + .LP-Form__Field{ + flex: 3 1 100px; + padding: 0 15px; + + &--wider{ + flex: 5 1 200px; + } + + &--wide{ + flex: 4 1 150px; + } + + &--narrow{ + flex: 2 0 50px; + } + + &--narrower{ + flex: 1 0 25px; + } + + input{ + width: 100%; + } + } + } + } +} + +@media(max-width: $-viewport-small){ + .LP-Form{ + .LP-Form__Fieldset{ + .LP-Form__Composition--breakable{ + display: flex; + flex-direction: column; + justify-content: space-between; + } + } + } +} + +@media(max-width: $-viewport-extra-small){ + .LP-Form{ + .LP-Form__Fieldset{ + .LP-Form__Composition{ + display: flex; + flex-direction: column; + justify-content: space-between; + + .LP-Form__Field{ + flex: 3 1 100px; + } + } + } + } +} \ No newline at end of file diff --git a/components/02_Molecules/form/form.config.json b/components/02_Molecules/form/form.config.json index e69de29..544b7b4 100644 --- a/components/02_Molecules/form/form.config.json +++ b/components/02_Molecules/form/form.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/02_Molecules/form/form.hbs b/components/02_Molecules/form/form.hbs index 9070692..cf11e5a 100644 --- a/components/02_Molecules/form/form.hbs +++ b/components/02_Molecules/form/form.hbs @@ -1,14 +1,42 @@
Basic data -
- - - - -

Text is required

-
+ +
+ + + + Field is required + + + +
+ +
+ + + + We won't send any stalkers, promise + + + + + Field is required + +
+ +
+ + + + + + + + +
+
\ No newline at end of file