zui/src/less/views/calendar.less

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

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

// Calendar view

.calendar {
  margin-bottom: 20px;

  > header {
    margin-bottom: 10px;

    .btn-toolbar > .btn-group { margin-right: 10px; }
    .calendar-caption { line-height: 30px; }
  }

  .table {
    table-layout: fixed;
    margin-bottom: 0;

    > thead > tr > th,
    > tbody> tr > td {
      width: 14.28571428571429%;
      padding: 0;
    }

    > thead > tr > th {
      background-color: @color-back;
      text-align: center;
      color: @color-gray;
    }
  }

  .weekends-empty .table {
    > thead > tr > th,
    > tbody> tr > td {
      width: 20%;
    }

    > thead > tr > th.weekend-head,
    > tbody> tr > td.weekend-day {
      width: 60px;
      min-width: 40px;
    }
  }

  .day {
    opacity: .7;

    > .heading {
      text-align: right;
      padding: 2px 5px;

      > .month {
        background-color: lighten(@color-gray, 20%);
        color: @color-back;
        border-radius: @border-radius-small;
        padding: 1px 2px;
        white-space: nowrap;
      }
    }

    > .content {
      min-height: 70px;
      height: 100%;
    }
  }

  .cell-day {
    background-color: @color-gray-pale;

    &.past {
      > .day > .content {
        opacity: .7;
      }
    }

    &.current-month {
      background: none;

      > .day { opacity: 1; }
    }

    &.current {
      background-color: @color-warning-pale;
      box-shadow: inset 1px 1px 0 @color-gray, inset -1px -1px 0 @color-gray;

      > .day > .content {
        padding: 0;
      }

      > .day > .heading {
        background-color: rgba(0, 0, 0, .1);
      }
    }

    &.drop-to {
      opacity: 1;
      background-color: @color-warning-pale;
    }
  }

  .event {
    cursor: pointer;
    padding: 1px 5px;
    opacity: .95;
    margin: 0 1px 1px;
    .bg-primary();
    .transition();

    &:hover       { opacity: 1; }
    &.drag-shadow { cursor: move; }
    &.drag-from   { opacity: .25; }

    &.color-red     { .bg-danger(); }
    &.color-green   { .bg-success(); }
    &.color-yellow  { .bg-warning(); }
    &.color-blue    { .bg-info(); }
    &.color-brown   { .bg-important(); }
    &.color-purple  { .bg-special(); }
  }

  &.limit-event-title {
    .event {
      .nobr();
      text-overflow: ellipsis;
    }
  }
}