@varlet/ui/es/time-picker/timePicker.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-hint-min-height: 21px; --time-picker-title-inactive-opacity: 0.6; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-time-border-radius: 0; --time-picker-title-time-padding: 0; --time-picker-title-time-background: transparent; --time-picker-title-time-active-background: transparent; --time-picker-title-time-container-justify-content: flex-end; --time-picker-title-ampm-button-active-background: transparent; --time-picker-title-ampm-margin-left: 10px; --time-picker-title-ampm-border-radius: 0; --time-picker-title-ampm-border: none; --time-picker-title-ampm-button-padding: 2px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: var(--color-on-primary); --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: 288px; --time-picker-actions-padding: 0 8px 12px 8px;}.var-time-picker-after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: transparent;}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-splitter { display: flex; align-items: center;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom); min-height: var(--time-picker-title-hint-min-height);}.var-time-picker__title-time-container { display: flex; align-items: center; justify-content: var(--time-picker-title-time-container-justify-content);}.var-time-picker__title-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier); white-space: nowrap; background: var(--time-picker-title-time-background); padding: var(--time-picker-title-time-padding); border-radius: var(--time-picker-title-time-border-radius); opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-btn--active { background: var(--time-picker-title-time-active-background); opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { border: var(--time-picker-title-ampm-border); border-radius: var(--time-picker-title-ampm-border-radius); margin-left: var(--time-picker-title-ampm-margin-left); overflow: hidden;}.var-time-picker__title-ampm .var-time-picker__title-btn { padding: var(--time-picker-title-ampm-button-padding); border-radius: 0; opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-ampm .var-time-picker__title-btn--active { background: var(--time-picker-title-ampm-button-active-background); opacity: 1;}.var-time-picker__title-ampm .var-time-picker__title-btn:first-child { border-bottom: var(--time-picker-title-ampm-border);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background); transition: 0.25s background-color;}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}