dtd/es/calendar/style/index.less

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

@import "../../style/themes/default";
@import "../../style/mixins/index";

@full-calendar-prefix-cls: ~"@{dt-prefix}-fullcalendar";
@text-color: #666;

.@{full-calendar-prefix-cls} {
  .reset-component;
  outline: none;
  border-top: @border-width-base @border-style-base @border-color-base;

  &-month-select {
    margin-left: 5px;
  }

  &-header {
    padding: 10px 12px;
    overflow: auto;

    .@{dt-prefix}-select-dropdown {
      text-align: left;
    }

    .@{dt-prefix}-radio-group {
      margin-left: 8px;
      text-align: left;
    }

    label.@{dt-prefix}-radio-button {
      height: 22px;
      line-height: 20px;
      padding: 0 10px;
    }
  }

  &-current-date {
    float: left;
    font-size: 24px;
    color: @text-color;

    &:hover {
      color: #28d0fa;
    }
  }

  &-filter-date {
    float: right;
  }

  &-today {
    color: @text-color;
  }

  &-go-today, &-select-panel {
    background-color: #e5f7fd;
  }

  &-prev-month, &-next-month {
    font-size: 16px;
    color: #979797;
  }

  &-prev-month {
    padding-right: 6px;
    margin-right: 6px;

    &::after {
      content: '\2039';
    }
  }

  &-next-month {
    padding-left: 6px;
    margin-left: 6px;
    margin-right: 16px;

    &::after {
      content: '\203A';
    }
  }

  &-panel-btn {
    color: @text-color;
    padding: 4px 16px;
  }

  &-date-panel {
    position: relative;
    outline: none;
  }

  &-calendar-body {
    padding: 8px 12px;
  }

  table {
    border-collapse: collapse;
    max-width: 100%;
    background-color: transparent;
    width: 100%;
    height: 256px;
  }

  td {
    position: relative;
  }

  &-calendar-table {
    border-spacing: 0;
    margin-bottom: 0;
  }

  &-column-header {
    line-height: 18px;
    padding: 0;
    width: 33px;
    text-align: center;
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: block;
      font-weight: normal;
    }
  }

  &-week-number-header {
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: none;
    }
  }

  &-month,
  &-date {
    text-align: center;
    transition: all .3s;
  }

  &-value {
    display: block;
    margin: 0 auto;
    color: @text-color;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    line-height: 24px;
    transition: all .3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      background: @primary-color;
      color: #fff;
    }
  }

  &-month-panel-cell &-value {
    width: 48px;
  }

  &-today &-value,
  &-month-panel-current-cell &-value {
    box-shadow: 0 0 0 1px @primary-color inset;
  }

  &-selected-day &-value,
  &-month-panel-selected-cell &-value {
    background: @primary-color;
    color: #fff;
  }

  &-disabled-cell-first-of-row &-value {
    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }

  &-disabled-cell-last-of-row &-value {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }

  &-last-month-cell &-value,
  &-next-month-btn-day &-value {
    color: @disabled-color;
  }

  &-month-panel-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
  }

  &-content {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -9px;
  }

  &-fullscreen {
    border-top: 0;
  }

  &-fullscreen &-table {
    table-layout: fixed;

    thead {
      background: #e5e9ee;
    }
  }

  &-fullscreen &-tbody, &-fullscreen &-month-panel-tbody {
    /* 禁止文字选中 */
    moz-user-select: -moz-none; 
    -moz-user-select: none; 
    -o-user-select:none; 
    -khtml-user-select:none; 
    -webkit-user-select:none; 
    -ms-user-select:none; 
    user-select:none;
    
    border: @border-width-base @border-style-base @border-color-base;
    border-right: none;
    border-bottom: none;

    td {
      text-align: center;
      border: @border-width-base @border-style-base @border-color-base;
      border-left: none;
      border-top: none;
    }
  }

  &-fullscreen &-time {
    line-height: 25px;
  }

  &-fullscreen &-all-day {
    line-height: 40px;
  }

  &-fullscreen &-all-day-cell, &-fullscreen &-time-cell {
    cursor: pointer;
    &:hover {
      background: @item-hover-bg;
    }
    &:active {
      background: @primary-2;
    }
  }

  &-fullscreen &-selected-time {
    background: @primary-2;

    &:hover {
      background: @primary-2;
    }
  }

  &-fullscreen &-weekend-cell {
    background: #f9f9f9;
  }

  &-fullscreen &-header {
    .@{dt-prefix}-radio-group {
      margin-left: 16px;
    }
    label.@{dt-prefix}-radio-button {
      height: @input-height-base;
      line-height: @input-height-base - 2px;
    }
  }

  &-fullscreen &-month,
  &-fullscreen &-date {
    text-align: left;
    display: block;
    color: @text-color;
    height: 116px;
    padding: 4px 12px;
    transition: background .3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      background: @primary-2;
    }
  }

  &-fullscreen &-column-header {
    text-align: center;
    line-height: 20px;
    color: @text-color;
  }

  &-fullscreen &-day-left {
    width: 12.5%;
  }

  &-fullscreen &-day-right {
    width: 87.5%;
  }

  &-fullscreen &-value {
    text-align: right;
    background: transparent;
    width: auto;
  }

  &-fullscreen &-today &-value {
    color: @text-color;
  }

  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    border-top-color: @primary-color;
    background: transparent;
  }

  &-fullscreen &-month-panel-current-cell &-value,
  &-fullscreen &-today &-value {
    box-shadow: none;
  }

  &-fullscreen &-month-panel-selected-cell &-month,
  &-fullscreen &-selected-day &-date {
    background: @primary-1;
  }

  &-fullscreen &-month-panel-selected-cell &-value,
  &-fullscreen &-selected-day &-value {
    color: #1a1a1a;
  }

  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-fullscreen &-content {
    height: 80px;
    overflow-y: auto;
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
  }

  &-disabled-cell &-date {
    &,
    &:hover {
      cursor: not-allowed;
    }
  }

  &-disabled-cell:not(&-today) &-date {
    &,
    &:hover {
      background: transparent;
    }
  }

  &-disabled-cell &-value {
    color: @disabled-color;
    border-radius: 0;
    width: auto;
    cursor: not-allowed;
  }
}