wekan/client/components/sidebar/sidebar.styl

@import 'nib'

.sidebar
  position: absolute
  top: 0
  bottom: 0
  right: 0

  .sidebar-content
    padding: 12px
    background: darken(white, 3%)
    box-shadow: -10px 0px 5px -10px darken(white, 30%)
    z-index: 10
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    overflow-x: hidden
    overflow-y: auto

    h3
      color: darken(white, 50%)

    hr
      margin: 13px 0

    ul.sidebar-list
      display: flex
      flex-direction: column

      li a
        display: flex
        height: 30px
        margin: 0
        padding: 4px
        border-radius: 3px
        align-items: center

        &:hover
          &, i, .quiet
            color white

        .member, .card-label
          margin-right: 7px

        .sidebar-list-item-description
          flex: 1
          overflow: ellipsis

        .fa.fa-check
          margin: 0 4px

    .sidebar-btn
      display: block
      margin: 5px 0
      padding: 10px
      border-radius: 3px
      background: darken(white, 10%)

      &:hover *
        color: white

      i.fa
        margin-right: 10px

.board-sidebar
  width: 248px
  right: -@width
  transition: top .1s, right .1s, width .1s

  &.is-open
    right: 0

.board-widget h4
  margin: 5px 0

.board-widget-activity
  margin-right: -4px

.sidebar-tongue
  display: block
  width: 30px
  height: @width
  left: -@width
  position: absolute
  top: 12px
  z-index: 15
  background: darken(white, 3%)
  border-radius: left 3px
  box-shadow: -4px 0px 7px -4px darken(white, 30%)
  color: darken(white, 50%)
  transition: left .1s

  i.fa
    padding: 3px 9px
    font-size: 24px
    transition: transform 0.5s

  .board-sidebar.is-open &
    left: -@width + 2px

    // XXX Bug: we should add a padding left
    &:hover
      left: -@width + 5px

    i.fa
      transform: rotate(180deg)

  &.is-hidden,
  .board-sidebar.is-open &.is-hidden
    z-index: 0
    left: 5px