articleNavBgColor = #353535
articleCount = #999

.ArticleNavigator
  background-color articleNavBgColor
  absolute top bottom left
  width 200px
  border-right 1px solid borderColor
  color white
  user-select none
  .userInfo
    height 60px
    display block
    border-bottom 1px solid borderColor
    .userProfileName
      color brandColor
      font-size 28px
      padding 6px 37px 0 10px
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .userName
      color white
      padding-left 20px
      margin-top 3px
    .tutorial
      position fixed
      z-index 35
      top 0
      left 0
      pointer-event none
      font-style italic
      transition 0.1s
      &.hide
        opacity 0
    .settingBtn
      width 22px
      height 22px
      line-height 22px
      border-radius 11px
      position absolute
      top 19px
      right 14px
      color white
      padding 0
      background-color transparent
      border 1px solid white
      z-index 31
      .tooltip
        tooltip()
        margin-top -5px
        margin-left 10px
      &:hover
        .tooltip
          opacity 1
      &:active
        background-color brandColor
        border-color brandColor
  .controlSection
    height 88px
    padding 22px 15px
    margin-bottom 44px
    .tutorial
      fixed top left
      z-index 35
      pointer-event none
      font-style italic
      transition 0.1s
      &.hide
        opacity 0
    .newPostBtn
      position relative
      border none
      background-color brandColor
      color white
      height 44px
      width 170px
      border-radius 5px
      font-size 20px
      transition 0.1s
      z-index 30
      .tooltip
        tooltip()
        margin-left 48px
        margin-top -3px
      &:hover
        background-color lighten(brandColor, 7%)
        .tooltip
          opacity 1
  .folders, .members
    .header
      border-bottom 1px solid borderColor
      padding-bottom 5px
      margin-bottom 10px
      clearfix()
      position relative
      z-index 30
      .title
        float left
        padding-left 10px
        font-size 18px
        line-height 22px
      .addBtn
        float right
        margin-right 15px
        width 22px
        height 22px
        font-size 10px
        padding 0
        line-height 22px
        border 1px solid white
        border-radius 11px
        background-color transparent
        color white
        padding 0
        font-weight bold
        .tooltip
          tooltip()
          margin-top -6px
          margin-left 11px
        &:hover
          .tooltip
            opacity 1
        &:active
          background-color brandColor
          border-color brandColor
  .folders
    absolute bottom
    top 200px
    width 100%
    .header
      .tutorial
        position fixed
        z-index 35px
        top 200px
        font-style italic
    .folderList
      absolute bottom
      top 38px
      overflow-y auto
    .folderList button
      height 33px
      width 199px
      border none
      text-align left
      font-size 14px
      background-color transparent
      color white
      padding-left 15px
      overflow ellipsis
      &:hover
        background-color transparentify(white, 5%)
      &.active, &:active
        background-color transparentify(lighten(brandColor, 25%), 70%)
      .articleCount
        color articleCount
        font-size 12px
  .members
    .memberList>div
      height 33px
      width 200px
      margin-bottom 5px
      padding-left 15px
      .memberImage
        float left
        margin-top 5.5px
        border-radius 11px
      .memberProfileName
        float left
        line-height 33px
        margin-left 7px