frc-ui/es/date-picker/style/index.less

React Web UI

@calendar: ant-calendar;
.swc-calendar-picker-container {
  padding-top: 27px;
  .ant-calendar-input-wrap {
    display: none !important;
  }
  .@{calendar} {
    background-color: #193d37;
    border: 1px solid #136c5e;
    &-range-middle {
      display: none;
    }
    &-panel,
    &-range {
      border: 1px solid #136c5e;
    }
    &-in-range-cell {
      &:before {
        background: #136c5e;
      }
    }
    &-date-panel {
    }
    &-header {
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #136c5e;
    }
    &-today {
      & > .@{calendar}-date {
        color: #0a0f0e;
        background: #ff9300;
        border-color: #ff9300;
      }
    }
    &-selected-day {
      & > .ant-calendar-date {
        color: #ff9300;
        background: transparent;
        border-color: #ff9300;
      }
    }
    &-year-select,
    &-month-select,
    &-next-month-btn,
    &-next-year-btn,
    &-prev-year-btn,
    &-prev-month-btn,
    &-year-panel-prev-decade-btn,
    &-year-panel-decade-select,
    &-year-panel-next-decade-btn,
    &-month-panel-prev-year-btn,
    &-month-panel-year-select,
    &-month-panel-next-year-btn {
      line-height: 30px;
    }
    &-year-panel {
      top: 0;
      background-color: #193d37;
      &-header {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #136c5e;
      }
    }
    &-year-panel-year:hover {
      background: #136c5e;
    }
    &-year-panel-selected-cell {
      & > .ant-calendar-year-panel-year {
        color: #0a0f0e;
        background: #ff9300;
      }
    }
    &-month-panel {
      top: 0;
      background-color: #193d37;
      &-header {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #136c5e;
      }
    }
    &-month-panel-month:hover {
      background: #136c5e;
    }
    &-month-panel-selected-cell {
      & > .ant-calendar-month-panel-month {
        color: #0a0f0e;
        background: #ff9300;
      }
    }
    &-month-panel-cell-disabled {
      & > .ant-calendar-month-panel-month {
        color: #172422;
        background: transparent;
      }
    }
    &-picker-clear {
      color: #68420f;
      &:hover {
        color: #a35000;
      }
    }
  }
  .@{calendar}-time-picker {
    top: 31px !important;
    &-input-wrap {
      display: block;
    }
    &-select-option-selected {
      background: #ff9300;
      color: #0a0f0e;
    }
    &-combobox {
      height: 198px !important;
    }
  }
}