various-ui/styles/steps-input.css

This is a test version of the Vue 3 component library

.ui-steps-input{--uioption-steps-spacing:16px}.ui-steps-input{display:flex;align-items:center}.ui-steps-input .ui-steps-container{display:flex;align-items:center}.ui-steps-input .ui-steps-container .ui-steps-control{flex:1;padding:0 var(--uioption-steps-spacing);border-right:0;border-radius:var(--uioption-form-radius) 0 0 var(--uioption-form-radius)}.ui-steps-input .ui-steps-container .ui-steps-number{padding:0 4px;border-radius:0 var(--uioption-form-radius) var(--uioption-form-radius) 0}.ui-steps-input .ui-steps-container .ui-form-control{text-align:center}.ui-steps-input .ui-steps-container .ui-form-control::placeholder{color:var(--uioption-form-placeholder-color)}.ui-steps-input .ui-steps-container .ui-form-control::-webkit-inner-spin-button,.ui-steps-input .ui-steps-container .ui-form-control::-webkit-outer-spin-button{appearance:none;margin:0}.ui-steps-input .ui-steps-rect{display:flex;align-items:center;justify-content:center}.ui-steps-input .ui-steps-rect::before{width:12px;height:2px;display:block;content:"";background-color:var(--uicolor-font-1)}.ui-steps-input:not(.ui-disabled-status):not(.ui-readonly-status) .ui-steps-container .ui-form-control:focus::placeholder{color:transparent}.ui-steps-input:not(.ui-disabled-status):not(.ui-readonly-status) .ui-steps-container.ui-active,.ui-steps-input:not(.ui-disabled-status):not(.ui-readonly-status) .ui-steps-container:hover{--uioption-form-color:var(--uicolor-font-2)}