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