Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend

components/01_Atoms/_atoms.scss

@@ -4,4 +4,5 @@
 @import 'icon/icon';
 @import 'textField/textField';
 @import 'button/button';
-@import 'checkbox/checkbox';
+@import 'checkbox/checkbox';
+@import 'input/input';

components/01_Atoms/input/_input.scss

@@ -0,0 +1,89 @@
+.LP-Input:has( .LP-Input__Field:disabled){
+    background-color: red;
+}
+
+.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;
+        }
+
+        &:disabled{
+            background-color: transparent;
+            border-bottom: 1px dashed $-secondary-color;
+            cursor: not-allowed;
+
+            &:active{
+                margin-bottom: $-margin-bottom;
+                border-radius: 0;
+            }
+
+            ~.LP-Input__Message{
+                visibility: hidden;
+            }
+            
+        }
+    }
+
+    .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,10 @@
+<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>
+<div class="LP-Input">
+    <label for="input123" class="LP-Input__Label">First name</label>
+    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
+    <span class="LP-Input__Message">Field is required</span>
+</div>