1. 程式人生 > 其它 >日期元件樣式

日期元件樣式

/** 處理日期控制元件 **/
.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; } }