<section class="center share-section">
<img src="../../assets/arrow-long-down.svg" class="share-section__arrow">
<h3 class="share-section__heading">Share on</h3>
<ul class="share-section__list">
<li><a class="share-section__link" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F"><i class="icon icon-facebook"></i></a>
</li>
<li><a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&via=innoq"><i class="icon icon-twitter"></i></a>
</li>
<li><a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F"><i class="icon icon-email"></i></a>
</li>
</ul>
</section>
<section class="center share-section">
<img src={context.app.uri('assets/arrow-long-down.svg')} class="share-section__arrow" />
<h3 class="share-section__heading">Share on</h3>
<ul class="share-section__list">
<li>
<a class="share-section__link" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F">
<i class="icon icon-facebook"></i>
</a>
</li>
<li>
<a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&via=innoq">
<i class="icon icon-twitter"></i>
</a>
</li>
<li>
<a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F">
<i class="icon icon-email"></i>
</a>
</li>
</ul>
</section>
/* No context defined for this component. */
$share-section-icon-size: ms(4);
$share-section-arrow-size: ms(16);
.share-section {
margin: 0 auto;
margin-bottom: $spacer-xl;
width: 50%;
text-align: center;
&::before {
display: block;
transition: $ease-out-back-transition;
margin-bottom: $spacer-sm;
font-size: $share-section-arrow-size;
}
&:hover {
&::before {
transform: translateY($spacer-xs);
}
}
}
.share-section__heading {
line-height: $share-section-heading-line-height;
font-size: $share-section-heading-font-size;
}
.share-section__list {
@extend %list-unstyled;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.share-section__link {
@extend %heading-font-bold;
@extend %link-unstyled;
transition: standard-transition(color);
padding: $spacer-sm;
font-size: $share-section-icon-size;
&:hover,
&:focus {
color: $haring-interaction-color;
}
}
There are no notes for this item.