docpress-base/css/components/toc-menu.styl

Base theme for Docpress.

//
// Menu
//

.toc-menu
  $pad = 24px

  &
    position: relative
    padding: ($pad - 4px) 0
    // background: #fdfefe
    box-shadow: inset -1px 0 $line
    font-size: 13px
    transition: opacity 1500ms linear

  ul, li
    margin: 0
    padding: 0
    list-style: none

  .title
    display: block
    padding: 7px $pad
    height: 1em
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap
    box-sizing: content-box

  .-level-1.-parent
    margin-bottom: 16px

  .-level-1.-parent > .title
    margin-top: 16px
    font-weight: bold
    color: $black
    font-size: 1.1em

  .link
    &, &:visited
      color: $slate
      text-decoration: none
      position: relative

  .link, .hlink
    &
      transition: background-color 200ms linear, color 500ms linear, box-shadow 200ms linear
      box-shadow: inset -2px 0 rgba($accent, 0)
      box-sizing: content-box

    &:hover
      background-color: rgba($accent, 0.02)
      color: darken($slate, 20%)
      transition: box-shadow 200ms linear

    &:active
      background-color: rgba($accent, 0.1)
      color: $black
      transition: box-shadow 200ms linear

    &.-active
      box-shadow: inset -2px 0 $accent
      transition: background-color 200ms linear, color 500ms linear

  // The readme
  .-level-1:first-child
    margin-bottom: 16px

  // The readme's headings
  .-level-1:first-child > .heading-list
    margin-top: 16px

  // The readme's title
  .-level-1:first-child > .title
    margin-top: 0
    font-size: 1.5em
    font-weight: 300
    color: $black

  .-level-3 .title
    padding-left: $pad + 8px * 1

  .-level-4 .title
    padding-left: $pad + 8px * 2
    
  .heading-item.-depth-3
    margin-left: 1.2rem

//
// Hover fade
//

.toc-menu.-faded
  .title:not(.-active)
    opacity: 0.2
    transition: opacity 1500ms linear

  &:hover .title
    opacity: 1
    transition: opacity 200ms linear