<ul class="toolbar">
<li class="toolbar__item"><i class="toolbar__icon icon icon-download"></i><a href="#" class="toolbar__link">Download</a>
</li>
<li class="toolbar__item"><i class="toolbar__icon icon icon-text"></i><a href="#" class="toolbar__link">Transkript</a>
</li>
<li class="toolbar__item"><i class="toolbar__icon icon icon-bubble-conversation-4"></i><a href="#" class="toolbar__link">Feedback</a>
</li>
<li class="toolbar__item"><i class="toolbar__icon icon icon-itunes"></i><a href="#" class="toolbar__link">iTunes</a>
</li>
<li class="toolbar__item"><i class="toolbar__icon icon icon-rss"></i><a href="#" class="toolbar__link">RSS</a>
</li>
</ul>
<ul class="toolbar">
<li class="toolbar__item">
<i class="toolbar__icon icon icon-download"></i>
<a href="#" class="toolbar__link">Download</a>
</li>
<li class="toolbar__item">
<i class="toolbar__icon icon icon-text"></i>
<a href="#" class="toolbar__link">Transkript</a>
</li>
<li class="toolbar__item">
<i class="toolbar__icon icon icon-bubble-conversation-4"></i>
<a href="#" class="toolbar__link">Feedback</a>
</li>
<li class="toolbar__item">
<i class="toolbar__icon icon icon-itunes"></i>
<a href="#" class="toolbar__link">iTunes</a>
</li>
<li class="toolbar__item">
<i class="toolbar__icon icon icon-rss"></i>
<a href="#" class="toolbar__link">RSS</a>
</li>
</ul>
/* No context defined for this component. */
.toolbar {
@extend %list-unstyled;
display: flex;
flex-direction: column;
// align-items: center;
justify-content: center;
text-align: center;
}
.toolbar__item {
display: flex;
align-items: center;
& + & {
margin: $spacer-sm 0 0;
}
}
.toolbar__icon {
margin-right: $spacer-xxs;
font-size: 1.5em;
}
.toolbar__link {
@extend %link-unstyled;
@extend %heading-font-bold;
transition: standard-transition(color);
&:hover,
&:focus {
color: $toolbar-link-hover-color;
}
}
@media screen and (min-width: $grid-breakpoint-sm) {
.toolbar {
flex-direction: row;
}
.toolbar__item + .toolbar__item {
margin: 0 0 0 $spacer-md;
}
}
There are no notes for this item.