<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:
    $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing things around
    
    .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;
    
      > li {
        @extend %body-font-italic;
    
        padding-top: $spacer-xxs;
        padding-bottom: $spacer-xxs;
        padding-left: $spacer-md;
        font-size: $font-size-base;
      }
    
      > 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;
    
      &::before {
        @extend %icon; // inline-block
    
        position: absolute;
        left: -$spacer-md;
        width: $spacer-base;
        color: $brand-interaction;
        content: $icon-arrow-down;
      }
    }
    
    @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: 1.1 KB
  • Handle: @table-of-contents
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/table-of-contents/table-of-contents.html

No notes defined.