ceri-side-nav/materialize.styl

a touch enabled, responsive side-nav

@require "~ceri-materialize/2_variables"
@require "~ceri-materialize/4_zLevels"
ceri-side-nav.materialize
  width: 300px
  margin: 0
  padding-bottom: 60px
  background-color: $sidenav-bg-color
  overflow-y: auto
  backface-visibility: hidden
  list-style-type: none
  @extend .z-depth-1
  .collapsible
    margin: 0
  li
    float: none
    line-height: $sidenav-line-height
    &.active
      background-color: rgba(0, 0, 0, 0.05)
  li > a
    color: $sidenav-font-color
    display: block
    font-size: $sidenav-font-size
    font-weight: 500
    height: $sidenav-item-height
    line-height: $sidenav-line-height
    padding: 0 $sidenav-padding * 2
    &:hover
      background-color: rgba(0, 0, 0, 0.05)
    &.btn, &.btn-large, &.btn-flat, &.btn-floating
      margin: 10px 15px
    &.btn,
    &.btn-large,
    &.btn-floating
      color: $button-raised-color
    &.btn-flat
      color: $button-flat-color
    &.btn:hover,
    &.btn-large:hover
      background-color: lighten($button-raised-background, 5%)
    &.btn-floating:hover
      background-color: $button-raised-background
    & > i,
    & > [class^="mdi-"], li > a > [class*="mdi-"],
    & > i.material-icons
      float: left
      height: $sidenav-item-height
      line-height: $sidenav-line-height
      margin: 0 $sidenav-padding * 2 0 0
      width: ($sidenav-item-height / 2)
      color: rgba(0, 0, 0, 0.54)
  .divider
    margin: $sidenav-padding / 2 0 0 0
  .subheader
    &:hover
      background-color: transparent
    cursor: initial
    pointer-events: none
    color: rgba(0, 0, 0, 0.54)
    font-size: $sidenav-font-size
    font-weight: 500
    line-height: $sidenav-line-height
  .collapsible-body
    padding: 0
    & > ul:not(.collapsible) > li.active
      background-color: $primary-color
      a
        color: $sidenav-bg-color