index.less 2.01 KB
Newer Older
1 2 3 4 5 6 7
@root-entry-name: 'default';
@import '~antd/es/style/themes/index.less';
@datepicker-custom-prefix-cls: ~'@{ant-prefix}-datepicker-custom';
.@{datepicker-custom-prefix-cls}-quarter-box {
  width: 230px;
}
.@{datepicker-custom-prefix-cls}-quarter {
8 9
  .@{ant-prefix}-picker-year-panel,
  .@{ant-prefix}-picker-quarter-panel {
10 11 12
    width: 230px;
  }
  // 修改选中的年份、季度背景颜⾊
13 14
  .@{ant-prefix}-picker-cell-selected {
    .@{ant-prefix}-picker-cell-inner {
李纪文's avatar
李纪文 committed
15
      background: #1890ff;
16 17 18
    }
  }
  // 使⽤CSS改变季度选择器的内容
19 20
  .@{ant-prefix}-picker-quarter-panel {
    .@{ant-prefix}-picker-content {
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
      // 使季度选择器可以换⾏成两排
      tr {
        display: flex;
        flex-wrap: wrap;
      }
      // 控制按钮外层宽度,使器溢出换⾏
      td {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: 50px;
        padding: 20px;
      }
    }
    // 使before伪元素和按钮背景颜⾊⼀致
37
    .@{ant-prefix}-picker-cell-selected {
38 39
      &::before {
        color: #fff;
李纪文's avatar
李纪文 committed
40
        background: #1890ff;
41 42 43
      }
    }
    // 控制伪元素所占宽度
44
    .@{ant-prefix}-picker-cell {
45 46 47 48 49 50 51 52 53 54
      &::before {
        right: auto;
        left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60%;
      }
    }
    // 隐藏季度选择器的按钮,⽤伪元素代替
55
    .@{ant-prefix}-picker-cell-inner {
56 57 58
      display: none;
    }
    // 根据title更换相应伪元素的content,使其代替原本的按钮
59
    .@{ant-prefix}-picker-cell[title$='-Q1'] {
60 61 62 63
      &::before {
        content: '第一季度';
      }
    }
64
    .@{ant-prefix}-picker-cell[title$='-Q2'] {
65 66 67 68
      &::before {
        content: '第二季度';
      }
    }
69
    .@{ant-prefix}-picker-cell[title$='-Q3'] {
70 71 72 73
      &::before {
        content: '第三季度';
      }
    }
74
    .@{ant-prefix}-picker-cell[title$='-Q4'] {
75 76 77 78 79 80
      &::before {
        content: '第四季度';
      }
    }
  }
}