summaryrefslogtreecommitdiffstats
path: root/client/components/sidebar/sidebar.styl
blob: 813e263ad85bff90caa81e768a8196a055f677d0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@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

.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