From b39202d296e11e5bf7f666406e66e71d4d366c3b Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Wed, 26 Aug 2020 16:48:48 +0200
Subject: [PATCH] Linkadd form

---
 .../03_Organisms/linkList/_linkList.scss      | 42 +++++++++-
 components/03_Organisms/linkList/linkList.hbs | 83 ++++++++++++++-----
 2 files changed, 102 insertions(+), 23 deletions(-)

diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss
index ff77826..9ddc88c 100644
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -20,4 +20,44 @@
 			@include RV-Spacing__Inner--small;
 		}
 	}
-}
\ No newline at end of file
+
+	.LP-LinkAdd{
+		height: 0;
+	}
+
+	.LP-LinkAdd__Container{
+		position: relative;
+		top: -15px;
+		
+	
+		.LP-Form__Fieldset{
+			min-width:unset;
+		}
+	
+		.LP-Form{
+			display: block;
+			min-width: 0px;
+		}
+	}
+
+}
+
+.LP-LinkAdd{
+	display: none;
+}
+
+.LP-LinkAdd__Trigger {
+	display: none;
+}
+
+.LP-LinkAdd__TriggerLabel{
+	cursor: pointer;
+}
+
+.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
+	display: none;
+}
+
+.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
+	display: block;
+}
diff --git a/components/03_Organisms/linkList/linkList.hbs b/components/03_Organisms/linkList/linkList.hbs
index 98f2895..ad096a8 100644
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -1,24 +1,63 @@
 <div class="LP-LinkList">
-	<ul class="LP-LinkList__Container">
-		<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"><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">
-
-					<div class="RV-Iconized__Container RV-Iconized__Container--medium">
-						<svg class="RV-Iconized__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">
-							<g>
-								<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
-	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>
-					<span class="RV-Iconized__Text">Link hinzufügen</span>
-				</div>
-			</a>
-		</li>
-	</ul>
+    <ul class="LP-LinkList__Container">
+        <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"><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">
+            <div class="RV-FlexRow__Container">
+                <a href="#" class="LP-Link RV-FlexRow__Item"><span class="LP-Text">OSM</span></a>
+                <a href="#" class="LP-Link RV-FlexRow__Item RV-FlexRow__Item--fixedSize">
+                    <div class="RV-Iconized__Container RV-Iconized__Container--small">
+                        <svg class="RV-Iconized__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">
+                            <g>
+                                <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
+    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>
+                </a>
+            </div>
+        </li>
+        <li class="LP-LinkList__Item LP-LinkList__Item--add">
+            <input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger"/>
+            <label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
+                <a  class="LP-Link">
+                    <div class="RV-Iconized__Container RV-Iconized__Container--small">
+                        <svg class="RV-Iconized__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">
+                            <g>
+                                <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
+    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>
+                        <span class="RV-Iconized__Text">Link hinzufügen</span>
+                    </div>
+                </a>
+            </label>
+            <div class="LP-LinkAdd">
+                <span class="LP-LinkAdd__Container">
+                    <form class="LP-Form LP-Form--inline">
+                        <fieldset class="LP-Form__Fieldset">
+                            <legend class="LP-Form__Legend">Basic data</legend>
+                            <div class="LP-Form__Composition LP-Form__Composition--buttons">
+                                <div class="LP-Form__Field LP-Form__Button LP-Input">
+                                    <input type="submit" class="LP-Button" value="Submit" />
+                                </div>
+                                <div class="LP-Form__Field LP-Form__Field--narrower">
+                                    <div class="LP-Input">
+                                        <label for="input123" class="LP-Input__Label">Link URL</label>
+                                        <input type="text" id="input123" class="LP-Input__Field" />
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </form>
+                </span>
+            </div>
+        </li>
+    </ul>
 </div>
\ No newline at end of file