I honstly lost of what I did, but its definitly worth it
This commit is contained in:
59
components/03_Organisms/linkList/_linkList.scss
Normal file
59
components/03_Organisms/linkList/_linkList.scss
Normal 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;
|
||||
}
|
3
components/03_Organisms/linkList/linkLilst.config.json
Normal file
3
components/03_Organisms/linkList/linkLilst.config.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "LinkList"
|
||||
}
|
19
components/03_Organisms/linkList/linkList.hbs
Normal file
19
components/03_Organisms/linkList/linkList.hbs
Normal 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>
|
Reference in New Issue
Block a user