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.
 
 
 
 

268 lines
5.6 KiB

@use '../helpers/baseMixin.scss';
.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);
&.type--date {
.vxe-calendar--body {
td {
width: 14.28571%;
}
}
}
&.type--week {
.vxe-calendar--body {
td {
width: 12%;
&:first-child {
width: 14%;
}
}
}
}
&.type--quarter {
.vxe-calendar--body {
td {
width: 50%;
}
}
}
&.type--month,
&.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;
&:hover {
background-color: var(--vxe-ui-font-primary-lighten-color);
border-color: var(--vxe-ui-font-primary-lighten-color);
}
&: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);
user-select: none;
border-bottom: 1px solid var(--vxe-ui-input-border-color);
.vxe-calendar--type-wrapper {
flex-grow: 1;
}
.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;
}
&:not(.is--disabled) {
cursor: pointer;
&:hover {
background-color: #fff;
}
&:active {
background-color: #fff;
}
}
}
.vxe-calendar--body {
position: relative;
flex-grow: 1;
overflow: hidden;
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;
user-select: none;
@include baseMixin.createAnimationTransition(all, 0.1s);
&.is--prev,
&.is--next {
color: var(--vxe-ui-font-disabled-color);
.vxe-calendar--date-label,
.vxe-calendar--date-festival {
color: var(--vxe-ui-font-disabled-color);
}
}
&.is--now {
&:not(.is--selected) {
&.is--current {
color: var(--vxe-ui-font-primary-color);
.vxe-calendar--date-label,
.vxe-calendar--date-festival {
color: var(--vxe-ui-font-primary-color);
}
}
}
}
&.is--hover {
background-color: var(--vxe-ui-base-hover-background-color);
}
&.is--selected {
color: var(--vxe-ui-calendar-selected-color);
background-color: var(--vxe-ui-font-primary-color);
&.is--prev,
&.is--next {
background-color: var(--vxe-ui-font-primary-lighten-color);
}
.vxe-calendar--date-label,
.vxe-calendar--date-festival {
color: var(--vxe-ui-calendar-festival-selected-color);
}
.vxe-calendar--date-label {
&.is-notice {
&:before {
background-color: var(--vxe-ui-calendar-notice-selected-background-color);
}
}
}
}
&:not(.is--disabled) {
cursor: pointer;
}
&.is--disabled {
cursor: no-drop;
color: var(--vxe-ui-input-disabled-color);
background-color: var(--vxe-ui-input-disabled-background-color);
.vxe-calendar--date-label,
.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;
&.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);
&.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;
&.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;
&.overlap--2 {
animation: festivalOverlap2 6s infinite ease-in-out;
}
&.overlap--3 {
animation: festivalOverlap3 9s infinite ease-in-out;
}
& > span {
height: 14px;
display: block;
transform: scale(0.8);
}
}
.vxe-calendar {
font-size: var(--vxe-ui-font-size-default);
&.size--medium {
font-size: var(--vxe-ui-font-size-medium);
}
&.size--small {
font-size: var(--vxe-ui-font-size-small);
}
&.size--mini {
font-size: var(--vxe-ui-font-size-mini);
}
}