Renaissance

                     _,,ad8888888888bba,_
                  ,ad88888I888888888888888ba,
                ,88888888I88888888888888888888a,
              ,d888888888I8888888888888888888888b,
             d88888PP"""" ""YY88888888888888888888b,
           ,d88"'__,,--------,,,,.;ZZZY8888888888888,
          ,8IIl'"                ;;l"ZZZIII8888888888,
         ,I88l;'                  ;lZZZZZ888III8888888,
       ,II88Zl;.                  ;llZZZZZ888888I888888,
      ,II888Zl;.                .;;;;;lllZZZ888888I8888b
     ,II8888Z;;                 `;;;;;''llZZ8888888I8888,
     II88888Z;'                        .;lZZZ8888888I888b
     II88888Z; _,aaa,      .,aaaaa,__.l;llZZZ88888888I888
     II88888IZZZZZZZZZ,  .ZZZZZZZZZZZZZZ;llZZ88888888I888,
     II88888IZZ<'(@@>Z|  |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I
    ,II88888;   `""" ;|  |ZZ; `"""     ;;llZ8888888888I888
    II888888l            `;;          .;llZZ8888888888I888,
   ,II888888Z;           ;;;        .;;llZZZ8888888888I888I
   III888888Zl;    ..,   `;;       ,;;lllZZZ88888888888I888
   II88888888Z;;...;(_    _)      ,;;;llZZZZ88888888888I888,
   II88888888Zl;;;;;' `--'Z;.   .,;;;;llZZZZ88888888888I888b
   ]I888888888Z;;;;'   ";llllll;..;;;lllZZZZ88888888888I8888,
   II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I
   II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888
   II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888
   `II8888888888888Zl;.    ,;;lllZZZZZZZZWMZ88888888888I88888
    II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888,
    `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b
     `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888
      `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888,
       II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b,
      ,II8888888888888888b   .;;lllllll;;;.;..88888888I88888888b,
      II888888888888888PZI;.  .`;;;.;;;..; ...88888888I8888888888,
      II888888888888PZ;;';;.   ;. .;.  .;. .. Y8888888I88888888888b,
     ,II888888888PZ;;'                        `8888888I8888888888888b,
     II888888888'                              888888I8888888888888888
    ,II888888888                              ,888888I8888888888888888
   ,d88888888888                              d888888I8888888888ZZZZZZ
,ad888888888888I                              8888888I8888ZZZZZZZZZZZZ
888888888888888'                              888888IZZZZZZZZZZZZZZZZZ
8888888888P'8P'                               Y888ZZZZZZZZZZZZZZZZZZZZ
888888888,  "                                 ,ZZZZZZZZZZZZZZZZZZZZZZZ
8888888888,                                ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ
888888888888a,      _                    ,ZZZZZZZZZZZZZZZZZZZZ88888888
888888888888888ba,_d'                  ,ZZZZZZZZZZZZZZZZZ8888888888888
8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888
88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888
8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888
888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888
8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888
88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888
8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand  8
88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8
8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888

1 files changed, 183 insertions, 0 deletions

diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
new file mode 100644
index 00000000..27058b21
--- /dev/null
+++ b/client/components/cards/labels.styl
@@ -0,0 +1,183 @@
+@import 'nib'
+
+// XXX Use .board-widget-labels as a flexbox container
+.card-label
+  background-color: #b3b3b3
+  border-radius: 4px
+  color: white
+  display: inline-block
+  font-weight: 700
+  font-size: 13px
+  margin-right: 4px
+  padding: 3px 8px
+  position:relative
+  max-width: 100%
+  min-width: 8px
+  overflow: ellipsis
+  height: 18px
+
+  &:hover
+    color: white
+
+.card-label-green
+  background-color: #3cb500
+
+.card-label-yellow
+  background-color: #fad900
+
+.card-label-orange
+  background-color: #ff9f19
+
+.card-label-red
+  background-color: #eb4646
+
+.card-label-purple
+  background-color: #a632db
+
+.card-label-blue
+  background-color: #0079bf
+
+.card-label-pink
+  background-color: #ff78cb
+
+.card-label-sky
+  background-color: #00c2e0
+
+.card-label-black
+  background-color: #4d4d4d
+
+.card-label-lime
+  background-color: #51e898
+
+.edit-label,
+.create-label
+  .card-label
+    float: left
+    height: 25px
+    margin: 0px 3% 7px 0px
+    width: 10.5%
+    cursor: pointer
+
+.edit-labels
+  input[type="text"]
+    margin: 4px 0 6px 38px
+    width: 243px
+
+  .card-label
+    height: 30px
+    left: 0
+    padding: 1px 5px
+    position: absolute
+    top: 0
+    width: 24px
+
+  .labels-static .card-label
+    line-height: 30px
+    margin-bottom: 4px
+    position: relative
+    top: auto
+    left: 0
+    width: 260px
+
+.minicard-labels
+  position: relative
+  z-index: 30
+  top: -6px
+
+  .card-label
+    border-radius: 0
+    float: left
+    height: 4px
+    margin-bottom: 1px
+    padding: 0
+    width: 40px
+    line-height: 100px
+
+.card-detail-item-labels .card-label
+  border-radius: 3px
+  display: block
+  float: left
+  height: 20px
+  line-height: 20px
+  margin: 0 4px 4px 0
+  min-width: 30px
+  padding: 5px 10px
+  width: auto
+
+.editable-labels .card-label:hover
+  cursor: pointer
+  opacity: .75
+
+.edit-labels-pop-over
+  margin-bottom: 8px
+
+.edit-labels-pop-over .shortcut
+  display: inline-block
+
+.card-label-selectable
+  border-radius: 3px
+  cursor: pointer
+  margin: 0 50px 4px 0
+  min-height: 18px
+  padding: 8px
+  position: relative
+  transition: margin-right .1s
+
+  .card-label-selectable-icon
+    position: absolute
+    top: 8px
+    right: -20px
+
+  &.active:hover,
+  &.active,
+  &.active.selected:hover,
+  &.active.selected
+    margin-right: 38px
+    padding-right: 32px
+
+    .card-label-selectable-icon
+      right: 6px
+
+  &.active:hover:hover,
+  &.active:hover,
+  &.active.selected:hover:hover,
+  &.active.selected:hover
+    margin-right: 38px
+
+  &.selected,
+  &:hover
+    margin-right: 38px
+    opacity: .8
+
+.active .card-label-selectable
+  &,
+  &:hover
+    margin-right: 0
+
+  .card-label-selectable-icon
+    right: 8px
+
+.card-label-edit-button
+  border-radius: 3px
+  float: right
+  padding: 8px
+
+  &:hover
+    background: #dbdbdb
+
+.card-label-color-select-icon
+  left: 14px
+  position: absolute
+  top: 9px
+
+.phenom .card-label
+  display: inline-block
+  font-size: 12px
+  height: 14px
+  line-height: 13px
+  padding: 0 4px
+  min-width: 16px
+  overflow: ellipsis
+
+.board-widget .phenom .card-label
+  max-width: 130px