zui/src/less/views/dashboard.less

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

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


// Dashboard view

.dashboard {
  position: relative;

  .panel { position: relative; }

  .panel-actions {
    position: absolute;
    right: 0;
    top: 0;

    .dropdown-menu {
      min-width: 80px;

      > li > a { padding: 3px 10px; }
    }

    > a,
    > .dropdown > a {
      color: @color-gray;
      text-decoration: none !important;
    }

    > a,
    > .btn,
    > .dropdown {
      display: block;
      float: left;
    }

    > a,
    > .btn,
    > .dropdown > a,
    > .dropdown > .btn {
      display: block;
      padding: 0 3px;
      min-width: 28px;
      height: 31px;
      line-height: 30px;
      text-align: center;
      border: none;
      border-radius: 0;
      .opacity(0.7);
    }

    > a,
    > .dropdown > a {
      &:hover { background-color: rgba(0,0,0,.1); }
    }
  }

  .panel-heading {
    font-weight: bold;
    padding: 6px 60px 6px 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 32px;

    > .icon { .opacity(0.7); }

    &:hover > .panel-actions {
      > .btn,
      > .dropdown > .btn,
      > .dropdown > a,
      > a {
        .opacity(1);
      }
    }
  }

  .panel-body {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    overflow: auto;

    &.no-padding { padding: 0; }

    > :last-child { margin: 0; }

    > .list-group {
      .list-group-item {
        &:first-child {border-top: none}
        border-left: none;
        border-right: none;
        border-radius: 0;
      }
    }
  }

  &.dashboard-draggable {
    .panel-heading { cursor: move; }
  }

  .panel-dragging {
    border: 1px solid #fff;
    background:rgba(0,0,0,0.1);
    box-shadow: none!important;
    color:#fff;

    > * {.opacity(0.1);}
  }

  .panel-dragging-shadow {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 1px 5px 15px rgba(0,0,0,0.5)!important;
    background: rgba(255,255,255,0.5);
    cursor: move;

    > * {.opacity(0.7);}

    &.circle {
      overflow: hidden;
      transition: width 0.2s, height 0.2s;
      border-radius: 50%;

      .panel-actions {display: none}
    }
  }

  .dragging-col-holder {display: none}

  &.dashboard-holding {
    .dragging-col-holder {display: block;}
    .dragging-col {display: none}
  }

  .resize-handle {
    position: absolute;
    top: 0;
    bottom: @line-height-computed;
    right: (@grid-gutter-width / 2) + (-6px);
    width: 12px;
    cursor: e-resize;
    border-radius: @border-radius-base;
    .opacity(0);
    .transition-normal(opacity);

    > .icon {
      display: block;
      width: 20px;
      height: 20px;
      top: 50%;
      position: absolute;
      margin-top: -10px;
      line-height: 20px;
      text-align: center;
      left: 0;
      background-color: fade(@color-primary, 20%);
      color: @color-primary;
      .transition-normal(left, top);
    }

    &:hover {
      .opacity(1);
      background-color: fade(@color-primary, 12%);

      > .icon { left: -4px; }
    }

    &.resize-vertical {
      left: (@grid-gutter-width / 2);
      right: (@grid-gutter-width / 2);
      top: auto;
      bottom: @line-height-computed + (-6px);
      width: auto;
      height: 12px;
      cursor: n-resize;

      > .icon {
        left: 50%;
        margin-left: -10px;
        top: 0;
        margin-top: 0;
      }

      &:hover {
        .opacity(1);
        background-color: fade(@color-primary, 12%);

        > .icon { top: -4px; }
      }
    }
  }

  .resizing { .transition-fast(width); }
  .resizing-v .resize-vertical {
    opacity: 1;
    > .icon { top: -4px; }
  }
  .resizing-h .resize-horizontal {
    opacity: 1;
    > .icon { left: -4px; }
  }
  .resizing {
    .resize-handle {background-color: fade(@color-primary, 12%);}
  }

  .panel-body:after,
  .panel-body:before {
    content: ' ';
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: visibility .2s, opacity .2s;
  }

  .panel-body:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }

  .panel-body:after {
    .icon-zenicon();
    animation: spin 2s infinite linear;
    font-size: 28px;
    content: @icon-spinner-indicator;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-top: -20px;
    margin-left: -20px;
  }

  .panel-loading > .panel-body {
    overflow: hidden;
    &:before,
    &:after {
      visibility: visible;
      opacity: .5;
    }
  }
}

.dashboard-inverse {
  background-color: @color-primary;

  .panel { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); }

  .panel-dragging { background:rgba(0,0,0,0.3); }

  .panel-dragging-shadow { box-shadow: 1px 2px 15px rgba(0,0,0,0.5)!important; }
}