wekan/client/components/boards/boardsList.styl

@import 'nib'

$spaceBetweenTiles = 16px

.board-list
  margin: 0 ($spaceBetweenTiles/2)

  li
    float: left
    width: 20%
    box-sizing: border-box
    position: relative

    &.placeholder:after
      content: '';
      display: block;
      background: darken(white, 20%)
      border-radius: 3px;
      height: 106px;
      margin: 8px;

    &.ui-sortable-helper
      cursor: grabbing
      transform: rotate(4deg)
      display: block !important

    &.starred
      .fa-star,
      .fa-star-o
        opacity: 1

  .board-list-item
    overflow: hidden;
    background-color: #999
    color: #f6f6f6
    min-height: 100px
    font-size: 16px
    line-height: 22px
    border-radius: 3px
    display: block
    font-weight: 700
    padding: 8px
    margin: ($spaceBetweenTiles/2)
    position: relative
    text-decoration: none
    word-wrap: break-word

    &.tile
      background-size: auto
      background-repeat: repeat

  .board-list-item-sub-name
    color: rgba(255, 255, 255, .5)
    display: block
    font-size: 14px
    font-weight: 400
    line-height: 22px

  .board-list-item-desc
    color: #fff
    display: block
    font-size: 14px
    font-weight: 400
    line-height: 18px

  .js-add-board
    text-align:center

    .label
      font-weight: normal
      line-height: 56px

    :hover
      background-color:#939393

  .fa-star,
  .fa-star-o
    bottom: 0
    font-size: 14px
    height: 18px
    line-height: 18px
    opacity: 0
    padding: 9px 9px
    position: absolute
    right: 0
    top: 0
    transition-duration: .15s
    transition-property: color, font-size, background

  .fa-circle
    bottom: 0;
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    padding: 9px 9px;
    position: absolute;
    right: 0;
    transition-duration: .15s
    transition-property: color, font-size, background

  .has-overtime-card-active
    color: #eb4646 !important

  .no-overtime-card-active
    color: #3cb500 !important

  .is-star-active
    color: white

  .fa-clone
    position: absolute;
    bottom: 0
    font-size: 14px
    height: 18px
    line-height: 18px
    opacity: 0
    right: 0
    padding: 9px 9px
    transition-duration: .15s
    transition-property: color, font-size, background

  .fa-archive
    position: absolute;
    bottom: 0
    font-size: 14px
    height: 18px
    line-height: 18px
    opacity: 0
    left: 0
    padding: 9px 9px
    transition-duration: .15s
    transition-property: color, font-size, background

  li:hover a
    &:hover
      .fa-star,
      .fa-clone,
      .fa-archive,
      .fa-star-o
        color: white

    .fa-star,
    .fa-clone,
    .fa-archive,
    .fa-star-o
      color: white
      opacity: .75

      &:hover
        font-size: 18px
        opacity: 1

      &.is-star-active
        opacity: 1

.board-backgrounds-list

  .board-background-select
    box-sizing: border-box
    display: block
    float: left
    width: 50%
    padding-top: 12px
    position: relative
    z-index: 1

    &:nth-child(-n + 2)
      padding-top: 0

    &:nth-child(2n)
      padding-left: 6px

    &:nth-child(2n+1)
      padding-right: 6px

    .background-box
      color: white
      border-radius: 3px
      background-size: cover
      display: block
      height: 74px
      position: relative
      width: 100%
      cursor: pointer
      display: flex
      align-items: center
      justify-content: center

      i.fa-check
        font-size: 25px
        color: white

@media screen and (max-width: 800px)
  .board-list
    height: 100%
    overflow: scroll

    li
      width: 50%

    .board-list-item
      overflow: hidden
      height: 8rem

    .board-list-item-sub-name
      position: relative
      top: -100px
      left: -100px

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

@media screen and (max-width: 360px)
    li
      width: 100%

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