Using New Input classes in Forms

components/01_Atoms/_atoms.scss

@@ -1,4 +1,5 @@
 @import 'link/link';
 @import 'headline/headline';
 @import 'text/text';
-@import 'icon/icon';
+@import 'icon/icon';
+@import 'input/input';

components/01_Atoms/input/_input.scss

@@ -0,0 +1,67 @@
+.LP-Input{
+    $-margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: -$-margin-bottom;
+    padding: 10px 0;
+
+    .LP-Input__Field{
+        border: none;
+        border-bottom: 1px solid $-secondary-color;
+        padding: 8px;
+        margin-bottom: $-margin-bottom;
+
+        &:focus, &:active{
+            margin-bottom: $-margin-bottom - 1px;
+            border-bottom: 2px solid $-primary-accent-color;
+            background-color: $-secondary-background-color;
+            border-radius: 3px 3px 0 0;
+        }
+    }
+    .LP-Input__Label{
+        font-family: $-primary-sans-serif-font;
+        font-size: 18px;
+    }
+    .LP-Input__Message{
+        font-family: $-primary-sans-serif-font;
+        font-style: italic;
+        font-size: 13px;
+        padding: 3px;
+        position: relative;
+        top: -$-margin-bottom;
+
+        &:before{
+            content: '* ';
+        }
+    }
+
+    &--error{
+        .LP-Input__Field{
+            margin-bottom: 25px;
+            border-bottom: 2px solid $-primary-accent-color;
+            margin-bottom: $-margin-bottom - 1px;
+        }
+
+        .LP-Input__Message{
+            color: $-primary-accent-color;
+        }
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-Input{
+        .LP-Input__Label{
+            font-family: $-primary-sans-serif-font;
+            font-size: 2.5vw;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Input{
+        .LP-Input__Label{
+            font-family: $-primary-sans-serif-font;
+            font-size: 18px;
+        }
+    }
+}

components/01_Atoms/input/input.config.json

@@ -0,0 +1,3 @@
+{
+    
+}

components/01_Atoms/input/input.hbs

@@ -0,0 +1,5 @@
+<div class="LP-Input">
+    <label for="input123" class="LP-Input__Label">First name</label>
+    <input type="text" id="input123" class="LP-Input__Field"/>
+    <span class="LP-Input__Message">Field is required</span>
+</div>

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;
+                }
+            }
+        }
+    }
+}

components/02_Molecules/form/form.config.json

@@ -0,0 +1,3 @@
+{
+    
+}

components/02_Molecules/form/form.hbs

@@ -1,14 +1,42 @@
 <form class="LP-Form">
     <fieldset class="LP-Form__Fieldset">
         <legend class="LP-Form__Legend">Basic data</legend>
-        <div class="LP-Form__Row">
+
-            <span class="LP-Form__Field">
+        <div class="LP-Form__Composition LP-Form__Composition--breakable">
-                <label for="textinput123" class="LP-Input__Label">Enter your text here</label>
+            <span class="LP-Form__Field LP-Input LP-Input--error">
-                <input id="textinput123" type="text" class="LP-Input__Text"/>
+                <label for="input123" class="LP-Input__Label">First name</label>
-                <span class="LP-Input__ErrorMessage">
+                <input type="text" id="input123" class="LP-Input__Field"/>
-                    <p>Text is required</p>
+                <span class="LP-Input__Message">Field is required</span>
-                </span>
+            </span>
+            <span class="LP-Form__Field LP-Input">
+                <label for="input123" class="LP-Input__Label">Last name</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
             </span>
         </div>
+
+        <div class="LP-Form__Composition">
+            <span class="LP-Form__Field LP-Form__Field--wider LP-Input">
+                <label for="input123" class="LP-Input__Label">Street</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">We won't send any stalkers, promise</span>
+            </span>
+            <span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
+                <label for="input123" class="LP-Input__Label">House no</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">Field is required</span>
+            </span>
+        </div>
+
+        <div class="LP-Form__Composition">
+            <span class="LP-Form__Field LP-Form__Field--narrow LP-Input">
+                <label for="input123" class="LP-Input__Label">Postal Code</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+            </span>
+            <span class="LP-Form__Field LP-Form__Field--wide LP-Input">
+                <label for="input123" class="LP-Input__Label">Town</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+            </span>
+        </div>
+
     </fieldset>
 </form>

components/components.scss

@@ -1,12 +1,18 @@
 @font-face {
     font-family: Crimson;
     src:
-        url('fonts/CrimsonText-Regular.ttf'),
+        url('fonts/Crimson/CrimsonText-Regular.ttf'),
-        url('fonts/CrimsonText-Bold.ttf'),
+        url('fonts/Crimson/CrimsonText-Bold.ttf'),
-        url('fonts/CrimsonText-Italic.ttf'),
+        url('fonts/Crimson/CrimsonText-Italic.ttf')
-        url('fonts/CrimsonText-BoldItalic.ttf'),
+        ;
-        url('fonts/CrimsonText-SemiBold.ttf'),
+  }
-        url('fonts/CrimsonText-SemiBoldItalic.ttf')
+
+  @font-face {
+    font-family: Montserrat;
+    src:
+        url('fonts/Montserrat/Montserrat-Regular.ttf'),
+        url('fonts/Montserrat/Montserrat-Bold.ttf'),
+        url('fonts/Montserrat/Montserrat-Italic.ttf')
         ;
   }
 
@@ -16,11 +22,12 @@ $-primary-accent-color: #76323F;
 $-secondary-accent-color: #C09F80;
 $-secondary-background-color: #f9f9f9;
 
-$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif;
+$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
 $-primary-serif-font: Crimson, Times, serif;
 $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
 
 $-viewport-small: 650px;
+$-viewport-extra-small: 390px;
 
 
 @import '01_Atoms/atoms';