@opentiny/vue-theme/picker/index.css

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

.tiny-transition-timepicker{-webkit-animation:fadein .3s;animation:fadein .3s}.tiny-transition-timepicker-up{-webkit-animation:fadeup .3s;animation:fadeup .3s}@-webkit-keyframes fadein{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px);z-index:-999}100%{-webkit-transform:translateY(0);transform:translateY(0);z-index:0}}@keyframes fadein{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px);z-index:-999}100%{-webkit-transform:translateY(0);transform:translateY(0);z-index:0}}@-webkit-keyframes fadeup{0%{-webkit-transform:translateY(200px);transform:translateY(200px);z-index:-999}100%{-webkit-transform:translateY(0);transform:translateY(0);z-index:0}}@keyframes fadeup{0%{-webkit-transform:translateY(200px);transform:translateY(200px);z-index:-999}100%{-webkit-transform:translateY(0);transform:translateY(0);z-index:0}}.tiny-picker{position:relative}.tiny-picker .tiny-date-editor{--tv-Picker-font-size:var(--tv-font-size-default, 14px);--tv-Picker-font-size-sm:var(--tv-font-size-sm, 12px);--tv-Picker-text-color:var(--tv-color-text, #191919);--tv-Picker-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Picker-label-text-color:var(--tv-color-text-weaken, #808080);--tv-Picker-icon-color:var(--tv-color-icon, #808080);--tv-Picker-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Picker-icon-size:var(--tv-icon-size, 16px);--tv-Picker-border-color-active:var(--tv-color-border-active, #191919);--tv-Picker-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Picker-input-clear-icon-bg:var(--tv-color-bg-3, #fff);--tv-Picker-height-medium:var(--tv-size-height-lg, 40px);--tv-Picker-height-small:var(--tv-size-height-sm, 28px);--tv-Picker-height-mini:var(--tv-size-height-xs, 24px);position:relative;display:inline-block;text-align:left}.tiny-picker .tiny-date-editor .tiny-svg{font-size:var(--tv-Picker-icon-size);fill:var(--tv-Picker-icon-color)}.tiny-picker .tiny-date-editor .tiny-svg:hover{fill:var(--tv-Picker-icon-color-hover)}.tiny-picker .tiny-date-editor.tiny-input,.tiny-picker .tiny-date-editor.tiny-input__inner{width:100%}.tiny-picker .tiny-date-editor--dates .tiny-input__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-picker .tiny-date-editor.show-auto-width.tiny-input,.tiny-picker .tiny-date-editor.show-auto-width.tiny-input__inner{width:100%}.tiny-picker .tiny-date-editor .tiny-input__label{color:var(--tv-Picker-label-text-color);font-size:12px;margin-right:8px;max-width:100px;display:inline-block;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-picker .tiny-date-editor .tiny-input__icon-container{width:initial;cursor:pointer;position:absolute;right:0}.tiny-picker .tiny-date-editor .tiny-input__icon-container .baseClearicon{position:absolute}.tiny-picker .tiny-date-editor .tiny-input__icon-container .baseClearicon+.tiny-svg-size{visibility:hidden}.tiny-picker .tiny-date-editor .tiny-input__icon-container .baseClearicon:hover{fill:var(--tv-Picker-icon-color-hover)}.tiny-picker .tiny-date-editor .tiny-input__icon-container:not(.tiny-range__icon){display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-picker .tiny-date-editor .tiny-range-input,.tiny-picker .tiny-date-editor .tiny-range-separator{font-size:var(--tv-Picker-font-size);height:100%;margin:0;text-align:center;display:inline-block}.tiny-picker .tiny-date-editor .tiny-range-input{text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;padding:0;width:39%;background:inherit;color:var(--tv-Picker-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-picker .tiny-date-editor .tiny-range-input::-moz-placeholder{color:#999;opacity:1}.tiny-picker .tiny-date-editor .tiny-range-input:-ms-input-placeholder{color:#999}.tiny-picker .tiny-date-editor .tiny-range-input::-webkit-input-placeholder{color:#999}.tiny-picker .tiny-date-editor .tiny-range-input::-ms-input-placeholder{color:#999}.tiny-picker .tiny-date-editor .tiny-range-input::placeholder{color:#999}.tiny-picker .tiny-date-editor .tiny-range-separator{padding:0 5px;line-height:22px;width:12%}.tiny-picker .tiny-date-editor .tiny-range__close-icon{position:absolute;right:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.tiny-picker .tiny-date-editor .tiny-range__close-icon svg{width:var(--tv-Picker-icon-size);height:var(--tv-Picker-icon-size);cursor:pointer}.tiny-picker .tiny-date-editor .tiny-range__close-icon:has(>svg)+.tiny-range__icon{display:none}.tiny-range-editor.tiny-input__inner{width:360px}.tiny-range-editor:not(.is-display-only).tiny-input__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:3px 10px}.tiny-range-editor:not(.is-display-only) .tiny-range-input{line-height:1}.tiny-range-editor:not(.is-display-only).is-active,.tiny-range-editor:not(.is-display-only).is-active:hover{border-color:var(--tv-Picker-border-color-active)}.tiny-range-editor--medium:not(.is-display-only).tiny-input__inner{height:var(--tv-Picker-height-medium)}.tiny-range-editor--medium:not(.is-display-only) .tiny-range-separator{line-height:34px;font-size:var(--tv-Picker-font-size)}.tiny-range-editor--medium:not(.is-display-only) .tiny-range-input{font-size:var(--tv-Picker-font-size)}.tiny-range-editor--small:not(.is-display-only).tiny-input__inner{height:var(--tv-Picker-height-small)}.tiny-range-editor--small:not(.is-display-only) .tiny-range-separator{line-height:20px;font-size:var(--tv-Picker-font-size)}.tiny-range-editor--small:not(.is-display-only) .tiny-range-input{font-size:var(--tv-Picker-font-size)}.tiny-range-editor--mini:not(.is-display-only).tiny-input__inner{height:var(--tv-Picker-height-mini)}.tiny-range-editor--mini:not(.is-display-only) .tiny-range-separator{line-height:16px;font-size:var(--tv-Picker-font-size-sm)}.tiny-range-editor--mini:not(.is-display-only) .tiny-range-input{font-size:var(--tv-Picker-font-size-sm)}.tiny-range-editor:not(.is-display-only).is-disabled{background-color:var(--tv-Picker-bg-color-disabled);border-color:transparent;color:var(--tv-Picker-text-color-disabled);cursor:not-allowed}.tiny-range-editor:not(.is-display-only).is-disabled:focus,.tiny-range-editor:not(.is-display-only).is-disabled:hover{border-color:transparent}.tiny-range-editor:not(.is-display-only).is-disabled input{color:var(--tv-Picker-text-color-disabled);background-color:var(--tv-Picker-bg-color-disabled);cursor:not-allowed}.tiny-range-editor:not(.is-display-only).is-disabled input::-moz-placeholder{color:#999;opacity:1}.tiny-range-editor:not(.is-display-only).is-disabled input:-ms-input-placeholder{color:#999}.tiny-range-editor:not(.is-display-only).is-disabled input::-webkit-input-placeholder{color:#999}.tiny-range-editor:not(.is-display-only).is-disabled input::-ms-input-placeholder{color:#999}.tiny-range-editor:not(.is-display-only).is-disabled input::placeholder{color:#999}.tiny-range-editor:not(.is-display-only).is-disabled .tiny-range-separator{color:var(--tv-Picker-text-color-disabled)}.tiny-range-editor.is-display-only{position:relative;border-width:0}.tiny-range-editor.is-display-only>:not(.tiny-range-editor-display-only){visibility:hidden}.tiny-range-editor.is-display-only>.tiny-range-editor-display-only{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px}.tiny-scrollbar{overflow:hidden;position:relative}.tiny-scrollbar:active>.tiny-scrollbar__bar,.tiny-scrollbar:focus>.tiny-scrollbar__bar,.tiny-scrollbar:hover>.tiny-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.tiny-scrollbar__wrap{overflow:scroll;height:100%}.tiny-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.tiny-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(144,147,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.tiny-scrollbar__thumb:hover{background-color:rgba(144,147,153,.5)}.tiny-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.tiny-scrollbar__bar.is-vertical{width:6px;top:2px}.tiny-scrollbar__bar.is-vertical>div{width:100%}.tiny-scrollbar__bar.is-horizontal{height:6px;left:2px}.tiny-scrollbar__bar.is-horizontal>div{height:100%}