@opentiny/vue-theme/time-panel/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-time-panel{--tv-TimePanel-font-size:var(--tv-font-size-default, 14px);--tv-TimePanel-width:220px;--tv-TimePanel-margin:var(--tv-space-sm, 4px) 0;--tv-TimePanel-padding:0 14px;--tv-TimePanel-bg-color:var(--tv-color-bg-2, #ffffff);--tv-TimePanel-border-radius:var(--tv-border-radius-md, 6px);--tv-TimePanel-box-shadow:var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));--tv-TimePanel-border-color-divider:var(--tv-color-border-divider, #f0f0f0);--tv-TimePanel-header-margin:var(--tv-space-xl, 16px) 2px 0 2px;--tv-TimePanel-header-text-color:var(--tv-color-text-weaken, #808080);--tv-TimePanel-content-padding-bottom:var(--tv-space-lg, 12px);--tv-TimePanel-btn-height:var(--tv-size-height-sm, 28px);--tv-TimePanel-btn-border-radius:var(--tv-border-radius-md, 6px);--tv-TimePanel-btn-font-weight:var(--tv-font-weight-bold, 600);--tv-TimePanel-btn-padding:0 var(--tv-space-sm, 4px);--tv-TimePanel-confirm-text-color:var(--tv-color-text-link, #1476ff);--tv-TimePanel-footer-padding:var(--tv-space-xl, 16px);--tv-TimePanel-footer-margin:0 calc(-1 * var(--tv-space-xl, 16px));margin:var(--tv-TimePanel-margin);font-size:var(--tv-TimePanel-font-size);background-color:var(--tv-TimePanel-bg-color);-webkit-box-shadow:var(--tv-TimePanel-box-shadow);box-shadow:var(--tv-TimePanel-box-shadow);border-radius:var(--tv-TimePanel-border-radius);position:absolute;width:var(--tv-TimePanel-width);left:0;z-index:1000;-webkit-box-sizing:content-box;box-sizing:content-box;padding:var(--tv-TimePanel-padding);-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-time-panel__header{display:block}.tiny-time-panel__header-title{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin:var(--tv-TimePanel-header-margin);color:var(--tv-TimePanel-header-text-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-time-panel__content{font-size:0;position:relative;overflow:hidden;padding-bottom:var(--tv-TimePanel-content-padding-bottom)}.tiny-time-panel__content:after,.tiny-time-panel__content:before{display:none;content:'';top:50%;position:absolute;margin-top:-19px;height:32px;z-index:-1;left:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid var(--tv-TimePanel-border-color-divider);border-bottom:1px solid var(--tv-TimePanel-border-color-divider)}.tiny-time-panel__content:after{left:50%;margin-left:12%;margin-right:12%}.tiny-time-panel__content:before{padding-left:50%;margin-right:12%;margin-left:12%}.tiny-time-panel__content.has-seconds:after{left:calc(100% / 3 * 2)}.tiny-time-panel__content.has-seconds:before{padding-left:calc(100% / 3)}.tiny-time-panel__footer{border-top:1px solid var(--tv-TimePanel-border-color-divider);text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--tv-TimePanel-footer-padding);margin:var(--tv-TimePanel-footer-margin)}.tiny-time-panel__btn.tiny-button{min-width:inherit;border:none;height:var(--tv-TimePanel-btn-height);padding:var(--tv-TimePanel-btn-padding);margin:0 5px;cursor:pointer;background-color:transparent;outline:0;font-size:12px;border-radius:var(--tv-TimePanel-btn-border-radius);-webkit-transition:background-color .3s cubic-bezier(.645,.045,.355,1);transition:background-color .3s cubic-bezier(.645,.045,.355,1)}.tiny-time-panel__btn.tiny-button.confirm{font-weight:var(--tv-TimePanel-btn-font-weight);color:var(--tv-TimePanel-confirm-text-color)}