@ttk/component
Version:
ttk组件库
379 lines (376 loc) • 11.1 kB
text/less
.@{mk-prefix}-calendar-header-btn {
font-family: @font-family;
font-size: 16px;
font-weight: normal;
color: #999;
line-height: 46px;
}
.@{mk-prefix}-calendar-header-content {
color: @text-color-secondary;
font-size: @font-size-sm;
font-weight: 400;
}
.@{mk-prefix}-datepicker, .@{mk-prefix}-month-range-picker, .@{mk-prefix}-year-range-picker {
width: 100%;
}
.@{ant-prefix}-calendar-picker-container{
font-family: @font-family;
.@{ant-prefix}-calendar-range-middle{
margin-left: -170px;
}
.@{ant-prefix}-calendar-footer-extra{
height: auto;
overflow: hidden;
padding: 2px 0;
}
}
.@{ant-prefix}-calendar {
margin-top: 40px;
&-input-wrap {
display: none;
}
&-picker {
&:hover &-input:not(.@{ant-prefix}-input-disabled) {
border-color: #4585eb;
box-shadow: 1px 1px 1px 1px rgba(136,182,255,0.5);
}
&:focus &-input:not(.@{ant-prefix}-input-disabled) {
border-color: #4585eb;
box-shadow: 1px 1px 1px 1px rgba(136,182,255,0.5);
}
&-input:not(:hover):not(:focus) {
// background-image: url('../img/icon_date.png');
// background-repeat: no-repeat;
// background-position: center right;
}
&-clear {
width: 24px;
height: 24px;
right: 4px;
top: 4px;
margin-top: 0;
font-size: 24px;
}
&-icon {
width: 24px;
height: 24px;
right: 4px;
top: 4px;
margin-top: 0;
font-size: 24px;
background-image: url('../img/icon_date.png');
background-repeat: no-repeat;
background-position: center;
svg {
display: none;
}
&::after{
display: none;
}
}
}
&-range-middle{
display: none;
}
&-header {
height: 46px;
line-height: 46px;
.@{ant-prefix}-calendar-century-select,
.@{ant-prefix}-calendar-decade-select,
.@{ant-prefix}-calendar-year-select,
.@{ant-prefix}-calendar-month-select {
padding: 0 5px;
.@{mk-prefix}-calendar-header-btn;
.@{mk-prefix}-calendar-header-content;
}
.@{ant-prefix}-calendar-prev-century-btn,
.@{ant-prefix}-calendar-next-century-btn,
.@{ant-prefix}-calendar-prev-decade-btn,
.@{ant-prefix}-calendar-next-decade-btn,
.@{ant-prefix}-calendar-prev-month-btn,
.@{ant-prefix}-calendar-next-month-btn,
.@{ant-prefix}-calendar-prev-year-btn,
.@{ant-prefix}-calendar-next-year-btn {
.@{mk-prefix}-calendar-header-btn
}
}
&-body {
padding: 10px;
}
.@{ant-prefix}-calendar-tbody {
& > tr > td {
&:not(.@{ant-prefix}-calendar-last-month-cell):not(.@{ant-prefix}-calendar-next-month-btn-day):not(.@{ant-prefix}-calendar-selected-date):not(.@{ant-prefix}-calendar-selected-start-date):not(.@{ant-prefix}-calendar-selected-end-date) {
&:nth-last-child(2), &:last-child {
.@{ant-prefix}-calendar-date {
color: #ff0000;
}
}
}
}
}
&-column-header {
line-height: normal;
width: 36px;
height: 30px;
padding: 5px;
text-align: center;
font-size: 12px;
color: @text-color;
&-inner {
font-weight: 400;
}
}
&-date {
color: @text-color-secondary;
width: 26px;
height: 20px;
line-height: 20px;
&:hover {
background: none;
color: @text-color-secondary;
}
}
&-cell {
line-height: normal;
width: 36px;
height: 30px;
padding: 5px;
text-align: center;
font-size: 12px;
&.@{ant-prefix}-calendar-in-range-cell{
background: rgb(213, 232, 252);
&::before{
background: none;
}
}
&:hover {
background-image: url('../img/date02.png');
background-repeat: no-repeat;
background-position: center;
}
&.@{ant-prefix}-calendar-disabled-cell{
cursor: not-allowed;
background: @background-color;
.@{ant-prefix}-calendar-date {
color: @disabled-color;
&::before{
border: none;
}
}
}
}
&-last-month-cell &-date, &-next-month-btn-day &-date {
color: #d2d2d2;
}
&-selected-day &-date {
background: none;
}
&-selected-date, &-selected-start-date, &-selected-end-date {
&.@{ant-prefix}-calendar-cell {
background-image: url('../img/date01.png');
background-repeat: no-repeat;
background-position: center;
}
.@{ant-prefix}-calendar-date {
background: none;
color: #fff;
border: none;
border-radius: 0;
&:hover {
background: none;
}
}
}
&-today &-date {
border: none;
font-weight: bold;
}
&-footer {
line-height: 46px;
padding: 10px 20px;
&-btn {
line-height: 26px;
// a {
// font-size: @font-size-sm;
// color: @text-color-secondary;
// }
}
}
// 选世纪
&-decade-panel {
height: calc(100% - 48px);
// 头部
&-header {
height: 46px;
line-height: 46px;
.@{ant-prefix}-calendar-decade-panel {
&-prev-century-btn, &-next-century-btn{
.@{mk-prefix}-calendar-header-btn
}
}
}
&-century {
padding-top: 1px;
height: 46px;
line-height: 46px;
display: block;
.@{mk-prefix}-calendar-header-content
}
// 内容
&-decade {
color: @text-color-secondary;
font-size: @font-size-sm;
&:hover {
color: @text-color;
}
}
}
// 选年
&-year-panel {
top: 0px;
height: calc(100% - 48px);
// 头部
&-header {
height: 46px;
line-height: 46px;
.@{ant-prefix}-calendar-year-panel {
&-prev-decade-btn, &-next-decade-btn{
.@{mk-prefix}-calendar-header-btn
}
}
}
&-decade-select{
&-content {
.@{mk-prefix}-calendar-header-content
}
}
&-body {
padding: 10px;
}
// 内容
&-cell {
& a:hover{
color: @text-color;
}
height: 46px;
line-height: 46px;
&:hover {
background-image: url('../img/year02.png');
background-repeat: no-repeat;
background-position: center;
color: @text-color;
}
}
&-year {
background: none;
color: @text-color-secondary;
font-size: @font-size-sm;
&:hover {
background: none;
color: @text-color;
}
}
&-year::after {
content: '年';
}
&-selected-cell {
background-image: url('../img/year01.png');
background-repeat: no-repeat;
background-position: center;
&:hover {
background-image: url('../img/year01.png');
background-repeat: no-repeat;
background-position: center;
}
.@{ant-prefix}-calendar-year-panel-year {
background: none;
&:hover {
background: none;
}
}
}
}
// 选月
&-month-panel {
&-header {
height: 46px;
line-height: 46px;
.@{ant-prefix}-calendar-month-panel {
&-prev-year-btn, &-next-year-btn{
.@{mk-prefix}-calendar-header-btn
}
}
}
&-year-select {
&-content {
.@{mk-prefix}-calendar-header-content;
&::after {
content: '年';
}
}
}
&-body {
padding: 10px;
}
// 内容
&-cell {
& a:hover{
color: @text-color;
}
height: 46px;
line-height: 46px;
&:hover {
background-image: url('../img/year02.png');
background-repeat: no-repeat;
background-position: center;
color: @text-color;
}
&.@{ant-prefix}-calendar-month-panel-cell-disabled {
cursor: not-allowed;
background: @background-color;
.@{ant-prefix}-calendar-month-panel-month {
color: @disabled-color;
}
}
}
&-month {
background: none;
color: @text-color-secondary;
font-size: @font-size-sm;
&:hover {
background: none;
color: @text-color;
}
}
&-selected-cell {
background-image: url('../img/year01.png');
background-repeat: no-repeat;
background-position: center;
&:hover {
background-image: url('../img/year01.png');
background-repeat: no-repeat;
background-position: center;
}
.@{ant-prefix}-calendar-month-panel-month {
background: none;
&:hover {
background: none;
}
}
}
}
// 选时间
&-time-picker {
// top: 0;
}
// 选择范围
&-range {
.@{ant-prefix}-calendar-year-panel, .@{ant-prefix}-calendar-month-panel {
top: 0;
height: 100%;
}
&.@{ant-prefix}-calendar-time .@{ant-prefix}-calendar-time-picker {
top: 44px;
}
}
}