.vxe-date-picker--readonly { color: var(--vxe-ui-font-color); display: inline-flex; } .vxe-date-picker--wrapper { flex-grow: 1; overflow: hidden; } .vxe-date-picker--inner { display: block; width: 100%; height: 100%; outline: 0; margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; padding: 0 0.5em; color: var(--vxe-ui-font-color); border: 0; border-radius: var(--vxe-ui-base-border-radius); background-color: var(--vxe-ui-layout-background-color); box-shadow: none; } .vxe-date-picker--inner::-moz-placeholder { color: var(--vxe-ui-input-placeholder-color); } .vxe-date-picker--inner:-ms-input-placeholder { color: var(--vxe-ui-input-placeholder-color); } .vxe-date-picker--inner::placeholder { color: var(--vxe-ui-input-placeholder-color); } .vxe-date-picker--inner::-webkit-autofill { background-color: var(--vxe-ui-layout-background-color); } .vxe-date-picker--inner[disabled] { cursor: not-allowed; color: var(--vxe-ui-font-disabled-color); background-color: var(--vxe-ui-input-disabled-background-color); } .vxe-date-picker.is--disabled { background-color: var(--vxe-ui-input-disabled-background-color); } .vxe-date-picker.is--disabled .vxe-date-picker--prefix, .vxe-date-picker.is--disabled .vxe-date-picker--suffix, .vxe-date-picker.is--disabled .vxe-date-picker--clear-icon, .vxe-date-picker.is--disabled .vxe-date-picker--control-icon { cursor: not-allowed; } .vxe-date-picker.is--disabled .vxe-date-picker--prefix, .vxe-date-picker.is--disabled .vxe-date-picker--suffix { background-color: var(--vxe-ui-input-disabled-background-color); } .vxe-date-picker { display: inline-flex; flex-direction: row; position: relative; border-radius: var(--vxe-ui-base-border-radius); width: 180px; border: 1px solid var(--vxe-ui-input-border-color); } .vxe-date-picker.is--active { border: 1px solid var(--vxe-ui-font-primary-color); } .vxe-date-picker.show--clear:hover .vxe-date-picker--clear-icon { display: block; } .vxe-date-picker--prefix, .vxe-date-picker--suffix { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; background-color: var(--vxe-ui-layout-background-color); } .vxe-date-picker--prefix-icon { padding-left: 0.5em; } .vxe-date-picker--clear-icon, .vxe-date-picker--control-icon, .vxe-date-picker--suffix-icon { padding-right: 0.5em; } .vxe-date-picker--clear-icon, .vxe-date-picker--control-icon { height: 100%; color: var(--vxe-ui-input-placeholder-color); cursor: pointer; } .vxe-date-picker--clear-icon { display: none; } .vxe-date-picker--clear-icon:hover { color: var(--vxe-ui-font-color); } .vxe-date-picker--clear-icon:active { color: var(--vxe-ui-font-primary-color); } .vxe-date-picker--panel { display: none; position: absolute; left: 0; padding: 4px 0; color: var(--vxe-ui-font-color); text-align: left; } .vxe-date-picker--panel:not(.is--transfer) { min-width: 100%; } .vxe-date-picker--panel.is--transfer { position: fixed; } .vxe-date-picker--panel.ani--leave { display: block; opacity: 0; transform: scaleY(0.5); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center top; backface-visibility: hidden; } .vxe-date-picker--panel.ani--leave[placement=top] { transform-origin: center bottom; } .vxe-date-picker--panel.ani--enter { opacity: 1; transform: scaleY(1); } .vxe-date-picker--panel.ani--enter > div::after { display: none; } .vxe-date-picker--panel > div::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-date-picker--panel { pointer-events: none; } .vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper, .vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper { border-top-right-radius: 0; } .vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper, .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper { border-bottom-right-radius: 0; } .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper { border-bottom-left-radius: 0; } .vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper { border-top-left-radius: 0; } .vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper { border-top-width: 1px; } .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper { border-bottom-width: 1px; } .vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper { border-left-width: 1px; } .vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper, .vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper { border-right-width: 1px; } .vxe-date-picker--layout-all-wrapper { display: inline-flex; flex-direction: column; pointer-events: auto; background-color: var(--vxe-ui-layout-background-color); border: 1px solid var(--vxe-ui-base-popup-border-color); box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); border-radius: var(--vxe-ui-base-border-radius); } .vxe-date-picker--layout-body-layout-wrapper { display: flex; flex-direction: row; white-space: nowrap; } .vxe-date-picker--layout-body-content-wrapper, .vxe-date-picker--layout-body-layout-wrapper, .vxe-date-picker--layout-body-wrapper { flex-grow: 1; } .vxe-date-picker--layout-body-wrapper { display: flex; flex-direction: row; } .vxe-date-picker--layout-top-wrapper, .vxe-date-picker--layout-bottom-wrapper, .vxe-date-picker--layout-left-wrapper, .vxe-date-picker--layout-right-wrapper, .vxe-date-picker--layout-header-wrapper, .vxe-date-picker--layout-footer-wrapper { flex-shrink: 0; } .vxe-date-picker--layout-top-wrapper { border-bottom: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-picker--layout-bottom-wrapper { border-top: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-picker--layout-left-wrapper { border-right: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-picker--layout-right-wrapper { border-left: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-date-picker--layout-footer-wrapper { display: flex; flex-direction: row; } .vxe-date-picker--layout-footer-custom { flex-grow: 1; } .vxe-date-picker--layout-footer-btns { flex-shrink: 0; padding: 0 0.8em 0.8em 0.8em; display: flex; align-items: center; } .vxe-date-picker { font-size: var(--vxe-ui-font-size-default); height: var(--vxe-ui-input-height-default); line-height: var(--vxe-ui-input-height-default); } .vxe-date-picker.size--medium { font-size: var(--vxe-ui-font-size-medium); height: var(--vxe-ui-input-height-medium); line-height: var(--vxe-ui-input-height-medium); } .vxe-date-picker.size--small { font-size: var(--vxe-ui-font-size-small); height: var(--vxe-ui-input-height-small); line-height: var(--vxe-ui-input-height-small); } .vxe-date-picker.size--mini { font-size: var(--vxe-ui-font-size-mini); height: var(--vxe-ui-input-height-mini); line-height: var(--vxe-ui-input-height-mini); }