@opentiny/vue-theme/time-spinner/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-spinner{--tv-TimeSpinner-font-size:var(--tv-font-size-default, 14px);--tv-TimeSpinner-text-color:var(--tv-color-text, #191919);--tv-TimeSpinner-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-TimeSpinner-wrapper-max-height:252px;--tv-TimeSpinner-line-height:var(--tv-line-height-number, 1.5);--tv-TimeSpinner-icon-color:var(--tv-color-icon, #808088);--tv-TimeSpinner-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-TimeSpinner-icon-size:var(--tv-icon-size, 16px);--tv-TimeSpinner-list-margin:10px 0 30px 0;--tv-TimeSpinner-item-margin:var(--tv-space-lg, 12px) 10px 0 10px;--tv-TimeSpinner-item-padding:3.5px 0;--tv-TimeSpinner-item-border-radius:var(--tv-border-radius-brand, 999px);--tv-TimeSpinner-item-bg-color-hover:var(--tv-color-bg-hover-3, #deecff);--tv-TimeSpinner-item-bg-color-active:var(--tv-color-bg-active-emphasize, #deecff);--tv-TimeSpinner-item-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0)}.tiny-time-spinner__wrapper{max-height:var(--tv-TimeSpinner-wrapper-max-height);overflow:hidden;display:inline-block;width:50%;vertical-align:top;position:relative}.tiny-time-spinner__wrapper.tiny-scrollbar{overflow:hidden}.tiny-time-spinner__wrapper .tiny-scrollbar__wrap:not(.tiny-scrollbar__wrap--hidden-default){padding-bottom:15px}.tiny-time-spinner__wrapper.is-arrow{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__list::after,.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__list::before{-webkit-transform:translateY(-32px);transform:translateY(-32px)}.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__item:hover:not(.disabled):not(.active){background:var(--tv-TimeSpinner-item-bg-color-hover);cursor:default}.tiny-time-spinner__wrapper .tiny-time-spinner__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateY(-6px);transform:translateY(-6px);margin:var(--tv-TimeSpinner-list-margin)}.tiny-time-spinner__wrapper:last-child .tiny-time-spinner__list{border-right:0}.tiny-time-spinner__wrapper.is-arrow{height:220px}.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__list{height:200px}.tiny-time-spinner__arrow{height:30px;line-height:30px;position:absolute;left:0;width:100%;z-index:1;text-align:center;cursor:pointer}.tiny-time-spinner__arrow .tiny-svg{fill:var(--tv-TimeSpinner-icon-color);font-size:var(--tv-TimeSpinner-icon-size)}.tiny-time-spinner__arrow:hover .tiny-svg{fill:var(--tv-TimeSpinner-icon-color-hover)}.tiny-time-spinner__arrow.tiny-icon-arrow-up{top:10px}.tiny-time-spinner__arrow.tiny-icon-arrow-down{bottom:10px}.tiny-time-spinner__arrow.tiny-input{width:70%}.tiny-time-spinner__arrow.tiny-input .tiny-input__inner{padding:0;text-align:center}.tiny-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.tiny-time-spinner__list::after,.tiny-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.tiny-time-spinner .tiny-time-spinner__item{text-align:center;margin:var(--tv-TimeSpinner-item-margin);padding:var(--tv-TimeSpinner-item-padding);font-size:var(--tv-TimeSpinner-font-size);line-height:var(--tv-TimeSpinner-line-height);color:var(--tv-TimeSpinner-text-color);border-radius:var(--tv-TimeSpinner-item-border-radius);width:52px}.tiny-time-spinner .tiny-time-spinner__item:hover:not(.disabled):not(.active){background:var(--tv-TimeSpinner-item-bg-color-hover);cursor:pointer}.tiny-time-spinner .tiny-time-spinner__item.active:not(.disabled){background-color:var(--tv-TimeSpinner-item-bg-color-active)}.tiny-time-spinner .tiny-time-spinner__item.disabled{color:var(--tv-TimeSpinner-text-color-disabled);cursor:not-allowed;background:var(--tv-TimeSpinner-item-bg-color-disabled)}.tiny-time-spinner.has-seconds .tiny-time-spinner__wrapper{width:33.3%}