.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 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-date-panel--picker-header .vxe-date-panel--picker-type-wrapper { flex-grow: 1; font-size: 1.1em; } .vxe-date-panel--picker-header .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-type-wrapper .vxe-date-panel--picker-label, .vxe-date-panel--picker-type-wrapper .vxe-date-panel--picker-btn { display: inline-block; } .vxe-date-panel--picker-btn-wrapper { display: flex; flex-direction: row; } .vxe-date-panel--picker-btn-wrapper .vxe-date-panel--picker-prev-btn, .vxe-date-panel--picker-btn-wrapper .vxe-date-panel--picker-current-btn, .vxe-date-panel--picker-btn-wrapper .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; } .vxe-date-panel--picker-btn-wrapper .vxe-date-panel--picker-prev-btn i, .vxe-date-panel--picker-btn-wrapper .vxe-date-panel--picker-current-btn i, .vxe-date-panel--picker-btn-wrapper .vxe-date-panel--picker-next-btn i { font-size: 1.2em; } .vxe-date-panel--picker-btn-wrapper .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; } .vxe-date-panel--picker-btn:not(.is--disabled) { cursor: pointer; } .vxe-date-panel--picker-btn:not(.is--disabled):hover { color: var(--vxe-ui-font-primary-color); background-color: #fff; } .vxe-date-panel--picker-btn:not(.is--disabled):active { background-color: #fff; } .vxe-date-panel--picker-btns .vxe-date-panel--picker-btn { margin-left: 0.6em; } .vxe-date-panel--picker-btns .vxe-date-panel--picker-btn: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); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 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 .vxe-date-panel--view-body, .vxe-date-panel--view-wrapper.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; } .vxe-date-panel--view-body .vxe-date-panel--view-item.is--range-disabled, .vxe-date-panel--view-body .vxe-date-panel--view-item.is--disabled { cursor: no-drop; } .vxe-date-panel--view-body .vxe-date-panel--view-item.is--over { cursor: no-drop; } .vxe-date-panel--view-row { display: flex; flex-direction: row; } .vxe-date-panel--view-item { padding: 0.2em; } .vxe-date-panel--view-item.is--prev .vxe-date-panel--view-item-inner, .vxe-date-panel--view-item.is--next .vxe-date-panel--view-item-inner { color: var(--vxe-ui-font-disabled-color); } .vxe-date-panel--view-item.is--prev .vxe-date-panel--label, .vxe-date-panel--view-item.is--prev .vxe-date-panel--festival, .vxe-date-panel--view-item.is--next .vxe-date-panel--label, .vxe-date-panel--view-item.is--next .vxe-date-panel--festival { color: var(--vxe-ui-font-disabled-color); } .vxe-date-panel--view-item.is--now .vxe-date-panel--view-item-inner { color: var(--vxe-ui-base-popup-border-color); } .vxe-date-panel--view-item.is--now:not(.is--selected).is--current { color: var(--vxe-ui-font-primary-color); } .vxe-date-panel--view-item.is--now:not(.is--selected).is--current .vxe-date-panel--label, .vxe-date-panel--view-item.is--now:not(.is--selected).is--current .vxe-date-panel--festival { color: var(--vxe-ui-font-primary-color); } .vxe-date-panel--view-item.is--hover .vxe-date-panel--view-item-inner { background-color: var(--vxe-ui-font-primary-tinge-color); } .vxe-date-panel--view-item.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); } .vxe-date-panel--view-item.is--selected.is--hover .vxe-date-panel--view-item-inner { box-shadow: 0 0px 6px 1px var(--vxe-ui-font-primary-color); } .vxe-date-panel--view-item.is--selected.is--prev .vxe-date-panel--label, .vxe-date-panel--view-item.is--selected.is--prev .vxe-date-panel--festival, .vxe-date-panel--view-item.is--selected.is--next .vxe-date-panel--label, .vxe-date-panel--view-item.is--selected.is--next .vxe-date-panel--festival { color: var(--vxe-ui-base-popup-border-color); } .vxe-date-panel--view-item.is--selected .vxe-date-panel--label, .vxe-date-panel--view-item.is--selected .vxe-date-panel--festival { color: var(--vxe-ui-input-date-picker-festival-selected-color); } .vxe-date-panel--view-item.is--selected .vxe-date-panel--label.is-notice:before { background-color: var(--vxe-ui-input-date-picker-notice-selected-background-color); } .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-item.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--view-item.is--disabled .vxe-date-panel--label, .vxe-date-panel--view-item.is--disabled .vxe-date-panel--festival { color: var(--vxe-ui-input-disabled-color); } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item { padding: 0.2em 0; } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item .vxe-date-panel--view-item-inner { border-radius: 0; } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item: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-wrapper.type--week .vxe-date-panel--view-item:first-child .vxe-date-panel--view-item-inner { color: var(--vxe-ui-input-date-festival-color); } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item:last-child { padding: 0.2em 0.2em 0.2em 0; } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item.is--hover:first-child .vxe-date-panel--view-item-inner, .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item.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); } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item.is--hover:last-child .vxe-date-panel--view-item-inner, .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item.is--selected:last-child .vxe-date-panel--view-item-inner { border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0; } .vxe-date-panel--view-wrapper.type--week .vxe-date-panel--view-item.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; } .vxe-date-panel--label.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); } .vxe-date-panel--label--extra.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; } .vxe-date-panel--festival.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; } .vxe-date-panel--festival--overlap.overlap--2 { animation: festivalOverlap2 6s infinite ease-in-out; } .vxe-date-panel--festival--overlap.overlap--3 { animation: festivalOverlap3 9s infinite ease-in-out; } .vxe-date-panel--festival--overlap > 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); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-date-panel--time-body > ul { height: 100%; overflow: hidden; margin: 0; padding: 0; width: 3.2em; } .vxe-date-panel--time-body > ul:before, .vxe-date-panel--time-body > ul:after { content: " "; display: block; height: 6em; } .vxe-date-panel--time-body > ul:hover { overflow-y: auto; } .vxe-date-panel--time-body > ul > li { display: block; height: 2em; line-height: 2em; padding-left: 0.4em; } .vxe-date-panel--time-body > ul > li:hover { background-color: var(--vxe-ui-input-date-picker-hover-background-color); cursor: pointer; } .vxe-date-panel--time-body > ul > li.is--selected { font-weight: 700; color: var(--vxe-ui-font-primary-color); } .vxe-date-panel--time-body .vxe-date-panel--time-minute-list { border-left: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-panel--time-body .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; } .vxe-date-panel.type--time .vxe-date-panel--time-body > ul > li { height: 2.2em; line-height: 2.2em; padding-left: 0.8em; } .vxe-date-panel { font-size: var(--vxe-ui-font-size-default); } .vxe-date-panel.size--medium { font-size: var(--vxe-ui-font-size-medium); } .vxe-date-panel.size--small { font-size: var(--vxe-ui-font-size-small); } .vxe-date-panel.size--mini { font-size: var(--vxe-ui-font-size-mini); }