app-default-calendar.less 3.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';

.calendar{
  height:100%;
  overflow: auto;
  .context-menu-container {
      height: calc(100% - 70px);
  }
  .el-timeline{
    padding-left: 2px;
  }
  .app-data-empty{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .event-legends{
    width: 100%;
    text-align: center;
    .event-lengend{
      display: inline-block;
      margin-left: 10px;
      height: 20px;
      .lengend-icon{
        display: inline-block;
        width: 30px;
        height: 20px;
        border-radius: 5px;
      }
      span{
        display: inline-block;
        margin-left: 5px;
        line-height: 20px;
        vertical-align: top;
      }
    }
    .event-lengend.event-disabled{
      .lengend-icon{
        background:var(--ctrl-background-color-bright) !important;
      }
      span{
        color:var(--ctrl-font-color-bright) !important;
      }
    }
  }
}
// 时间轴选中样式
.el-timeline{
    .el-timeline-item{
        .el-card.is-always-shadow.is-select{
            box-shadow: 0px 0px 3px 1px var(--ctrl-background-color-bright);        
        }
    }
}
// 选中样式
.calendar .selected-event,
.select-first-calendar .select-first-event{
  border: 2px solid var(--ctrl-font-color) !important;
}
.calendar .fc-dayGrid-view .selected-event.fc-end:before,
.select-first-calendar .fc-dayGrid-view .select-first-event:before,
.calendar .fc-timeGrid-view .selected-event.fc-end:before,
.select-first-calendar .fc-timeGrid-view .select-first-event:before{
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 9px solid var(--ctrl-font-color);
  border-top-color: transparent;
  border-left-color: transparent;
  color:var(--ctrl-font-color-light);
}
.calendar .fc-dayGrid-view .selected-event.fc-end:after,
.select-first-calendar .fc-dayGrid-view .select-first-event:after,
.calendar .fc-timeGrid-view .selected-event.fc-end:after,
.select-first-calendar .fc-timeGrid-view .select-first-event:after{
  content: '';
  display: block;
  width: 4px;
  height: 11px;
  position: absolute;
  right: 1px;
  bottom: 0px;
  border: 2px solid var(--ctrl-font-color-bright);
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-sizing: content-box;
}
// 选择跳转日期模态
.date-select-model{
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
      top: 0;
      .ivu-modal-body {
        text-align: center;
      }
      .ivu-modal-content >.ivu-modal-footer button {
        border-color: #e3e5e8;
      }
  }
}

.calendar-popover {
  .ivu-dropdown {
    .ivu-select-dropdown {
      top: 0px;
      margin: 0;
      padding: 0;
    }
  }
}

//默认样式日历按钮
.view-default {
  .fc-toolbar {
    .fc-button {
      background: var(--button-background-color);
      color: var(--button-font-color);
      border-color: var(--button-font-color-light);
      height: 28px;
      width: 62px;
      &:hover {
        background: var(--button-background-color-bright);
        color: var(--button-font-color-bright);
        border-color: var(--button-font-color-bright);
      }
      &:disabled, &:disabled:hover {
        background: var(--button-background-color-light);
        color: var(--button-font-color-light);
        border-color: var(--button-font-color-light);
        cursor: no-drop;
      }
      line-height: 0;
      span {
        line-height: 0.7;
      }
    }
    .fc-button.fc-button-active {
      background: var(--button-background-color-bright);
      color: var(--button-font-color-bright);
      border-color: var(--button-font-color-bright);
    }
  }
}