Base style for input

components/01_Atoms/_atoms.scss

@@ -2,3 +2,4 @@
 @import 'headline/headline';
 @import 'text/text';
 @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>