From 8fa8033be46abb05be238cd212359eec18acd98c Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Fri, 21 Aug 2020 10:51:07 +0200
Subject: [PATCH] LinkList add LInk

---
 .../03_Organisms/linkList/_linkList.scss      | 22 ++++++++++++++++
 components/03_Organisms/linkList/linkList.hbs | 26 ++++++++++++++++---
 public/main.css                               | 14 +++++++++-
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss
index 464ab5d..500874b 100644
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -9,6 +9,28 @@
         border-left: 1px solid $-light-brown;
         width: calc(100% - 1px);
         margin-top: 12px;
+        position: relative;
+
+        &--add{
+            input[type=checkbox]:checked ~ .LP-LinkList__Add{
+                display: block;
+            }
+            
+            .LP-LinkList__Add{
+                position: absolute;
+                top: 7px;
+                display: none;
+                
+                .LP-Form__Fieldset{
+                    min-width:unset;
+                }
+
+                .LP-Form{
+                    display: block;
+                    min-width: 0px;
+                }
+            }
+        }
 
         .LP-Link{
             $-link-padding: 1em;
diff --git a/components/03_Organisms/linkList/linkList.hbs b/components/03_Organisms/linkList/linkList.hbs
index f6ff720..68829ec 100644
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -6,8 +6,11 @@
         <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
         <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
         <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-        <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
-             <div class="LP-Link__IconWrapper">
+        <li class="LP-LinkList__Item LP-LinkList__Item--add">
+            <input type="checkbox" id="wurstwurst" style="display: none"/>
+            <label for="wurstwurst">
+            <span class="LP-Link LP-Link--iconized">
+                <div class="LP-Link__IconWrapper">
                 <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                     xml:space="preserve">
@@ -16,7 +19,22 @@
         v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
                     </g>
                 </svg>
-            </div>
-            <span class="LP-Text">Link hinzufügen</span></a></li>
+                </div>
+                <span class="LP-Text">Link hinzufügen</span>
+            </span>
+            </label>
+        <span class="LP-LinkList__Add">
+            <form class="LP-Form">
+                <fieldset class="LP-Form__Fieldset">
+                    <div class="LP-Input">
+                        <button class="LP-Button">Add</button>
+                    </div>
+                    <div class="LP-Input">
+                        <input class="LP-Input__Field" type="url"/>
+                    </div>
+                </fieldset>
+            </form>
+        </span>
+        </li>
     </ul>
 </div>
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 5af6813..c2b8c50 100644
--- a/public/main.css
+++ b/public/main.css
@@ -592,7 +592,19 @@ body {
   .LP-LinkList__List .LP-LinkList__Item {
     border-left: 1px solid #C09F80;
     width: calc(100% - 1px);
-    margin-top: 12px; }
+    margin-top: 12px;
+    position: relative; }
+    .LP-LinkList__List .LP-LinkList__Item--add input[type=checkbox]:checked ~ .LP-LinkList__Add {
+      display: block; }
+    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
+      position: absolute;
+      top: 7px;
+      display: none; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
+        min-width: unset; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
+        display: block;
+        min-width: 0px; }
     .LP-LinkList__List .LP-LinkList__Item .LP-Link {
       padding: 1em 0 1em 1em;
       width: calc(100% - 1em);