Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

LinkList add LInk

Browse Source
This commit is contained in:
reverend 2020-08-21 10:51:07 +02:00
parent b64724b586
commit 8fa8033be4
3 changed files with 57 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/03_Organisms/linkList/_linkList.scss
View File

@ -9,6 +9,28 @@
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: calc(100% - 1px); width: calc(100% - 1px);
margin-top: 12px; 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{ .LP-Link{
$-link-padding: 1em; $-link-padding: 1em;

26
components/03_Organisms/linkList/linkList.hbs
View File

@ -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">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">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">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized"> <li class="LP-LinkList__Item LP-LinkList__Item--add">
<div class="LP-Link__IconWrapper"> <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" <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" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
xml:space="preserve"> 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" /> 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> </g>
</svg> </svg>
</div> </div>
<span class="LP-Text">Link hinzufügen</span></a></li> <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> </ul>
</div> </div>

14
public/main.css
View File

@ -592,7 +592,19 @@ body {
.LP-LinkList__List .LP-LinkList__Item { .LP-LinkList__List .LP-LinkList__Item {
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
width: calc(100% - 1px); 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 { .LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em; padding: 1em 0 1em 1em;
width: calc(100% - 1em); width: calc(100% - 1em);