From 7eaa41c0e965ac14f23fc6f9763b61981109f31f Mon Sep 17 00:00:00 2001
From: Leonhard Strohmidel <strohmidel@sitepark.com>
Date: Fri, 31 Jul 2020 16:54:35 +0200
Subject: [PATCH] Base style for input

---
 components/01_Atoms/_atoms.scss             |  3 +-
 components/01_Atoms/input/_input.scss       | 67 +++++++++++++++++++++
 components/01_Atoms/input/input.config.json |  3 +
 components/01_Atoms/input/input.hbs         |  5 ++
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 components/01_Atoms/input/_input.scss
 create mode 100644 components/01_Atoms/input/input.config.json
 create mode 100644 components/01_Atoms/input/input.hbs

diff --git a/components/01_Atoms/_atoms.scss b/components/01_Atoms/_atoms.scss
index c295569..8141cf9 100644
--- a/components/01_Atoms/_atoms.scss
+++ b/components/01_Atoms/_atoms.scss
@@ -1,4 +1,5 @@
 @import 'link/link';
 @import 'headline/headline';
 @import 'text/text';
-@import 'icon/icon';
\ No newline at end of file
+@import 'icon/icon';
+@import 'input/input';
\ No newline at end of file
diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss
new file mode 100644
index 0000000..e6dcf2e
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/01_Atoms/input/input.config.json b/components/01_Atoms/input/input.config.json
new file mode 100644
index 0000000..544b7b4
--- /dev/null
+++ b/components/01_Atoms/input/input.config.json
@@ -0,0 +1,3 @@
+{
+    
+}
\ No newline at end of file
diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs
new file mode 100644
index 0000000..13f2b1b
--- /dev/null
+++ b/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>
\ No newline at end of file