themummy/view/app/m/nav.styl

UNSTABLE. codecoverage married with integration testing. currently a work in progress

.nav-underline
  borderc(#d1cfcf, #626cc1, $c_blue, true)

.main
  transition margin-right .2s ease-in-out
  &.nav_show
    @media screen and (min-width: 600px)
      margin-right 300px

.nav
  stripe(white)
  align-items flex-start
  align-content flex-start
  linebg($c_bg, #cbcbcb, .9rem)
  // background $c_bg
  transition all .4s ease-in-out
  &.hide
    transform translateX(100vw)
  position fixed
  top 0
  right 0
  z-index 10
  height 100vh
  max-width 300px
  width 100%
  overflow scroll
  shadow()
  &-item
    display flex
    align-items center
    width 100%
    height 1.8rem
    transition background-color .4s ease
    .percent
      width 2rem
    .percent-n
      background transparent
      // padding .2rem
      // margin -.2rem
      width 1.2rem
      height 1.2rem
      border-radius 0.1rem
      color white
    &__inner
      display: flex;
      align-items: center;
      font-size .8rem
    &:hover
      background-color rgba(white, .2)
    &.active
      background-color rgba(white, 0.5)
      font-weight 600
    .filename
      display flex
      align-items center
    .file-count
      border 1px solid black
      color black
.nav-toggle
  @media screen and (min-width: 600px)
    display none
  position fixed
  top 0
  right 0
  width 1.8rem
  height 1.8rem
  z-index 10
  & > div
    font-size 1.5rem
  background $c_bg