wekan/client/components/cards/labels.styl

@import 'nib'

// XXX Use .board-widget-labels as a flexbox container
.card-label
  border-radius: 4px
  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
  display: inline-block
  font-weight: 700
  font-size: 13px
  margin-right: 4px
  margin-bottom: 5px
  padding: 3px 8px
  max-width: 100%
  min-width: 8px
  overflow: ellipsis
  height: 18px
  vertical-align: bottom

  &:hover
    color: white

  &.square
    height: 30px
    width: @height
    padding: 0

  &.add-label
    box-shadow: 0 0 0 2px darken(white, 25%) inset

    &:hover, &.is-active
      box-shadow: 0 0 0 2px darken(white, 60%) inset

    i.fa-plus
      margin-top: 3px

.palette-colors
  display: flex
  flex-wrap: wrap

  .palette-color
    flex-grow: 1
    display: flex
    align-items: center
    justify-content: center

.card-label-green
  background-color: #3cb500

.card-label-yellow
  background-color: #fad900
  color: #000000 //Black text for better visibility

.card-label-orange
  background-color: #ff9f19
  color: #000000 //Black text for better visibility

.card-label-red
  background-color: #eb4646

.card-label-purple
  background-color: #a632db

.card-label-blue
  background-color: #0079bf

.card-label-pink
  background-color: #ff78cb
  color: #000000 //Black text for better visibility

.card-label-sky
  background-color: #00c2e0

.card-label-black
  background-color: #4d4d4d

.card-label-lime
  background-color: #51e898
  color: #000000 //Black text for better visibility

.card-label-silver
  background-color: #c0c0c0
  color: #000000 //Black text for better visibility

.card-label-peachpuff
  background-color: #ffdab9
  color: #000000 //Black text for better visibility

.card-label-crimson
  background-color: #dc143c

.card-label-plum
  background-color: #dda0dd
  color: #000000 //Black text for better visibility

.card-label-darkgreen
  background-color: #006400

.card-label-slateblue
  background-color: #6a5acd

.card-label-magenta
  background-color: #ff00ff

.card-label-gold
  background-color: #ffd700
  color: #000000 //Black text for better visibility

.card-label-navy
  background-color: #000080

.card-label-gray
  background-color: #808080

.card-label-saddlebrown
  background-color: #8b4513

.card-label-paleturquoise
  background-color: #afeeee
  color: #000000 //Black text for better visibility

.card-label-mistyrose
  background-color: #ffe4e1
  color: #000000 //Black text for better visibility

.card-label-indigo
  background-color: #4b0082

.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

.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
  margin-bottom: 3px
  width: 190px
  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
    padding-right: 32px

    .card-label-selectable-icon
      right: 6px

  &.selected,
  &:hover
    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