generator-confit/lib/buildTool/npm/documentation/templates/docs/themes/test-theme/css/components/navigation.styl

Yeoman generator for creating the development process, tools and a sample project for current-generation web applications

/*
 * Swanky Theme
 * Navigation
 */

.navigation
  width 100%

.navigation > .ul
  list-style none
  padding 0
  margin 0

  .a
    display block
    position relative
    color $black
    text-decoration none
    transition: background $duration;

    &:hover
      background #f5f5f5

    &:focus
      background $white

  .li.active > .a
    background $white
    border-left 2px solid $brand-secondary

  > .li > .a
    text-transform uppercase
    font-weight 600
    padding 25px 20px 25px 30px
    border-bottom 1px solid darken($block-background-colour, 5%)

// Sub navigation
  .li > .ul
    list-style none
    padding 0
    margin 0
    display none
    border-bottom 1px solid darken($block-background-colour, 5%)

  .li.active > .ul
    display block


  .li .li.active .a
    border-left none
    background none
    &:before
      content ' '
      position absolute
      left 30px
      top 20px
      width 6px
      height 6px
      border-radius 100%
      background-color $brand-secondary

  .li .li > .a
    font-weight 300
    padding 12px 20px 12px 50px

// Need global .active class for use with scrollspy
:global
  li li.active a
    border-left none
    background $white

    &:before
      content ' '
      position absolute
      left 30px
      top 18px
      width 6px
      height 6px
      border-radius 100%
      background-color $brand-primary

.anchors
  @extend .clearfix
  margin-bottom 4rem
  width: 200px;
  right: 0;
  position: fixed;
  top: 160px;
  display: none

  @media screen and (min-width: $screen-is-bigger-than-sm-desktop)
    display block

  .a
    display block
    float left
    clear both
    background $alabaster
    padding: 1rem
    margin-right .5rem
    margin-bottom .5rem

:global
  a.sw-active
    color: $brand-primary!important

.guide-links
  margin-bottom 40px
  padding-bottom 20px
  border-bottom 1px solid $white-smoke
  width 100%
  &:after
    @extend .clearfix

  .a
    text-decoration none !important
    font-weight 600

  .next
    float right