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

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

.tiny-numeric{--tv-Numeric-input-width:126px;--tv-Numeric-input-normal-height:var(--tv-size-height-md, 32px);--tv-Numeric-input-border-radius:var(--tv-border-radius-md, 6px);--tv-Numeric-input-normal-border-color:var(--tv-color-border, #c2c2c2);--tv-Numeric-input-dividing-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-Numeric-input-dividing-border-height:20px;--tv-Numeric-input-normal-font-size:var(--tv-font-size-default, 14px);--tv-Numeric-input-normal-text-color:var(--tv-color-text, #191919);--tv-Numeric-input-normal-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Numeric-input-icon-width:calc(var(--tv-Numeric-input-normal-height) - 1px);--tv-Numeric-input-normal-active-border-color:var(--tv-color-border-hover, #191919);--tv-Numeric-input-icon-color:var(--tv-color-icon, #808080);--tv-Numeric-input-placeholder-text-color:var(--tv-color-text-placeholder, #808080);--tv-Numeric-input-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Numeric-input-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-Numeric-input-border-color-active:var(--tv-color-border-active, #191919);--tv-Numeric-input-icon-size:var(--tv-icon-size, 16px);--tv-Numeric-input-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Numeric-input-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Numeric-input-border-color-disabled:var(--tv-color-border-disabled, #dbdbdb);--tv-Numeric-input-btn-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Numeric-input-width-medium:158px;--tv-Numeric-input-height-medium:var(--tv-size-height-lg, 40px);--tv-Numeric-input-icon-width-medium:var(--tv-Numeric-input-height-medium);--tv-Numeric-input-icon-size-medium:var(--tv-icon-size, 16px);--tv-Numeric-input-divider-height-medium:24px;--tv-Numeric-input-width-small:112px;--tv-Numeric-input-height-small:var(--tv-size-height-sm, 28px);--tv-Numeric-input-icon-width-small:var(--tv-Numeric-input-height-small);--tv-Numeric-input-icon-size-small:14px;--tv-Numeric-input-divider-height-small:18px;--tv-Numeric-input-width-mini:102px;--tv-Numeric-input-height-mini:var(--tv-size-height-xs, 24px);--tv-Numeric-input-icon-width-mini:var(--tv-Numeric-input-height-mini);--tv-Numeric-input-icon-size-mini:14px;--tv-Numeric-input-divider-height-mini:15px;--tv-Numeric-input-unit-width:50px;--tv-Numeric-input-unit-text-color:var(--tv-color-text-secondary, #595959);--tv-Numeric-input-unit-font-size:var(--tv-font-size-default, 14px);--tv-Numeric-input-unit-border-left-color:var(--tv-color-border, #c2c2c2);--tv-Numeric-input-unit-bg-color:var(--tv-color-bg-gray-1, #fafafa);position:relative;display:inline-block;width:var(--tv-Numeric-input-width);overflow:hidden}.tiny-numeric__input{display:block;line-height:normal}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner{cursor:not-allowed;pointer-events:none;border:1px solid var(--tv-Numeric-input-border-color-disabled);color:var(--tv-Numeric-input-disabled-text-color);background:var(--tv-Numeric-input-disabled-bg-color)}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-moz-placeholder{color:var(--tv-Numeric-input-placeholder-text-color);opacity:1}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner:-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-webkit-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input.is-disabled .tiny-input__icon{cursor:not-allowed}.tiny-numeric__input.has-unit .tiny-numeric__input-inner{padding:0 50px 0 8px}.tiny-numeric__input.text-align-left .tiny-numeric__input-inner{text-align:left}.tiny-numeric__input-inner{width:100%;height:var(--tv-Numeric-input-normal-height);line-height:1.5;border:1px solid var(--tv-Numeric-input-normal-border-color);border-radius:var(--tv-Numeric-input-border-radius);color:var(--tv-Numeric-input-normal-text-color);background:var(--tv-Numeric-input-normal-bg-color);font-size:var(--tv-Numeric-input-normal-font-size);padding:0 calc(var(--tv-Numeric-input-icon-width) + 8px);outline:0;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.tiny-numeric__input-inner::-moz-placeholder{color:var(--tv-Numeric-input-placeholder-text-color);opacity:1}.tiny-numeric__input-inner:-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner::-webkit-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner::-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner::placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner:hover{border:1px solid var(--tv-Numeric-input-normal-active-border-color)}.tiny-numeric__input-inner:active,.tiny-numeric__input-inner:focus{border:1px solid var(--tv-Numeric-input-border-color-active)}.tiny-numeric__input-inner:focus{outline:0}.tiny-numeric__input-inner:focus::-moz-placeholder{color:var(--tv-Numeric-input-placeholder-text-color);opacity:1}.tiny-numeric__input-inner:focus:-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner:focus::-webkit-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner:focus::-ms-input-placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner:focus::placeholder{color:var(--tv-Numeric-input-placeholder-text-color)}.tiny-numeric__input-inner::-ms-clear{display:none;width:0;height:0}.tiny-numeric__input-inner.tiny-numeric__show-left{text-align:left}.tiny-numeric__decrease,.tiny-numeric__increase{position:absolute;z-index:1;top:1px;width:var(--tv-Numeric-input-icon-width);height:calc(100% - 2px);line-height:calc(var(--tv-Numeric-input-normal-height));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:var(--tv-Numeric-input-icon-size);text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tiny-numeric__decrease svg,.tiny-numeric__increase svg{fill:var(--tv-Numeric-input-icon-color)}.tiny-numeric__decrease:hover:not(.is-disabled)~.tiny-numeric__input .tiny-numeric__input-inner:not(.is-disabled),.tiny-numeric__increase:hover:not(.is-disabled)~.tiny-numeric__input .tiny-numeric__input-inner:not(.is-disabled){border-color:var(--tv-Numeric-input-icon-color-hover)}.tiny-numeric__decrease:hover:not(.is-disabled)~.tiny-numeric__input.is-disabled .tiny-numeric__input-inner:not(.is-disabled),.tiny-numeric__increase:hover:not(.is-disabled)~.tiny-numeric__input.is-disabled .tiny-numeric__input-inner:not(.is-disabled){border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric__decrease:hover svg,.tiny-numeric__increase:hover svg{fill:var(--tv-Numeric-input-icon-color-hover)}.tiny-numeric__decrease.is-disabled,.tiny-numeric__increase.is-disabled{cursor:not-allowed;background-color:var(--tv-Numeric-input-btn-disabled-bg-color)}.tiny-numeric__decrease.is-disabled svg,.tiny-numeric__increase.is-disabled svg{fill:var(--tv-Numeric-input-icon-color-disabled)}.tiny-numeric__increase{right:1px;border-radius:0 4px 4px 0}.tiny-numeric__increase:before{content:'';display:inline-block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:var(--tv-Numeric-input-dividing-border-height);border-left:1px solid var(--tv-Numeric-input-dividing-border-color)}.tiny-numeric__increase.is-disabled:before{border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric__decrease{left:1px;border-radius:4px 0 0 4px}.tiny-numeric__decrease:after{content:'';display:inline-block;position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:var(--tv-Numeric-input-dividing-border-height);border-left:1px solid var(--tv-Numeric-input-dividing-border-color)}.tiny-numeric__decrease.is-disabled:after{border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric__unit{right:1px;position:absolute;z-index:1;top:1px;width:var(--tv-Numeric-input-unit-width);height:calc(100% - 2px);color:var(--tv-Numeric-input-unit-text-color);font-size:var(--tv-Numeric-input-unit-font-size);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-left:1px solid var(--tv-Numeric-input-unit-border-left-color);background:var(--tv-Numeric-input-unit-bg-color);border-top-right-radius:var(--tv-Numeric-input-border-radius);border-bottom-right-radius:var(--tv-Numeric-input-border-radius)}.tiny-numeric.is-disabled .tiny-numeric__unit{background:var(--tv-Numeric-input-disabled-bg-color);border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric.is-disabled .tiny-numeric__decrease,.tiny-numeric.is-disabled .tiny-numeric__increase{border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric.is-disabled .tiny-numeric__decrease svg,.tiny-numeric.is-disabled .tiny-numeric__increase svg{fill:var(--tv-Numeric-input-icon-color-disabled);color:var(--tv-Numeric-input-icon-color-disabled)}.tiny-numeric.is-disabled .tiny-numeric__decrease:hover,.tiny-numeric.is-disabled .tiny-numeric__increase:hover{cursor:not-allowed}.tiny-numeric.is-disabled .tiny-numeric__decrease:hover svg,.tiny-numeric.is-disabled .tiny-numeric__increase:hover svg{fill:var(--tv-Numeric-input-icon-color-disabled)}.tiny-numeric.is-disabled .tiny-numeric__decrease:after{border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric.is-disabled .tiny-numeric__increase:before{border-color:var(--tv-Numeric-input-border-color-disabled)}.tiny-numeric.is-disabled.is-display-only{display:-webkit-box;display:-ms-flexbox;display:flex;background:0 0}.tiny-numeric.is-display-only .tiny-numeric-display-only .tiny-numeric-display-only__content{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tiny-numeric.is-display-only .tiny-numeric-display-only__unit{margin-left:8px}.tiny-numeric.is-display-only .tiny-numeric__input{border-style:none;padding:0;line-height:16px;height:16px}.tiny-numeric.is-display-only .tiny-numeric__decrease,.tiny-numeric.is-display-only .tiny-numeric__increase,.tiny-numeric.is-display-only .tiny-numeric__input-inner,.tiny-numeric.is-display-only .tiny-numeric__unit{visibility:hidden}.tiny-numeric--medium{width:var(--tv-Numeric-input-width-medium)}.tiny-numeric--medium .tiny-numeric__decrease,.tiny-numeric--medium .tiny-numeric__increase{width:var(--tv-Numeric-input-icon-width-medium);line-height:calc(var(--tv-Numeric-input-height-medium) - 2);font-size:var(--tv-Numeric-input-icon-size-medium)}.tiny-numeric--medium .tiny-numeric__decrease:after,.tiny-numeric--medium .tiny-numeric__decrease:before,.tiny-numeric--medium .tiny-numeric__increase:after,.tiny-numeric--medium .tiny-numeric__increase:before{height:var(--tv-Numeric-input-divider-height-medium)}.tiny-numeric--medium .tiny-numeric__input-inner{height:var(--tv-Numeric-input-height-medium);line-height:var(--tv-Numeric-input-height-medium);padding-left:43px;padding-right:43px}.tiny-numeric--small{width:var(--tv-Numeric-input-width-small)}.tiny-numeric--small .tiny-numeric__decrease,.tiny-numeric--small .tiny-numeric__increase{width:var(--tv-Numeric-input-icon-width-small);line-height:calc(var(--tv-Numeric-input-icon-width-small) - 2);font-size:var(--tv-Numeric-input-icon-size-small)}.tiny-numeric--small .tiny-numeric__decrease:after,.tiny-numeric--small .tiny-numeric__decrease:before,.tiny-numeric--small .tiny-numeric__increase:after,.tiny-numeric--small .tiny-numeric__increase:before{height:var(--tv-Numeric-input-divider-height-small)}.tiny-numeric--small .tiny-numeric__input-inner{height:var(--tv-Numeric-input-height-small);line-height:var(--tv-Numeric-input-height-small);padding-left:37px;padding-right:37px}.tiny-numeric--mini{width:var(--tv-Numeric-input-width-mini);font-size:0}.tiny-numeric--mini .tiny-numeric__decrease,.tiny-numeric--mini .tiny-numeric__increase{width:var(--tv-Numeric-input-icon-width-mini);line-height:calc(var(--tv-Numeric-input-icon-width-mini) - 4);font-size:var(--tv-Numeric-input-icon-size-mini)}.tiny-numeric--mini .tiny-numeric__decrease:after,.tiny-numeric--mini .tiny-numeric__decrease:before,.tiny-numeric--mini .tiny-numeric__increase:after,.tiny-numeric--mini .tiny-numeric__increase:before{height:var(--tv-Numeric-input-divider-height-mini)}.tiny-numeric--mini .tiny-numeric__input-inner{height:var(--tv-Numeric-input-height-mini);line-height:var(--tv-Numeric-input-height-mini);padding-left:35px;padding-right:35px}.tiny-numeric.is-without-controls .tiny-numeric__input-inner{padding-left:8px;padding-right:8px}.tiny-numeric.is-without-controls .tiny-numeric__input.has-unit .tiny-numeric__input-inner{padding:0 50px 0 8px}.tiny-numeric.is-without-controls .tiny-numeric__input.text-align-left .tiny-numeric__input-inner{text-align:left}.tiny-numeric.is-without-controls .tiny-numeric__input.tiny-numeric__read-only{padding:0}.tiny-numeric.is-controls-right .tiny-numeric__input-inner{padding-left:8px;padding-right:38px}.tiny-numeric.is-controls-right .tiny-numeric__decrease,.tiny-numeric.is-controls-right .tiny-numeric__increase{height:50%}.tiny-numeric.is-controls-right .tiny-numeric__decrease svg,.tiny-numeric.is-controls-right .tiny-numeric__increase svg{-webkit-transform:scale(.8);transform:scale(.8)}.tiny-numeric.is-controls-right .tiny-numeric__increase{border-radius:0 4px 0 0;border-bottom:1px solid var(--tv-Numeric-input-normal-border-color);border-left:1px solid var(--tv-Numeric-input-normal-border-color)}.tiny-numeric.is-controls-right .tiny-numeric__increase:before{height:100%;display:none}.tiny-numeric.is-controls-right .tiny-numeric__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid var(--tv-Numeric-input-normal-border-color);border-radius:0 0 4px}.tiny-numeric.is-controls-right .tiny-numeric__decrease svg{-webkit-transform:scale(.8) translateY(3px);transform:scale(.8) translateY(3px)}.tiny-numeric.is-controls-right .tiny-numeric__decrease:after{display:none}