Permalink
Browse files

feat(footer): added class for horizontal link list

  • Loading branch information...
lara-aigmueller committed Sep 1, 2017
1 parent 63adfd0 commit 156352d660ab2de394867a2bc052c2676db607ce
View
@@ -58,12 +58,13 @@ The Groundhog **footer** component visually enhances the standard html `<footer>
```
## Available classes for footer
| attribute name | effect |
| class name | effect |
|------------|--------|
| `footer` | Sets the basic styling for the footer element |
| `footer__sociallink` | Sets the styling for the social buttons |
| `footer__columns` | Defines the link list area |
| `footer__column__group` | Defines a column group |
| `footer__column__separated` | Sets the styling for separated columns |
| `footer__linklist` | Sets the styling for the link list columns |
| `footer__linkitem` | Sets link styling to list elements |
| `.footer` | Sets the basic styling for the footer element |
| `.footer__sociallink` | Sets the styling for the social buttons |
| `.footer__columns` | Defines the link list area |
| `.footer__column__group` | Defines a column group |
| `.footer__column__separated` | Sets the styling for separated columns |
| `.footer__linklist` | Sets the styling for the link list |
| `.footer__linklist--horizontal` | Sets the styling for the horizontal link list |
| `.footer__linkitem` | Sets link styling to list elements |
View
@@ -87,3 +87,12 @@ $column-width: 180px !default;
.footer__sociallink + .footer__sociallink {
margin-left: 1rem;
}
.footer__linklist--horizontal .footer__linkitem {
display: inline-block;
}
.footer__linklist--horizontal .footer__linkitem + .footer__linkitem:before {
content: " | ";
color: #fff;
}
@@ -0,0 +1,57 @@
<footer class="footer">
<div class="footer__socials theme--dark">
<h3>Join us on</h3>
<a href="https://www.kununu.com/at/dynatrace" class="footer__sociallink">
<svg viewBox="0 0 23 23">
<title>Kununu</title>
<path class="st0" d="M16.6,8.7l0.5,0.5c0.3,0.3,0.7,0.3,1,0L18.2,9c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1c-0.1,0.1-0.1,0.2,0,0.2l0.5,0.5c0.1,0.1,0.1,0.2,0,0.3l-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1C16.5,8.4,16.5,8.6,16.6,8.7L16.6,8.7z"></path> <path d="M15.3,7.3c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l-0.5-0.5c-0.1-0.1-0.1-0.2,0-0.3l0.1-0.1 c0.1-0.1,0.2-0.1,0.3,0L16,6.6c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l0,0l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0l-0.1,0.1 c-0.3,0.3-0.3,0.7,0,0.9L15.3,7.3z"></path> <path d="M16.7,6.6c0.1,0.1,0.2,0.1,0.3,0l0.5-0.5c0.1-0.1,0.2-0.1,0.3,0l0.1,0.1c0.1,0.1,0.1,0.2,0,0.3L17.3,7 c-0.1,0.1-0.1,0.2,0,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.3,0l0,0l0.5-0.5c0.3-0.3,0.3-0.7,0-0.9l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-0.5,0.5 C16.5,6.4,16.5,6.5,16.7,6.6L16.7,6.6z"></path> <path d="M14.8,9.1c0.3,0.3,0.7,0.3,1,0l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l-0.5,0.5 c-0.1,0.1-0.2,0.1-0.3,0l-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l0,0 l-0.5,0.5C14.5,8.4,14.5,8.8,14.8,9.1L14.8,9.1z"></path> <path d="M5,19.2h2.1c0.2,0,0.4-0.2,0.4-0.3V16h0c0-0.8,0.6-1.4,1.4-1.4h0.7c0.8,0,1.4,0.6,1.4,1.4v0.7h0v2.2 c0,0.2,0.2,0.3,0.4,0.3h2.1c0.2,0,0.4-0.2,0.4-0.3l0-2.2V16c0-1.1-0.4-2-1.1-2.8c0.7-0.7,1.1-1.7,1.1-2.7V9.8h0 c0-0.2-0.2-0.3-0.3-0.3h-2.1c-0.2,0-0.3,0.1-0.3,0.3l0,0.7c0,0.7-0.6,1.4-1.4,1.4v0H8.9c-0.5,0-1,0.1-1.4,0.2V6.1 c0-0.2-0.2-0.3-0.4-0.3H5c-0.2,0-0.4,0.2-0.4,0.3v12.8C4.6,19.1,4.8,19.2,5,19.2z"></path>
</svg>
</a>
<a href="https://www.facebook.com/Dynatrace/" class="footer__sociallink">
<svg viewBox="0 0 23 23">
<title>Facebook</title>
<path d="M9.6,20.1v-7.3H7.2V9.6h2.4V8.4c0-2.2,1.6-4.1,3.6-4.1h2.6v3.2h-2.6c-0.3,0-0.6,0.3-0.6,0.9v1.3 h3.2v3.2h-3.2v7.3H9.6z"></path>
</svg>
</a>
<a href="https://twitter.com/Dynatrace" class="footer__sociallink">
<svg viewBox="0 0 23 23">
<title>Twitter</title>
<path id="twitter" d="M14.4,5.6c1.3,0,2,0.4,2.6,1c0.6,0,1.3-0.4,1.7-0.6c0.1-0.1,0.3-0.2,0.4-0.2 C19,6.5,18.6,7,18.1,7.4c-0.1,0.1-0.2,0.2-0.4,0.3v0c0.7,0,1.3-0.3,1.9-0.5v0c-0.3,0.5-0.7,1-1.1,1.3c-0.2,0.1-0.3,0.3-0.5,0.4 c0,0.8,0,1.5-0.2,2.1c-0.8,3.8-3,6.3-6.5,7.4C10,18.8,8,19,6.6,18.6c-0.7-0.2-1.4-0.4-2-0.6c-0.3-0.1-0.6-0.3-0.9-0.5 c-0.1-0.1-0.2-0.1-0.3-0.2c0.3,0,0.7,0.1,1.1,0c0.3-0.1,0.7,0,1-0.1c0.8-0.2,1.4-0.4,2-0.7c0.3-0.2,0.7-0.4,0.9-0.6 c-0.4,0-0.7-0.1-1-0.2c-1.1-0.4-1.7-1.1-2.1-2.1c0.3,0,1.3,0.1,1.5-0.1c-0.4,0-0.8-0.3-1.1-0.4C4.7,12.6,4,11.7,4,10.2 c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.4,0.1,0.7,0.2c0.1,0,0.3,0.1,0.5,0c0,0,0,0,0,0c-0.2-0.2-0.4-0.3-0.6-0.5 c-0.6-0.7-1.1-1.8-0.7-3c0.1-0.3,0.2-0.6,0.4-0.9c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0.3,0.4,0.6,0.7,1,1c1.2,1,2.3,1.5,4.1,2 c0.4,0.1,1,0.2,1.5,0.2c-0.2-0.4-0.1-1.1,0-1.6c0.3-1.1,0.9-1.8,1.9-2.2c0.2-0.1,0.5-0.2,0.7-0.2C14.2,5.6,14.3,5.6,14.4,5.6z"></path>
</svg>
</a>
<a href="https://www.linkedin.com/company/dynatrace" class="footer__sociallink">
<svg viewBox="0 0 23 23">
<title>Linkedin</title>
<path d="M7.5,19.1V9.8H4.4v9.4H7.5z M6,8.5c1.1,0,1.8-0.7,1.8-1.6 C7.7,6,7.1,5.3,6,5.3C4.9,5.3,4.2,6,4.2,6.9C4.2,7.8,4.9,8.5,6,8.5L6,8.5L6,8.5z"></path>
<path d="M9.3,19.1h3.1v-5.2c0-0.3,0-0.6,0.1-0.8 c0.2-0.6,0.7-1.1,1.6-1.1c1.1,0,1.6,0.9,1.6,2.1v5h3.1v-5.4c0-2.9-1.5-4.2-3.6-4.2c-1.7,0-2.4,0.9-2.8,1.6h0V9.8H9.3 C9.3,10.7,9.3,19.1,9.3,19.1L9.3,19.1z"></path>
</svg>
</a>
<a href="https://plus.google.com/+dynatrace/about" class="footer__sociallink">
<svg viewBox="0 0 23 23">
<title>Google+</title>
<path d="M2.9,11.2c0-2.8,2.6-5.3,5.5-5.2C9.7,6,11,6.6,12,7.4c-0.4,0.5-0.9,1-1.4,1.4C9.4,8,7.6,7.7,6.4,8.7
c-1.8,1.2-1.9,4.1-0.1,5.5c1.7,1.5,4.8,0.8,5.3-1.6c-1,0-2.1,0-3.1,0c0-0.6,0-1.2,0-1.9c1.7,0,3.5,0,5.2,0c0.1,1.5-0.1,3-1,4.2
c-1.4,1.9-4.1,2.5-6.2,1.7C4.2,15.8,2.7,13.5,2.9,11.2z"></path> <path d="M17,9.1c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c-0.5,0-1,0-1.6,0c0,0.5,0,1,0,1.6
c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c0.5,0,1,0,1.6,0C17,10.2,17,9.7,17,9.1z"></path>
</svg>
</a>
</div>
<div class="footer__legal">
<p>&copy; 2017 Dynatrace LLC. All Rights Reserved</p>
<ul class="footer__linklist footer__linklist--horizontal">
<li class="footer__linkitem">
<a href="#noop">Security</a>
</li>
<li class="footer__linkitem">
<a href="#noop">Privacy</a>
</li>
<li class="footer__linkitem">
<a href="#noop">Legal</a>
</li>
<li class="footer__linkitem">
<a href="#noop">Contact</a>
</li>
</ul>
</div>
</footer>

0 comments on commit 156352d

Please sign in to comment.