@use "sass:list"; .vxe-date-panel { color: var(--vxe-ui-font-color); flex-shrink: 0; } .vxe-date-panel--wrapper, .vxe-date-panel--time-layout-wrapper { border: 0 solid var(--vxe-ui-base-popup-border-color); border-radius: var(--vxe-ui-base-border-radius); } .vxe-date-panel--wrapper, .vxe-date-panel--time-left-wrapper { display: inline-flex; flex-direction: column; padding: 0.8em; } .vxe-date-panel--time-right-wrapper { padding: 0.8em 0.8em 0.8em 0; } .vxe-date-panel--time-layout-wrapper { display: inline-flex; flex-direction: row; } .vxe-date-panel--time-title { display: flex; align-items: center; justify-content: center; flex-grow: 1; text-align: center; border: 1px solid var(--vxe-ui-input-border-color); border-radius: var(--vxe-ui-base-border-radius); height: 2em; font-weight: 700; } .vxe-date-panel--time-header { position: relative; flex-shrink: 0; } .vxe-date-panel--time-header, .vxe-date-panel--picker-header { display: flex; flex-direction: row; align-items: center; height: 3em; padding-bottom: 0.5em; } .vxe-date-panel--picker-header { user-select: none; .vxe-date-panel--picker-type-wrapper { flex-grow: 1; font-size: 1.1em; } .vxe-date-panel--picker-btn-wrapper { flex-shrink: 0; text-align: center; } } .vxe-date-panel--picker-type-wrapper { display: flex; align-items: center; .vxe-date-panel--picker-label, .vxe-date-panel--picker-btn { display: inline-block; } } .vxe-date-panel--picker-btn-wrapper { display: flex; flex-direction: row; .vxe-date-panel--picker-prev-btn, .vxe-date-panel--picker-current-btn, .vxe-date-panel--picker-next-btn { height: 2.2em; padding: 0 0.5em; border-radius: var(--vxe-ui-base-border-radius); border: 1px solid var(--vxe-ui-input-border-color); margin-left: 0.5em; i { font-size: 1.2em; } } .vxe-date-panel--picker-btn { &:not(.is--disabled) { &:active { transform: scale(0.9); } } } } .vxe-date-panel--picker-label, .vxe-date-panel--picker-btn { display: flex; align-items: center; justify-content: center; background-color: var(--vxe-ui-layout-background-color); } .vxe-date-panel--picker-btn { &.is--disabled { color: var(--vxe-ui-font-disabled-color); cursor: no-drop; } &:not(.is--disabled) { cursor: pointer; &:hover { color: var(--vxe-ui-font-primary-color); background-color: #fff; } &:active { background-color: #fff; } } } .vxe-date-panel--picker-btns { .vxe-date-panel--picker-btn { margin-left: 0.6em; &:first-child { margin-left: 0; } } } .vxe-date-panel--view-wrapper { display: flex; flex-direction: column; line-height: 1.5; } .vxe-date-panel--picker-body { border-radius: var(--vxe-ui-base-border-radius); border: 1px solid var(--vxe-ui-base-popup-border-color); user-select: none; } .vxe-date-panel--view-header { box-shadow: inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color); text-align: center; } .vxe-date-panel--view-body { display: inline-flex; flex-direction: column; width: 24em; } .vxe-date-panel--view-wrapper { &.type--day, &.type--week { .vxe-date-panel--view-body { height: 18em; } } } .vxe-date-panel--view-header { .vxe-date-panel--view-row { height: 2em; } } .vxe-date-panel--view-body, .vxe-date-panel--time-body { height: 20em; } .vxe-date-panel { &.type--time { .vxe-date-panel--time-body { height: 15em; } } } .vxe-date-panel--view-body { .vxe-date-panel--view-item { cursor: pointer; &.is--range-disabled, &.is--disabled { cursor: no-drop; } &.is--over { cursor: no-drop; } } } .vxe-date-panel--view-row { display: flex; flex-direction: row; } .vxe-date-panel--view-item { padding: 0.2em; &.is--prev, &.is--next { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-font-disabled-color); } .vxe-date-panel--label, .vxe-date-panel--festival { color: var(--vxe-ui-font-disabled-color); } } &.is--now { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-base-popup-border-color); } &:not(.is--selected) { &.is--current { color: var(--vxe-ui-font-primary-color); .vxe-date-panel--label, .vxe-date-panel--festival { color: var(--vxe-ui-font-primary-color); } } } } &.is--hover { .vxe-date-panel--view-item-inner { background-color: var(--vxe-ui-font-primary-tinge-color); } } &.is--selected { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-input-date-picker-selected-color); background-color: var(--vxe-ui-font-primary-color); } &.is--hover { .vxe-date-panel--view-item-inner { box-shadow: 0 0px 6px 1px var(--vxe-ui-font-primary-color); } } &.is--prev, &.is--next { .vxe-date-panel--label, .vxe-date-panel--festival { color: var(--vxe-ui-base-popup-border-color); } } .vxe-date-panel--label, .vxe-date-panel--festival { color: var(--vxe-ui-input-date-picker-festival-selected-color); } .vxe-date-panel--label { &.is-notice { &:before { background-color: var(--vxe-ui-input-date-picker-notice-selected-background-color); } } } } &.is--range-disabled { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-input-disabled-color); background-color: inherit; } } &.is--disabled { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-input-disabled-color); background-color: var(--vxe-ui-input-disabled-background-color); } .vxe-date-panel--label, .vxe-date-panel--festival { color: var(--vxe-ui-input-disabled-color); } } } // .vxe-date-range-picker--panel { // .vxe-date-panel--view-item { // &.is--range-disabled { // .vxe-date-panel--view-item-inner { // color: var(--vxe-ui-input-disabled-color); // background-color: inherit; // } // } // } // } .vxe-date-panel--view-wrapper { &.type--week { .vxe-date-panel--view-item { padding: 0.2em 0; .vxe-date-panel--view-item-inner { border-radius: 0; } &:first-child { padding: 0.2em 0 0.2em 0.2em; border-right: 1px solid var(--vxe-ui-base-popup-border-color); .vxe-date-panel--view-item-inner { color: var(--vxe-ui-input-date-festival-color); } } &:last-child { padding: 0.2em 0.2em 0.2em 0; } &.is--hover, &.is--selected { &:first-child { .vxe-date-panel--view-item-inner { border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius); } } &:last-child { .vxe-date-panel--view-item-inner { border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0; } } } &.is--now { &:not(.is--selected) { &:first-child { .vxe-date-panel--view-item-inner { color: var(--vxe-ui-font-primary-color); } } } } } } } .vxe-date-panel--view-item-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; border: 1px solid transparent; border-radius: var(--vxe-ui-base-border-radius); overflow: hidden; } .vxe-date-panel--view-item-label { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vxe-date-panel--label, .vxe-date-panel--festival { width: 100%; display: block; overflow: hidden; text-align: center; } .vxe-date-panel--label { position: relative; height: 1.4em; line-height: 1.4em; &.is-notice { &:before { content: ""; position: absolute; width: 0.25em; height: 0.25em; left: 50%; top: 0; transform: translateX(-50%); border-radius: 100%; background-color: var(--vxe-ui-input-date-notice-background-color); } } } .vxe-date-panel--label--extra { position: absolute; right: -0.1em; top: -0.4em; font-size: 12px; transform: scale(0.9); color: var(--vxe-ui-input-date-extra-color); &.is-important { color: var(--vxe-ui-input-date-extra-important-color); } } .vxe-date-panel--festival { color: var(--vxe-ui-input-date-festival-color); height: 1em; line-height: 1em; overflow: hidden; &.is-important { color: var(--vxe-ui-input-date-festival-important-color); } } .vxe-date-panel--festival--label { display: block; font-size: 1em; 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-date-panel--festival--overlap { display: block; font-size: 0.86em; &.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-date-panel--time-body { position: relative; display: flex; flex-direction: row; border: 1px solid var(--vxe-ui-base-popup-border-color); flex-grow: 1; border-radius: var(--vxe-ui-base-border-radius); user-select: none; & > ul { height: 100%; overflow: hidden; margin: 0; padding: 0; width: 3.2em; &:before, &:after { content: " "; display: block; height: 6em; } &:hover { overflow-y: auto; } & > li { display: block; height: 2em; line-height: 2em; padding-left: 0.4em; &:hover { background-color: var(--vxe-ui-input-date-picker-hover-background-color); cursor: pointer; } &.is--selected { font-weight: 700; color: var(--vxe-ui-font-primary-color); } } } .vxe-date-panel--time-minute-list { border-left: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-panel--time-second-list { border-left: 1px solid var(--vxe-ui-base-popup-border-color); } } .vxe-date-panel { &.type--time { .vxe-date-panel--time-body { & > ul { width: 4em; & > li { height: 2.2em; line-height: 2.2em; padding-left: 0.8em; } } } } } .vxe-date-panel { 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); } }