summaryrefslogtreecommitdiffstats
path: root/client/components/sidebar/sidebar.styl
blob: 151a8f1981b5b936b047b34cba1aa101ee976066 (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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@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%)
      font-size: 1em
      margin-bottom: 10px

      i.fa
        margin-right: 3px

    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: 0px
  z-index: 15
  background: darken(white, 3%)
  border-bottom-left-radius: 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

.archived-lists .archived-lists-item
  border-top: 1px solid darken(white, 20%)
  clear: both
  padding: 5px 0

  &:first-child
    border-top: none

  button
    float: right
    margin: 0
    margin-bottom: 5px
    padding: 0 2px 0 10px