Toolbar

<ul class="toolbar">
    <li class="toolbar__item">
        <a href="#" class="toolbar__link"><span class="icon-svg icon-feedback icon--brand-secondary"></span>Feedback</a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link"><span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>Apple</a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link"><span class="icon-svg icon-spotify icon--brand-secondary"></span>Spotify</a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link"><span class="icon-svg icon-rss icon--brand-secondary"></span>RSS</a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link"><span class="icon-svg 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-svg icon-feedback icon--brand-secondary"></span>
            Feedback
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>
            Apple
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon-svg icon-spotify icon--brand-secondary"></span>
            Spotify
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon-svg icon-rss icon--brand-secondary"></span>
            RSS
        </a>
    </li>
    <li class="toolbar__item">
        <a href="#" class="toolbar__link">
            <span class="icon-svg icon-text icon--brand-secondary"></span>
            Transkript
        </a>
    </li>
</ul>
/* No context defined. */
  • Content:
    .toolbar {
      @extend %list-unstyled;
    
      display: flex;
      flex-direction: row;
      flex-wrap: 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-svg {
        margin-right: $spacer-xxs;
        transition: standard-transition(background);
      }
    
      &:hover,
      &:focus {
        color: $toolbar-link-hover-color;
    
        .icon-svg {
          background: $toolbar-link-hover-color;
        }
      }
    }
    
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: components/04-molecules/visual-elements/toolbar/_toolbar.scss
  • Size: 640 Bytes

No notes defined.