标签：样式 month ant color 日期 background 组件 calendar panel

/** 处理日期控件 **/
.ant-calendar-picker-container {
  .ant-calendar {
    border: 1px solid #2a64ff;
  }

  //背景
  .ant-calendar-date-panel {
    position: relative;
    outline: none;
    background: #1d3d85;
  }

  //第一条线
  .ant-calendar-input-wrap {
    height: 34px;
    padding: 6px 10px;
    border-bottom: 1px solid #244a9f;
  }

  .ant-calendar-range .ant-calendar-body,
  .ant-calendar-range .ant-calendar-month-panel-body,
  .ant-calendar-range .ant-calendar-year-panel-body,
  .ant-calendar-range .ant-calendar-decade-panel-body {
    border-top: 1px solid #2c57b9;
  }

  // .ant-calendar-date {
  //   color: red;
  // }
  .ant-calendar-range .ant-calendar-in-range-cell::before {
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 4px;
    left: 0;
    display: block;
    background: #264ea7;
    border: 0;
    border-radius: 0;
    content: '';
  }

  .ant-calendar table,
  .ant-calendar th,
  .ant-calendar td {
    text-align: center;
    border: 0;
    color: #a3bcff;
  }

  //选中的字颜色
  .ant-calendar-in-range-cell {
    .ant-calendar-date {
      color: #86a0e5;
    }
  }

  //不能选的字颜色
  .ant-calendar-last-month-cell,
  .ant-calendar-next-month-btn-day {
    .ant-calendar-date {
      color: #45589b !important;
    }
  }

  //默认字
  .ant-calendar-cell {
    .ant-calendar-date {
      color: #6387e7;
    }
  }

  .ant-calendar-header .ant-calendar-century-select,
  .ant-calendar-header .ant-calendar-decade-select,
  .ant-calendar-header .ant-calendar-year-select,
  .ant-calendar-header .ant-calendar-month-select {
    display: inline-block;
    padding: 0 2px;
    color: #a3b0df;
    font-weight: 500;
    line-height: 40px;
  }

  // .ant-calendar-picker-container .ant-calendar-range .ant-calendar-in-range-cell::before {
  //   position: absolute;
  //   top: 4px;
  //   right: 0;
  //   bottom: 4px;
  //   left: 0;
  //   display: block;
  //   background: #234aa1;
  //   border: 0;
  //   border-radius: 0;
  //   content: '';
  // }

  .ant-calendar-date:hover {
    background: #4a68fb;
    cursor: pointer;
  }

  .ant-calendar-range .ant-calendar-input,
  .ant-calendar-range .ant-calendar-time-picker-input {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    background-color: #294fa4;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: 24px;
    padding-right: 0;
    padding-left: 0;
    line-height: 24px;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center;
  }

  .ant-calendar-footer {
    padding: 0 12px;
    line-height: 38px;
    border-top: 1px solid #2c57b9;
    background: #1d3d85;
  }

}

.ant-calendar-picker-container {
  .ant-calendar-input-wrap {
    border-bottom: 1px solid #244a9f;
    background: #244693;

    .ant-calendar-input {
      background: #244693;
      color: #fff;
      text-align: center;
    }
  }

  .ant-calendar-time-picker-select {
    background: #244693;
  }

  .ant-calendar-time-picker-select {
    border-right: 1px solid #244a9f;
  }

  .ant-calendar-time-picker-select li {
    color: #a3abce;
  }

  li.ant-calendar-time-picker-select-option-selected {
    font-weight: 600;
    background: #1d4db9;
  }

  .ant-calendar-header {
    border-bottom: 1px solid #244a9f;
  }

  .ant-calendar-time .ant-calendar-day-select {
    color: #a3b0ce;
  }

  .ant-calendar-disabled-cell .ant-calendar-date {
    position: relative;
    width: auto;
    color: rgba(0, 0, 0, 0.25);
    background: #284fa6;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: not-allowed;
  }

  .ant-calendar-time-picker {
    position: absolute;
    top: 40px;
    width: 100%;
    background-color: #1d3d85;
  }

  .ant-calendar-range-left .ant-calendar-time-picker-inner {
    border-right: 1px solid #244a9f;
  }

  .ant-calendar-range-right .ant-calendar-time-picker-inner {
    border-left: 1px solid #244693;
  }

  .ant-calendar-month-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: #244693;
    border-radius: 4px;
    outline: none;
  }

  .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
  .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover {
    color: #a3abce;
    background: #3560c1;
    cursor: not-allowed;
  }

  .ant-calendar-year-panel {
    background: #244693;
  }

  .ant-calendar-month-panel {
    background: #244693;
  }

  .ant-calendar-month-panel-month {
    color: #a3abce;
  }

  .ant-calendar-month-panel-month:hover {
    background: #175ae1;
    cursor: pointer;
  }

  .ant-calendar-year-panel-year:hover {
    background: #175ae1;
    cursor: pointer;
  }

  .ant-calendar-year-panel-year {
    color: #a3abce;
  }

  .ant-calendar-year-panel-header .ant-calendar-year-panel-century-select,
  .ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select,
  .ant-calendar-year-panel-header .ant-calendar-year-panel-year-select,
  .ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
    color: #a3abce;
  }

  .ant-calendar-month-panel-header .ant-calendar-month-panel-century-select,
  .ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select,
  .ant-calendar-month-panel-header .ant-calendar-month-panel-year-select,
  .ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
    color: #a3abce;
  }

  .ant-calendar-decade-panel-decade {
    color: #a3abce;
  }

  .ant-calendar-decade-panel {
    background: #1d3d85;
  }

  .ant-calendar-decade-panel-century {
    color: #a3abce;
  }

  .ant-calendar-decade-panel-decade:hover {
    background: #175ae1;
    cursor: pointer;
  }
}

标签：样式,month,ant,color,日期,background,组件,calendar,panel
来源： https://www.cnblogs.com/ff2ting/p/16227832.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。