LinkList add LInk
This commit is contained in:
parent
b64724b586
commit
8fa8033be4
@ -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;
|
||||
|
@ -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>
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user