Toolbar 

<ul class="toolbar">
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-feedback icon--brand-secondary"></span>
            Feedback
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-apple-itunes icon--brand-secondary"></span>
            Apple
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-spotify icon--brand-secondary"></span>
            Spotify
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-rss icon--brand-secondary"></span>
            RSS
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-text icon--brand-secondary"></span>
            Transkript
        </a>
    </li>
</ul>
 
<ul class="toolbar">
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-feedback icon--brand-secondary"></span>
            Feedback
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-apple-itunes icon--brand-secondary"></span>
            Apple
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-spotify icon--brand-secondary"></span>
            Spotify
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-rss icon--brand-secondary"></span>
            RSS
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon icon-text icon--brand-secondary"></span>
            Transkript
        </a>
    </li>
</ul>
 
/* No context defined. */
  • Content: 
    .toolbar {
  @extend %list-unstyled;

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.toolbar__item {
  margin: $spacer-sm;
}

.toolbar__link {
  @extend %link-unstyled;
  @extend %heading-font-bold;

  display: flex;
  align-items: center;
  justify-content: center;

  color: $toolbar-link-color;

  transition: standard-transition(color);

  .icon {
    margin-right: $spacer-xxs;
    transition: standard-transition(background);
  }

  &:hover,
  &:focus {
    color: $toolbar-link-hover-color;

    .icon {
      background: $toolbar-link-hover-color;
    }
  }
}
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: components/04-molecules/toolbar/_toolbar.scss
  • Size: 615 Bytes

No notes defined.