Toolbar

<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. */
  • Content:
    .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;
      }
    }
    
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: components/02-molecules/visual-elements/toolbar/_toolbar.scss
  • Size: 682 Bytes

There are no notes for this item.