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
|
@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, 10%)
height: 100%
border-right: 1px solid darken(white, 17%)
border-left: 1px solid darken(white, 4%)
padding: 12px 7px 5px
overflow-y: auto
&:first-child
margin-left: 5px
border-left: none
&:last-child
margin-right: 5px
border-right: none
&.editable
cursor: grab
.list-wrapper
cursor: default
&.add-list
&.fade
opacity: 0
.list-name-input
background: rgba(0, 0, 0, .05)
border-color: #aaa
box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
display: block
margin: 0
transition: margin 85ms ease-in,
background 85ms ease-in
width: 100%
.edit-controls
height: 32px
transition: margin 85ms ease-in,
height 85ms ease-in
overflow: hidden
margin: 4px 0 0
input[type=submit]
margin-top: 0
min-height: 30px
height: 30px
.list-header
flex: 0 0 auto
padding: 10px 26px 4px 6px
position: relative
min-height: 20px
.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-menu-icon
background-clip: content-box
background-origin: content-box
padding: 6px 8px
position: absolute
top: 3px
right: -5px
color: #a6a6a6
.list-header-num-cards
color: #8c8c8c
margin: 0
.minicards
// flex: 1 1 auto
overflow-y: auto
overflow-x: hidden
padding: 4px 4px 1px
z-index: 1
height: 100%
&::-webkit-scrollbar-button
display: block
height: 4px
.open-card-composer
border-radius: 2px
color: #8c8c8c
display: block
padding: 7px 10px
position: relative
text-decoration: none
animation: fadeIn 0.2s
i.fa
margin-right: 7px
&:hover
background: white
color: #222
box-shadow: 0 1px 2px rgba(0,0,0,.2)
&::selection
background: transparent
@keyframes fadeIn
from
opacity: 0
to
opacity: 1
.list.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
.list.ui-sortable-helper
cursor: grabbing
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
.list.ui-sortable-helper .list-header-menu-icon
display: none
|
