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