wekan/client/components/lists/list.styl

@import 'nib'

.list
  box-sizing: border-box
  display: flex
  flex-direction: column
  flex: 0 0 270px
  position: relative
  // Even if this background color is the same as the body we can't leave it
  // transparent, because that won't work during a list drag.
  background: darken(white, 13%)
  border-left: 1px solid darken(white, 20%)
  padding: 0
  float: left

  &:first-child
    margin-left: 5px
    border-left: none

  .card-details + &
    border-left: none

  &.ui-sortable-helper
    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .5)
    transform: rotate(4deg)
    cursor: grabbing

    .list-header.ui-sortable-handle
      cursor: grabbing

  &.placeholder
    background-color: rgba(0, 0, 0, .2)
    border-color: transparent
    box-shadow: none
    height: 100px

  &.list-composer, & .list-composer
    .open-list-composer
      color: #8c8c8c

    .list-name-input
      background: white
      margin: -3px 0 8px

.list-header-add
  flex: 0 0 auto
  padding: 20px 12px 4px
  position: relative
  min-height: 20px

.list-header
  flex: 0 0 auto
  padding: 20px 12px 4px
  position: relative
  min-height: 20px
  background-color: #e4e4e4;
  border-bottom: 6px solid #e4e4e4;

  &.list-header-card-count
    min-height: 35px
    height: auto

  &.ui-sortable-handle
    cursor: grab

  .list-header-left-icon
    display: none

  .list-header-name
    display: inline
    font-size: 16px
    line-height: 17px
    margin: 0
    font-weight: bold
    min-height: 9px
    min-width: 30px
    overflow: hidden
    text-overflow: ellipsis
    word-wrap: break-word


  .list-header-watch-icon
    padding-left: 10px
    color: #a6a6a6

  .list-header-menu
    float: right

  .list-header-plus-top
    color: #a6a6a6
    margin-right: 15px

  .highlight
    color: #ce1414

  .cardCount
    color: #8c8c8c
    font-size: 12px
    font-weight: bold

.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
    color #4d4d4d
    padding-left 4px

.list-body
  flex: 1 1 auto
  flex-direction: column
  display: flex
  overflow-y: auto
  padding: 5px 11px

  .minicards
    flex-grow: 1
    flex-shrink: 0

    form
      margin-bottom: 9px

  .open-minicard-composer
    border-radius: 2px
    color: #8c8c8c
    display: block
    padding: 7px 10px
    position: relative
    text-decoration: none
    animation: fadeIn 0.3s

    i.fa
      margin-right: 7px

    &:hover
      background: #fafafa
      color: #222
      box-shadow: 0 1px 2px rgba(0,0,0,.2)

#js-wip-limit-edit
  padding-top: 2%

  p
    margin-bottom: 0

  input
    display: inline-block

  .wip-limit-value
    width: 20%
    margin-right: 5%

  .wip-limit-error
    display: none

  .soft-wip-limit
    margin-right: 8px

  div
    float: left

@media screen and (max-width: 800px)
  .mini-list
    flex: 0 0 60px
    height: auto
    width: 100%
    border-left: 0px
    border-bottom: 1px solid darken(white, 20%)

  .list
    display: contents
    flex-basis: auto
    width: 100%
    border-left: 0px
    &:first-child
      margin-left: 0px

    &.ui-sortable-helper
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

      .list-header.ui-sortable-handle
        cursor: grabbing

    &.placeholder
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

  .list-body
    padding: 15px 19px;

  .list-header
    padding: 0 12px 0px
    border-bottom: 0px solid #e4e4e4
    height: 60px
    margin-top: 10px
    display: flex
    align-items: center
    .list-header-left-icon
      padding: 7px
      padding-right: 27px
      margin-top: 1px
      top: -@padding
      left: -@padding

    .list-header-menu-icon
      position: absolute
      padding: 7px
      top: 50%
      transform: translateY(-50%)
      right: 47px
      font-size: 20px

    .list-header-handle
      position: absolute
      padding: 7px
      top: 50%
      transform: translateY(-50%)
      right: 10px
      font-size: 24px

  .list-header
    display: grid
    grid-template-columns: 30px 5fr 1fr
    .list-header-left-icon
      display: grid
      grid-row: 1/3
      grid-column: 1
    .list-header-name
      grid-row: 1
      grid-column: 2
      align-self: end
    .cardCount
      grid-row: 2
      grid-column: 2
      align-self: start
    .list-header-menu
      grid-row: 1/3
      grid-column: 3
    .inlined-form
      grid-row: 1/3
      grid-column: 1/4
    .edit-controls
      align-items: initial

.link-board-wrapper
  display: flex
  align-items: baseline

  .js-link-board
    margin-left: 15px

.search-card-results
  max-height: 250px
  overflow: hidden

.sk-spinner-list
  margin-top: unset !important

list-header-color(background, color...)
  border-bottom: 6px solid background

.list-header-white
  list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
  border: 1px solid #eee

.list-header-green
  list-header-color(#3cb500, #ffffff) //White text for better visibility

.list-header-yellow
  list-header-color(#fad900, #4d4d4d) //Black text for better visibility

.list-header-orange
  list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility

.list-header-red
  list-header-color(#eb4646, #ffffff) //White text for better visibility

.list-header-purple
  list-header-color(#a632db, #ffffff) //White text for better visibility

.list-header-blue
  list-header-color(#0079bf, #ffffff) //White text for better visibility

.list-header-pink
  list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility

.list-header-sky
  list-header-color(#00c2e0, #ffffff) //White text for better visibility

.list-header-black
  list-header-color(#4d4d4d, #ffffff) //White text for better visibility

.list-header-lime
  list-header-color(#51e898, #4d4d4d) //Black text for better visibility

.list-header-silver
  list-header-color(unset, #4d4d4d) //Black text for better visibility

.list-header-peachpuff
  list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility

.list-header-crimson
  list-header-color(#dc143c, #ffffff) //White text for better visibility

.list-header-plum
  list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility

.list-header-darkgreen
  list-header-color(#006400, #ffffff) //White text for better visibility

.list-header-slateblue
  list-header-color(#6a5acd, #ffffff) //White text for better visibility

.list-header-magenta
  list-header-color(#ff00ff, #ffffff) //White text for better visibility

.list-header-gold
  list-header-color(#ffd700, #4d4d4d) //Black text for better visibility

.list-header-navy
  list-header-color(#000080, #ffffff) //White text for better visibility

.list-header-gray
  list-header-color(#808080, #ffffff) //White text for better visibility

.list-header-saddlebrown
  list-header-color(#8b4513, #ffffff) //White text for better visibility

.list-header-paleturquoise
  list-header-color(#afeeee, #4d4d4d) //Black text for better visibility

.list-header-mistyrose
  list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility

.list-header-indigo
  list-header-color(#4b0082, #ffffff) //White text for better visibility