You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

247 lines
6.4 KiB

.vxe-calendar {
display: inline-flex;
flex-direction: column;
width: 100%;
height: 38em;
border: 1px solid var(--vxe-ui-base-popup-border-color);
border-radius: var(--vxe-ui-base-border-radius);
}
.vxe-calendar.type--date .vxe-calendar--body td {
width: 14.28571%;
}
.vxe-calendar.type--week .vxe-calendar--body td {
width: 12%;
}
.vxe-calendar.type--week .vxe-calendar--body td:first-child {
width: 14%;
}
.vxe-calendar.type--quarter .vxe-calendar--body td {
width: 50%;
}
.vxe-calendar.type--month .vxe-calendar--body td, .vxe-calendar.type--year .vxe-calendar--body td {
width: 25%;
}
.vxe-calendar--confirm {
outline: 0;
border: 1px solid var(--vxe-ui-input-border-color);
border-radius: var(--vxe-ui-base-border-radius);
cursor: pointer;
color: var(--vxe-ui-input-date-time-confirm-button-color);
border-color: var(--vxe-ui-font-primary-color);
background-color: var(--vxe-ui-font-primary-color);
padding: 0 0.5em;
}
.vxe-calendar--confirm:hover {
background-color: var(--vxe-ui-font-primary-lighten-color);
border-color: var(--vxe-ui-font-primary-lighten-color);
}
.vxe-calendar--confirm:active {
background-color: var(--vxe-ui-font-primary-darken-color);
border-color: var(--vxe-ui-font-primary-darken-color);
}
.vxe-calendar--header {
flex-shrink: 0;
display: flex;
flex-direction: row;
padding: var(--vxe-ui-layout-padding-default);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-calendar--header .vxe-calendar--type-wrapper {
flex-grow: 1;
}
.vxe-calendar--header .vxe-calendar--btn-wrapper {
flex-shrink: 0;
text-align: center;
}
.vxe-calendar--btn-wrapper {
display: flex;
flex-direction: row;
}
.vxe-calendar--btn.is--disabled {
color: var(--vxe-ui-font-disabled-color);
cursor: no-drop;
}
.vxe-calendar--btn:not(.is--disabled) {
cursor: pointer;
}
.vxe-calendar--btn:not(.is--disabled):hover {
background-color: #fff;
}
.vxe-calendar--btn:not(.is--disabled):active {
background-color: #fff;
}
.vxe-calendar--body {
position: relative;
flex-grow: 1;
overflow: hidden;
}
.vxe-calendar--body table {
border: 0;
width: 100%;
height: 100%;
border-spacing: 0;
border-collapse: separate;
text-align: center;
table-layout: fixed;
}
.vxe-calendar--view-th {
font-weight: 700;
}
.vxe-calendar--view-td {
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.1s ease-in-out;
}
.vxe-calendar--view-td.is--prev, .vxe-calendar--view-td.is--next {
color: var(--vxe-ui-font-disabled-color);
}
.vxe-calendar--view-td.is--prev .vxe-calendar--date-label,
.vxe-calendar--view-td.is--prev .vxe-calendar--date-festival, .vxe-calendar--view-td.is--next .vxe-calendar--date-label,
.vxe-calendar--view-td.is--next .vxe-calendar--date-festival {
color: var(--vxe-ui-font-disabled-color);
}
.vxe-calendar--view-td.is--now:not(.is--selected).is--current {
color: var(--vxe-ui-font-primary-color);
}
.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-label,
.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-festival {
color: var(--vxe-ui-font-primary-color);
}
.vxe-calendar--view-td.is--hover {
background-color: var(--vxe-ui-base-hover-background-color);
}
.vxe-calendar--view-td.is--selected {
color: var(--vxe-ui-calendar-selected-color);
background-color: var(--vxe-ui-font-primary-color);
}
.vxe-calendar--view-td.is--selected.is--prev, .vxe-calendar--view-td.is--selected.is--next {
background-color: var(--vxe-ui-font-primary-lighten-color);
}
.vxe-calendar--view-td.is--selected .vxe-calendar--date-label,
.vxe-calendar--view-td.is--selected .vxe-calendar--date-festival {
color: var(--vxe-ui-calendar-festival-selected-color);
}
.vxe-calendar--view-td.is--selected .vxe-calendar--date-label.is-notice:before {
background-color: var(--vxe-ui-calendar-notice-selected-background-color);
}
.vxe-calendar--view-td:not(.is--disabled) {
cursor: pointer;
}
.vxe-calendar--view-td.is--disabled {
cursor: no-drop;
color: var(--vxe-ui-input-disabled-color);
background-color: var(--vxe-ui-input-disabled-background-color);
}
.vxe-calendar--view-td.is--disabled .vxe-calendar--date-label,
.vxe-calendar--view-td.is--disabled .vxe-calendar--date-festival {
color: var(--vxe-ui-input-disabled-color);
}
.vxe-calendar--date-label,
.vxe-calendar--date-festival {
display: block;
overflow: hidden;
}
.vxe-calendar--date-label {
position: relative;
}
.vxe-calendar--date-label.is-notice:before {
content: "";
position: absolute;
width: 4px;
height: 4px;
left: 0.8em;
top: 0.1em;
transform: translateX(-50%);
border-radius: 100%;
background-color: var(--vxe-ui-input-date-notice-background-color);
}
.vxe-calendar--date-label--extra {
position: absolute;
right: 0.1em;
top: -0.2em;
transform: scale(0.9);
color: var(--vxe-ui-input-date-extra-color);
}
.vxe-calendar--date-label--extra.is-important {
color: var(--vxe-ui-input-date-extra-important-color);
}
.vxe-calendar--date-festival {
color: var(--vxe-ui-input-date-festival-color);
height: 14px;
line-height: 1;
overflow: hidden;
}
.vxe-calendar--date-festival.is-important {
color: var(--vxe-ui-input-date-festival-important-color);
}
.vxe-calendar--date-festival--label {
display: block;
transform: scale(0.8);
}
@keyframes festivalOverlap2 {
0%, 45%, 100% {
transform: translateY(0);
}
50%, 95% {
transform: translateY(-14px);
}
}
@keyframes festivalOverlap3 {
0%, 20%, 100% {
transform: translateY(0);
}
25%, 45%, 75%, 95% {
transform: translateY(-14px);
}
50%, 70% {
transform: translateY(-28px);
}
}
.vxe-calendar--date-festival--overlap {
display: block;
font-size: 12px;
}
.vxe-calendar--date-festival--overlap.overlap--2 {
animation: festivalOverlap2 6s infinite ease-in-out;
}
.vxe-calendar--date-festival--overlap.overlap--3 {
animation: festivalOverlap3 9s infinite ease-in-out;
}
.vxe-calendar--date-festival--overlap > span {
height: 14px;
display: block;
transform: scale(0.8);
}
.vxe-calendar {
font-size: var(--vxe-ui-font-size-default);
}
.vxe-calendar.size--medium {
font-size: var(--vxe-ui-font-size-medium);
}
.vxe-calendar.size--small {
font-size: var(--vxe-ui-font-size-small);
}
.vxe-calendar.size--mini {
font-size: var(--vxe-ui-font-size-mini);
}