summaryrefslogtreecommitdiffstats
path: root/client/components/lists/list.styl
blob: c375336071136164253e758a5cb693c6399f94c7 (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
@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
  flex: 0 0 auto
  margin: 20px 12px 4px
  position: relative
  min-height: 20px

  &.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: 7px
    margin-top: 1px
    top: -@padding
    right: -@padding

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

  .highlight
    color: #ce1414

.list-body
  flex: 1
  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