Boostnote/browser/styles/main/containers/HomeContainer.styl

homeNavigatorBgColor = #1B1C1C
homeNavigatorColor = #DDD
userAnchorColor = #979797
userAnchorBgColor = #BEBEBE
userAnchorActiveColor = textColor
userAnchorActiveBgColor = white

.HomeContainer
  .HomeNavigator
    noSelect()
    background-color homeNavigatorBgColor
    absolute left top bottom
    width 60px
    text-align center
    box-sizing border-box
    // must be moved
    // .profilePopup
    //   position fixed
    //   left 35px
    //   top 35px
    //   z-index popupZIndex
    //   width 200px
    //   background-color backgroundColor
    //   box-shadow popupShadow
    //   border-radius 10px
    //   padding 10px 0 0px
    //   &.close
    //     display none
    //   .profileGroup
    //     margin-bottom 10px
    //     .profileGroupLabel
    //       text-align left
    //       height 1em
    //       padding 0 15px
    //       span
    //         position absolute
    //         z-index 2
    //         background-color backgroundColor
    //         padding-right 5px
    //         color inactiveTextColor
    //         font-size 0.8em
    //       &::before
    //         content ''
    //         position absolute
    //         display block
    //         z-index 1
    //         height 0.5em
    //         width 175px
    //         border-bottom solid 1px borderColor
    //     .profileGroupList
    //       li
    //         clearfix()
    //         &:hover
    //           background-color hoverBackgroundColor
    //         .userName
    //           width 155px
    //           padding 10px 15px
    //           text-align left
    //           display block
    //           text-decoration none
    //           cursor pointer
    //         .createNewTeam
    //           btnStripDefault()
    //           width 100%
    //           padding 10px 20px
    //           font-size 1em
    //           cursor pointer
    //           text-align left
    //   .controlGroup
    //     list-style none
    //     border-top solid 1px borderColor
    //     padding 10px 0
    //     li
    //       &:hover
    //         background-color hoverBackgroundColor
    //       button
    //         btnStripDefault()
    //         width 100%
    //         padding 10px 20px
    //         font-size 1em
    //         cursor pointer
    //         text-align left
    ul.userList
      margin-top 25px
      &>li
        .shortCut
          margin-top 5px
          font-size 0.8em
          color homeNavigatorColor
        a
          display block
          width 44px
          height 44px
          margin 0 auto
          text-align center
          background-color userAnchorBgColor
          text-decoration none
          color userAnchorColor
          line-height 44px
          font-size 1.1em
          cursor pointer
          circle()
          img
            width 44px
            height 44px
          transition 0.1s
          &:hover, &.active
            background-color userAnchorActiveBgColor
            color userAnchorActiveColor
          .userTooltip
            position absolute
            z-index popupZIndex
            background-color transparentify(invBackgroundColor, 80%)
            color invTextColor
            padding 10px
            line-height 1em
            border-radius 5px
            margin-top -52px
            margin-left 52px
            white-space nowrap
            opacity 0
            transition 0.1s
            pointer-events none
          &:hover .userTooltip
            opacity 1
    button.newTeamButton
      display block
      margin 0 auto
      width 30px
      height 30px
      circle()
      border solid 1px lightButtonColor
      color lightButtonColor
      text-align center
      background-image none
      background-color transparent
      box-sizing border-box
      absolute left bottom right
      bottom 15px
      &:hover, &.hover, &:focus, &.focus
        border-color darken(lightButtonColor, 50%)
        color darken(lightButtonColor, 50%)
      &:active, &.active
        border-color darken(brandBorderColor, 10%)
        background-color brandColor
        color white
      .tooltip
        tooltip()
        margin-top -22px
        margin-left 33px
        font-size 14px
      &:hover .tooltip
        opacity 1