summaryrefslogtreecommitdiffstats
path: root/client/components/sidebar/sidebar.styl
blob: 740186b59c5b2afddb1e073ab7ce1cbdbac39e35 (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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
@import 'nib'

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

  .sidebar-shadow
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    background: darken(white, 3%)
    box-shadow: -10px 0px 5px -10px darken(white, 30%)
    z-index: 10

  .sidebar-content
    padding: 12px
    margin-bottom: 1.6em
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    overflow-x: hidden
    overflow-y: auto

    .hide-btn
      display: none

    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
            margin-top: 5px

          .minicard-edit-button
            float: right
            padding: 8px
            border-radius: 3px

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

          .fa.fa-check
            margin: 0 4px

        .minicard
          padding: 6px 8px 4px

          .minicard-edit-button
            float: right
            padding: 4px
            border-radius: 3px

            &:hover
              background: #dbdbdb

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

      &:hover *
        color: white

      i.fa
        margin-right: 10px

  .sidebar-shortcuts
    margin: 0
    padding: 0
    top: auto
    text-align: center
    font-size: 0.8em
    line-height: 1.6em
    vertical-align: middle
    color: darken(white, 40%)

.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

@media screen and (max-width: 800px)
  .board-sidebar
    width: 100%
    right: -@width

    .sidebar-content
      .hide-btn
        width: 40px
        height: @width
        position: absolute
        right: 5px
        top: 5px
        display: block
        z-index: 15
        background: darken(white, 3%)
        transition: left .1s
        color: darken(white, 50%)
        border-radius: 50%
        border: 1px solid darken(white, 30%)
        box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
        color: darken(white, 50%)

        i.fa
          padding: 8px 16px
          font-size: 24px
          font-weight: bold

  .sidebar-tongue
    width: 40px
    height: @width
    left: -@width - 7px
    top: 5px
    display: block
    border-radius: 50%
    border: 1px solid darken(white, 30%)
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
    color: darken(white, 50%)

    .board-sidebar.is-open &
      display: none

    i.fa
      padding: 8px 0px 8px 16px
      font-weight: bold