acud
Version:
acg react 组件库
453 lines (386 loc) • 13.4 kB
text/less
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@hoverCellBgColor: rgba(0, 0, 0, .04);
@60: @P * 15;
@calendar-prefix-cls: ~'@{acud-prefix}-picker-calendar';
@picker-prefix-cls: ~'@{acud-prefix}-picker';
.flex(@flexDirection: row, @rowAlign: flex-start, @colAlign: center) {
display: flex;
flex-direction: @flexDirection;
justify-content: @rowAlign;
align-items: @colAlign;
}
.font(@fontSize: 12px, @color: '#fff', @fontFamily: 'PingFangSC-Medium') {
font-size: @fontSize;
color: @color;
font-family: @fontFamily;
}
.border(@lineHeight: @border-width-base, @lineType: solid, @color: @G7) {
border: @lineHeight @lineType @color;
}
.custom-calendar-today(@width: @space-4) {
.@{calendar-prefix-cls}-date-today {
.@{calendar-prefix-cls}-date-value-text {
width: @width;
height: @space-4;
.flex(row, center, center);
.border(@border-width-base, solid, @B6);
border-radius: @R2;
color: @B6;
.font(@T2, @B6, PingFangSC-Medium);
font-weight: 500;
}
}
}
.@{calendar-prefix-cls} {
@arrow-size: 10px;
.border();
border-radius: @R4;
input {
font-family: @font-family;
}
&-header {
display: flex;
justify-content: flex-end;
padding: @space-4;
.@{calendar-prefix-cls}-year-select {
min-width: 80px;
}
.@{calendar-prefix-cls}-month-select {
min-width: 70px;
margin-inline-start: @space-2;
}
.@{calendar-prefix-cls}-mode-switch {
margin-inline-start: @space-2;
}
.@{calendar-prefix-cls}-radio-group-small {
display: flex;
.@{acud-prefix}-radio-button {
min-width: auto;
height: @T8;
line-height: @T8;
&::before, &::after {
height: @T8;
}
}
}
}
.@{picker-prefix-cls}-panel {
background: #fff;
border: 0;
border-radius: 0;
border-top: @border-width-base solid @grey-8;
.@{picker-prefix-cls}-month-panel, .@{picker-prefix-cls}-date-panel {
width: auto;
}
.@{picker-prefix-cls}-body {
padding: @space-2 0;
}
.@{picker-prefix-cls}-content {
width: 100%;
tr {
display: table-row;
}
td {
position: static;
min-width: @T8;
font-weight: 400;
}
}
}
&.@{calendar-prefix-cls}-full {
// 兼容圆角边框不展示的问题
// padding-bottom: 0.5 * @P;
.@{calendar-prefix-cls}-header {
.@{calendar-prefix-cls}-year-select {
width: 100px;
}
.@{calendar-prefix-cls}-month-select {
width: 80px;
margin-inline-start: @space-3;
}
.@{calendar-prefix-cls}-mode-switch {
margin-inline-start: @space-3;
.@{acud-prefix}-radio-button {
padding: 0;
width: @space-6;
min-width: @space-6;
text-align: center;
}
}
}
.@{picker-prefix-cls}-panel {
display: block;
width: 100%;
text-align: end;
background: #fff;
border: none;
border-bottom-left-radius: @R4;
border-bottom-right-radius: @R4;
thead {
tr {
height: @P * 9;
th::before {
content: '周'
}
}
}
.@{picker-prefix-cls}-date-panel, .@{picker-prefix-cls}-month-panel {
.@{picker-prefix-cls}-body {
padding: 0;
th, td {
padding: 0;
text-align: left;
}
th {
height: auto;
padding-inline-start: 3 * @P;
padding-bottom: @padding-xsm;
line-height: @T5;
}
tr {
&:first-child {
td {
border-top: 2 * @border-width-base solid @grey-7;
}
}
&:last-child {
td {
&:first-child {
.@{picker-prefix-cls}-cell-inner {
border-bottom-left-radius: @R4;
}
}
&:last-child {
.@{picker-prefix-cls}-cell-inner {
border-bottom-right-radius: @R4;
}
}
}
}
}
td {
&:not(.@{picker-prefix-cls}-cell-selected):hover {
// background-color: @grey-10;
.@{picker-prefix-cls}-cell-inner {
background-color: @grey-10;
border-radius: 0;
}
}
}
tbody {
tr {
.@{picker-prefix-cls}-cell:last-child {
border-right: none;
}
}
}
}
}
.@{picker-prefix-cls}-month-panel {
tr {
td {
display: table-cell;
margin-right: 0;
}
}
.@{picker-prefix-cls}-cell-in-view {
.@{calendar-prefix-cls}-date {
.@{calendar-prefix-cls}-date-value {
.@{calendar-prefix-cls}-date-value-text {
.flex(row, center, center);
width: @space-7;
}
}
}
&.@{picker-prefix-cls}-cell-selected {
.@{calendar-prefix-cls}-date {
background-color: @B1;
}
}
&:not(.@{picker-prefix-cls}-cell-selected) {
.custom-calendar-today(@space-7);
}
}
}
}
.@{picker-prefix-cls}-cell {
border-top: @border-width-base solid @grey-8;
border-right: @border-width-base solid @grey-8;
.@{picker-prefix-cls}-cell-inner {
border-radius: 0;
position: static;
}
&::before {
display: none;
}
&:hover {
.@{calendar-prefix-cls}-date {
background: @hoverCellBgColor;
}
}
&-inner.@{calendar-prefix-cls}-date-today {
border: none;
&::before {
display: none;
}
}
&-in-view {
&.@{picker-prefix-cls}-cell-selected {
.@{calendar-prefix-cls}-date {
background-color: @B1;
color: unset;
&-value {
&-text {
.flex(row, center, center);
background-color: @B6;
border-radius: @R2;
.font(@T2, @grey-11, PingFangSC-Medium);
font-weight: 500;
}
}
}
}
&.@{picker-prefix-cls}-cell-today:not(.@{picker-prefix-cls}-cell-selected) {
.@{calendar-prefix-cls}-date-today {
.@{calendar-prefix-cls}-date-value-text {
.border(@border-width-base, solid, @B6);
border-radius: @R2;
color: @B6;
.font(@T2, @B6, PingFangSC-Medium);
font-weight: 500;
}
}
}
}
&-selected, &-selected:hover {
.@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-date-today {
.@{calendar-prefix-cls}-date-value {
color: @blue-6;
}
}
}
}
.@{calendar-prefix-cls}-date {
display: block;
width: auto;
height: @P * 25;
/* margin: 0 @space-1;
padding: @space-1 @space-2 0; */
margin: 0;
padding: 0;
border: 0;
transition: background .3s;
&-value {
line-height: @T8;
transition: color .3s;
padding: @space-2;
.flex(row, flex-start, center);
&-text {
width: @space-4;
height: @space-4;
.flex(row, center, center);
}
}
&-content {
text-align: start;
// overflow-y: auto;
height: calc(100% - @space-6);
}
&-today {
border-color: @B6;
.@{calendar-prefix-cls}-date-value {
color: rgba(0,0,0,.88);
}
}
}
}
&.@{calendar-prefix-cls}-mini {
border-radius: @R4;
.@{calendar-prefix-cls}-header {
padding: @padding-sm;
justify-content: flex-start;
.@{calendar-prefix-cls}-year-select {
min-width: @space-9;
width: @space-9;
.@{acud-prefix}-select-selector {
padding: 0 @padding-sm;
}
}
.@{calendar-prefix-cls}-month-select {
min-width: @60;
width: @60;
.@{acud-prefix}-select-selector {
padding: 0 @padding-sm;
}
}
.@{calendar-prefix-cls}-mode-switch {
flex: 1;
justify-content: flex-end;
.@{acud-prefix}-radio-button {
/* min-width: @T9;
width: @T9; */
padding: 0;
width: @T9;
text-align: center;
}
}
}
.@{picker-prefix-cls}-cell {
padding-top: @padding-sm;
cursor: pointer;
}
.@{picker-prefix-cls}-panel {
border-radius: @R4;
border-top-left-radius: 0;
border-top-right-radius: 0;
.@{picker-prefix-cls}-body {
padding: @padding-m;
}
}
.@{picker-prefix-cls}-month-panel {
.@{picker-prefix-cls}-body {
padding: @space-3 0;
tr {
.@{picker-prefix-cls}-cell {
// margin-right: @space-5;
padding-top: 0;
padding-bottom: calc(@P * 6 + 2px);
display: table-cell;
&:not(.@{picker-prefix-cls}-cell-selected) {
.custom-calendar-today(@space-7);
}
&.@{picker-prefix-cls}-cell-selected {
.@{calendar-prefix-cls}-date-today {
.@{calendar-prefix-cls}-date-value {
&-text {
color: #fff;
}
}
}
}
}
&:last-child {
.@{picker-prefix-cls}-cell {
padding-bottom: 0;
}
}
}
}
}
}
.@{picker-prefix-cls}-month-panel {
.@{picker-prefix-cls}-content {
// height: 208px;
.@{calendar-prefix-cls}-date-today {
border: none;
}
}
}
.@{picker-prefix-cls}-content {
table-layout: fixed;
border-collapse: collapse;
}
}
@import './rtl';