FTSE Russell Styleguide

Sitemap 

<ul class="sitemap">
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a>
        <ul>
            <li><a href="#">Sub Navigation</a></li>
            <li><a href="#">Sub Navigation</a></li>
            <li><a href="#">Sub Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a></li>
</ul>
 
<ul class="sitemap">
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a>
        <ul>
            <li><a href="#">Sub Navigation</a></li>
            <li><a href="#">Sub Navigation</a></li>
            <li><a href="#">Sub Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Navigation</a></li>
</ul>
 
/* No context defined for this component. */
  • Content: 
    $sitemap-spacing: 1.5rem;

.sitemap > li > ul {
  margin-top: $sitemap-spacing;
}

.sitemap {
  list-style: none;

  li {
    line-height: $sitemap-spacing;
    margin-bottom: $sitemap-spacing / 2;
    vertical-align: top;
    position: relative;

    a {
      color: $secondary;
      text-decoration: none;
      display: inline-block;
    }
  }

  ul {
    margin-left: $sitemap-spacing;
    margin-bottom: $sitemap-spacing;

    li {
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        width: $sitemap-spacing * 2;
        height: 100%;
        border-left: 1px solid $border-color;
        position: absolute;
        top: -$sitemap-spacing / 2;
      }

      &::before {
        content: "";
        display: inline-block;
        width: $sitemap-spacing * 2;
        height: $sitemap-spacing;
        border-bottom: 1px solid $border-color;
        position: absolute;
        top: -$sitemap-spacing / 2;
      }
      a {
        margin-left: $sitemap-spacing * 2.5;
      }
    }
  }
}
  • URL: /components/raw/sitemap/_sitemap.scss
  • Filesystem Path: src/components/molecules/navigation/sitemap/_sitemap.scss
  • Size: 1 KB

There are no notes for this item.