vue-amazing-ui/lib/inputnumber/InputNumber.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.input-number-wrap[data-v-fbc94156]{position:relative;display:inline-block;width:var(--input-number-width);height:32px;font-size:14px;color:#000000e0;line-height:1.57142857;padding:0 11px;background-color:#fff;border-radius:6px;border:1px solid #d9d9d9;transition:all .2s}.input-number-wrap[data-v-fbc94156]:hover{border-color:var(--input-number-primary-color-hover)}.input-number-wrap:hover .input-number-handler-wrap[data-v-fbc94156]{background:#fff;opacity:1}.input-number-wrap[data-v-fbc94156]:focus-within{border-color:var(--input-number-primary-color-focus);box-shadow:0 0 0 2px var(--input-number-primary-shadow-color)}.input-number-wrap .input-number-container[data-v-fbc94156]{height:100%;display:flex}.input-number-wrap .input-number-container .input-prefix[data-v-fbc94156]{pointer-events:none;margin-right:4px;display:inline-flex;align-items:center}.input-number-wrap .input-number-container .input-number[data-v-fbc94156]{font-size:14px;color:#000000e0;width:100%;height:100%;background:transparent;border-radius:6px;transition:all .2s linear;appearance:textfield;border:none;outline:none}.input-number-wrap .input-number-container input[data-v-fbc94156]::-webkit-input-placeholder{color:#00000040}.input-number-wrap .input-number-container input[data-v-fbc94156]:-moz-placeholder{color:#00000040}.input-number-wrap .input-number-container input[data-v-fbc94156]::-moz-placeholder{color:#00000040}.input-number-wrap .input-number-container input[data-v-fbc94156]:-ms-input-placeholder{color:#00000040}.input-number-wrap .input-number-handler-wrap[data-v-fbc94156]{position:absolute;top:0;right:0;width:22px;height:100%;background:transparent;border-radius:0 6px 6px 0;opacity:0;display:flex;flex-direction:column;align-items:stretch;transition:all .2s linear}.input-number-wrap .input-number-handler-wrap .input-number-arrow[data-v-fbc94156]{display:flex;align-items:center;justify-content:center;flex:auto;height:40%;border-left:1px solid #d9d9d9;cursor:pointer;transition:all .2s linear}.input-number-wrap .input-number-handler-wrap .input-number-arrow[data-v-fbc94156]:hover{height:60%}.input-number-wrap .input-number-handler-wrap .input-number-arrow:hover .icon-svg[data-v-fbc94156]{color:var(--input-number-primary-color)}.input-number-wrap .input-number-handler-wrap .input-number-arrow .icon-svg[data-v-fbc94156]{font-size:7px;color:#00000073;fill:currentColor;-webkit-user-select:none;user-select:none;transition:color .2s}.input-number-wrap .input-number-handler-wrap .up-arrow[data-v-fbc94156]{border-top-right-radius:6px}.input-number-wrap .input-number-handler-wrap .down-arrow[data-v-fbc94156]{border-top:1px solid #d9d9d9;border-bottom-right-radius:6px}.input-number-wrap .input-number-handler-wrap .arrow-disabled[data-v-fbc94156]{cursor:not-allowed}.input-number-disabled[data-v-fbc94156]{color:#00000040;background-color:#0000000a;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input-number-disabled[data-v-fbc94156]:hover{border-color:#d9d9d9}.input-number-disabled[data-v-fbc94156]:focus-within{border-color:#d9d9d9;box-shadow:none}.input-number-disabled .input-number-container .input-number[data-v-fbc94156]{color:#00000040;cursor:not-allowed}.input-number-disabled .input-number-handler-wrap[data-v-fbc94156]{display:none}