zui/src/less/views/boards.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: boards.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Boards view

.board-item {
  border: 1px solid @color-gray-light;
  margin-bottom: 5px;
  padding: 6px 10px;
  background: @color-back;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  .transition();

  &:hover { box-shadow: 0 1px 1 rgba(0, 0, 0, 0.1); }

  &.board-item-empty {
    color: @color-gray;
    display: none;
    border-style: dashed;
  }

  &.board-item-shadow {
    .transition();
    display: none;
    border: none;
    padding: 0;
    background: @color-gray-light;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    border-color: @color-gray-light;
  }

  &.drag-shadow {
    width: 250px;
    border-color: darken(@color-gray-light, 10%);
    background-color: @color-back;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
    cursor: move;
    opacity: 0.9;
  }

  &.drag-from { background-color: @color-pale; }
}

.board-list {
  .board-item:last-child {margin-bottom: 0;}
}

.board {
  float: left;
  width: 250px;
  margin-right: 10px;

  &.drop-in-empty {
     .board-item-empty {
        height: 0; padding: 0; border: transparent; overflow: hidden; margin: 0;
     }
  }

  &:last-child { margin-right: 0; }

  > .panel-body {
    padding: 5px;
    background: @color-gray-pale;
  }
}

.boards {
  .clearfix-mixin();

  &.dragging {
    .board {
      &.drop-in {
         border-color: darken(@color-gray-light, 10%);
         box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
        .board-item-shadow {display: block;}
      }

      .board-item.board-item-empty {display: block;}
    }

    .board-item.disable-drop {display: none;}
  }

  &.drop-in {
    .board-item.drag-from {height: 0; padding: 0; border: transparent; overflow: hidden; margin: 0;}
  }
}