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
|
@import 'nib'
/*
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
.accordion
cursor: pointer
width: 30px
height: 20px
border: none
outline: none
font-size: 18px
transition: 0.4s
padding-top: 0px
margin-top: 0px
.accordion:after
// Unicode triagle right:
content: '\25B6'
color: #777
font-weight: bold
float: left
.active:after
// Unicode triangle down:
content: '\25BC'
.panel
width: 100%
max-height: 0
overflow: hidden
transition: max-height 0.2s ease-out
margin: 0px
padding: 0px
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
*/
.swimlane
// Even if this background color is the same as the body we can't leave it
// transparent, because that won't work during a swimlane drag.
background: darken(white, 13%)
display: flex
flex-direction: row
overflow: 0;
max-height: calc(100% - 26px)
&.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(2deg)
cursor: grabbing
.swimlane-header.ui-sortable-handle
cursor: grabbing
.swimlane-header-wrap
display: flex
flex-direction: row
flex: 1 0 100%
background-color: #ccc
.swimlane-header
font-size: 14px
padding: 5px 5px
font-weight: bold
min-height: 9px
width: 100%
overflow: hidden
-o-text-overflow: ellipsis
text-overflow: ellipsis
word-wrap: break-word
text-align: center
.swimlane-header-menu
position: absolute
padding: 5px 5px
.swimlane-header-plus-icon
margin-left: 5px
margin-right: 10px
.swimlane-header-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
left: 230px
font-size: 18px
.swimlane-header-miniscreen-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
left: 87vw
font-size: 24px
.list-group
height: 100%
.moving-swimlane
display: none
swimlane-color(background, color...)
background: background !important
if color
color: color !important //overwrite text for better visibility
.swimlane-white
swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility
border: 1px solid #eee
.swimlane-green
swimlane-color(#3cb500, #ffffff) //White text for better visibility
.swimlane-yellow
swimlane-color(#fad900, #4d4d4d) //Black text for better visibility
.swimlane-orange
swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility
.swimlane-red
swimlane-color(#eb4646, #ffffff) //White text for better visibility
.swimlane-purple
swimlane-color(#a632db, #ffffff) //White text for better visibility
.swimlane-blue
swimlane-color(#0079bf, #ffffff) //White text for better visibility
.swimlane-pink
swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility
.swimlane-sky
swimlane-color(#00c2e0, #ffffff) //White text for better visibility
.swimlane-black
swimlane-color(#4d4d4d, #ffffff) //White text for better visibility
.swimlane-lime
swimlane-color(#51e898, #4d4d4d) //Black text for better visibility
.swimlane-silver
swimlane-color(unset, #4d4d4d) //Black text for better visibility
.swimlane-peachpuff
swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility
.swimlane-crimson
swimlane-color(#dc143c, #ffffff) //White text for better visibility
.swimlane-plum
swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility
.swimlane-darkgreen
swimlane-color(#006400, #ffffff) //White text for better visibility
.swimlane-slateblue
swimlane-color(#6a5acd, #ffffff) //White text for better visibility
.swimlane-magenta
swimlane-color(#ff00ff, #ffffff) //White text for better visibility
.swimlane-gold
swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility
.swimlane-navy
swimlane-color(#000080, #ffffff) //White text for better visibility
.swimlane-gray
swimlane-color(#808080, #ffffff) //White text for better visibility
.swimlane-saddlebrown
swimlane-color(#8b4513, #ffffff) //White text for better visibility
.swimlane-paleturquoise
swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility
.swimlane-mistyrose
swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility
.swimlane-indigo
swimlane-color(#4b0082, #ffffff) //White text for better visibility
|