summaryrefslogtreecommitdiffstats
path: root/client/components/lists/list.styl
blob: 51ade73c466548b4e3b7e5a0b876a634ebbb9b2f (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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
@import 'nib'

.list
  box-sizing: border-box
  display: flex
  flex-direction: column
  flex: 0 0 270px
  position: relative
  // Even if this background color is the same as the body we can't leave it
  // transparent, because that won't work during a list drag.
  background: darken(white, 13%)
  border-left: 1px solid darken(white, 20%)
  padding: 0
  float: left

  &:first-child
    margin-left: 5px
    border-left: none

  .card-details + &
    border-left: none

  &.ui-sortable-helper
    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .5)
    transform: rotate(4deg)
    cursor: grabbing

    .list-header.ui-sortable-handle
      cursor: grabbing

  &.placeholder
    background-color: rgba(0, 0, 0, .2)
    border-color: transparent
    box-shadow: none
    height: 100px

  &.list-composer, & .list-composer
    .open-list-composer
      color: #8c8c8c

    .list-name-input
      background: white
      margin: -3px 0 8px

.list-header-card-count
  height: 35px

.list-header-add
  flex: 0 0 auto
  padding: 20px 12px 4px
  position: relative
  min-height: 20px

.list-header
  flex: 0 0 auto
  padding: 20px 12px 4px
  position: relative
  min-height: 20px
  background-color: #e4e4e4;
  border-bottom: 6px solid #e4e4e4;


  &.ui-sortable-handle
    cursor: grab

  .list-header-left-icon
    display: none

  .list-header-name
    display: inline
    font-size: 16px
    line-height: 17px
    margin: 0
    font-weight: bold
    min-height: 9px
    min-width: 30px
    overflow: hidden
    text-overflow: ellipsis
    word-wrap: break-word


  .list-header-watch-icon
    padding-left: 10px
    color: #a6a6a6

  .list-header-menu
    position: absolute
    padding: 27px 19px
    margin-top: 1px
    top: -7px
    right: -7px

  .list-header-plus-icon
    color: #a6a6a6
    margin-right: 10px

  .highlight
    color: #ce1414

.list-body
  flex: 1 1 auto
  flex-direction: column
  display: flex
  overflow-y: auto
  padding: 5px 11px

  .minicards
    flex-grow: 1
    flex-shrink: 0

    form
      margin-bottom: 9px

  .ps-scrollbar-y-rail
    transform: translateX(2px)

  .open-minicard-composer
    border-radius: 2px
    color: #8c8c8c
    display: block
    padding: 7px 10px
    position: relative
    text-decoration: none
    animation: fadeIn 0.3s

    i.fa
      margin-right: 7px

    &:hover
      background: #fafafa
      color: #222
      box-shadow: 0 1px 2px rgba(0,0,0,.2)

#js-wip-limit-edit
  padding-top: 2%

  p
    margin-bottom: 0

  input
    display: inline-block

  .wip-limit-value
    width: 20%
    margin-right: 5%

  .wip-limit-error
    display: none

  .soft-wip-limit
    margin-right: 8px

  div
    float: left

@media screen and (max-width: 800px)
  .mini-list
    flex: 0 0 60px
    height: 60px
    width: 100%
    border-left: 0px
    border-bottom: 1px solid darken(white, 20%)

  .list
    display: block
    width: 100%
    border-left: 0px

    &.ui-sortable-helper
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

      .list-header.ui-sortable-handle
        cursor: grabbing

    &.placeholder
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

  .list-header

    .list-header-left-icon
      display: inline
      padding: 7px
      padding-right: 27px
      margin-top: 1px
      top: -@padding
      left: -@padding

    .list-header-menu-icon
      position: absolute
      padding: 7px
      top: -@padding
      right: 17px

.link-board-wrapper
  display: flex
  align-items: baseline

  .js-link-board
    margin-left: 15px

.search-card-results
  max-height: 250px
  overflow: hidden

list-header-color(background, color...)
  border-bottom: 6px solid background

.list-header-white
  list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
  border: 1px solid #eee

.list-header-green
  list-header-color(#3cb500, #ffffff) //White text for better visibility

.list-header-yellow
  list-header-color(#fad900, #4d4d4d) //Black text for better visibility

.list-header-orange
  list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility

.list-header-red
  list-header-color(#eb4646, #ffffff) //White text for better visibility

.list-header-purple
  list-header-color(#a632db, #ffffff) //White text for better visibility

.list-header-blue
  list-header-color(#0079bf, #ffffff) //White text for better visibility

.list-header-pink
  list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility

.list-header-sky
  list-header-color(#00c2e0, #ffffff) //White text for better visibility

.list-header-black
  list-header-color(#4d4d4d, #ffffff) //White text for better visibility

.list-header-lime
  list-header-color(#51e898, #4d4d4d) //Black text for better visibility

.list-header-silver
  list-header-color(unset, #4d4d4d) //Black text for better visibility

.list-header-peachpuff
  list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility

.list-header-crimson
  list-header-color(#dc143c, #ffffff) //White text for better visibility

.list-header-plum
  list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility

.list-header-darkgreen
  list-header-color(#006400, #ffffff) //White text for better visibility

.list-header-slateblue
  list-header-color(#6a5acd, #ffffff) //White text for better visibility

.list-header-magenta
  list-header-color(#ff00ff, #ffffff) //White text for better visibility

.list-header-gold
  list-header-color(#ffd700, #4d4d4d) //Black text for better visibility

.list-header-navy
  list-header-color(#000080, #ffffff) //White text for better visibility

.list-header-gray
  list-header-color(#808080, #ffffff) //White text for better visibility

.list-header-saddlebrown
  list-header-color(#8b4513, #ffffff) //White text for better visibility

.list-header-paleturquoise
  list-header-color(#afeeee, #4d4d4d) //Black text for better visibility

.list-header-mistyrose
  list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility

.list-header-indigo
  list-header-color(#4b0082, #ffffff) //White text for better visibility