I honstly lost of what I did, but its definitly worth it

This commit is contained in:
2020-07-27 18:45:07 +02:00
parent 8828318854
commit 87cc27bcc8
21 changed files with 403 additions and 110 deletions

View File

@@ -0,0 +1,59 @@
.LP-LinkList__List{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
margin: 0;
padding: 0;
.LP-LinkList__Item{
border-left: 1px solid $-secondary-accent-color;
width: 100%;
margin-top: 12px;
height: 55px;
.LP-Link{
$-link-padding: 1em;
padding: $-link-padding 0 $-link-padding $-link-padding;
width: calc(100% - $-link-padding);
display: block;
color: $-secondary-color;
&--iconized{
padding-top: 0;
padding-bottom: 1.1em;
&:hover{
background-color: #ccc !important;
}
.LP-Text{
padding-top: .1em;
}
}
&:hover{
background-color: $-secondary-background-color;
color: $-primary-accent-color;
}
.LP-Text{
color: inherit;
}
}
}
}
.LP-Link__Icon{
width: 2em;
height: 2em;
fill: $-primary-accent-color;
line-height: 5em;
}
.LP-LinkList__Item .LP-Link__Icon{
position: relative;
top: .7em;
margin-right: .6em;
}

View File

@@ -0,0 +1,3 @@
{
"title": "LinkList"
}

View File

@@ -0,0 +1,19 @@
<ul class="LP-LinkList__List">
<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"><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">
<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">
<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>
<span class="LP-Text">Link hinzufügen</span></a></li>
</ul>