summaryrefslogtreecommitdiffstats
path: root/client/components/swimlanes/swimlanes.styl
blob: 164c66d59e794ce100ce6bf2c0d9243734038132 (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
@import 'nib'

.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