@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); } }