1 files changed, 92 insertions, 11 deletions
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index abcc90d4..e4e2cd3b 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -5,7 +5,7 @@
   // transparent, because that won't work during a swimlane drag.
   background: darken(white, 13%)
   display: flex
-  flex-direction: row
+  flex-direction: column
   overflow: 0;
   max-height: 100%
 
@@ -27,20 +27,15 @@
   .swimlane-header-wrap
     display: flex;
     flex-direction: row;
-    flex: 0 0 50px;
-    padding-bottom: 30px;
-    border-bottom: 1px solid #CCC
+    flex: 0 0 24px;
+    background-color: #ccc;
 
     .swimlane-header
-      -ms-writing-mode: tb-rl;
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
       font-size: 14px;
-      line-height: 50px;
-      margin-top: 50px;
+      padding: 5px 5px
       font-weight: bold;
       min-height: 9px;
-      width: 50px;
+      width: 100%;
       overflow: hidden;
       -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
@@ -49,7 +44,93 @@
 
     .swimlane-header-menu
       position: absolute
-      padding: 20px 20px
+      padding: 5px 5px
+
+    .swimlane-header-plus-icon
+      margin-left: 5px
+      margin-right: 10px
 
 .list-group
+  flex-direction: row
   height: 100%
+
+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