<aside class="toc">
    <h3 class="toc__heading">Inhalt</h3>
    <ol class="toc__list">
        <li>
            <a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a>
        </li>
        <li>
            <a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a>
        </li>
        <li>
            <a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a>
        </li>
        <li>
            <a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a>
        </li>
        <li>
            <a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a>
        </li>
        <li><a class="toc__anchor" href="#fazit">Fazit</a></li>
    </ol>
</aside>
<aside class="toc">
    <h3 class="toc__heading">Inhalt</h3>
    <ol class="toc__list">
        <li><a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a></li>
        <li><a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a></li>
        <li><a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a></li>
        <li><a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a></li>
        <li><a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a></li>
        <li><a class="toc__anchor" href="#fazit">Fazit</a></li>
    </ol>
</aside>
/* No context defined. */
  • Content:
    .toc {
      max-width: 100%;
      margin-bottom: $spacer-lg;
    }
    
    .toc__heading {
      @extend %heading-font-heavy;
    
      margin-bottom: $spacer-sm;
      color: $toc-heading-color;
      font-size: $font-size-sm;
      text-transform: uppercase;
    }
    
    .toc__list {
      @extend %list-unstyled;
    
      padding-left: 0.7rem;
    
      > li {
        @extend %body-font-italic;
    
        display: flex;
        padding-top: $spacer-xxs;
        padding-bottom: $spacer-xxs;
        font-size: $font-size-base;
    
        &::before {
          padding-right: 0.5rem;
          content: asset-url("icons/arrow-short-down.svg");
        }
      }
    
      > li + li {
        border-top: 1px solid $toc-border-color;
      }
    }
    
    .toc__anchor {
      @extend %link-unstyled;
      @include hover-fill($link-hover-color-light, $toc-anchor-hover-text-color, $toc-anchor-text-color);
    
      position: relative;
      z-index: 1;
      display: inline-block;
      padding: 0;
    }
    
    @media screen and (min-width: $grid-breakpoint-xl) {
      .toc {
        margin-top: $spacer-xxs;
        margin-right: $spacer-xl;
      }
    }
    
  • URL: /components/raw/table-of-contents/_table-of-contents.scss
  • Filesystem Path: components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
  • Size: 972 Bytes
  • Handle: @table-of-contents
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/table-of-contents/table-of-contents.html

No notes defined.