@arco-design/web-react
Version:
Arco Design React UI Library.
1 lines • 4.69 kB
CSS
.arco-input-number{position:relative;display:inline-block;width:100%;box-sizing:border-box;border-radius:var(--border-radius-small)}.arco-input-number-step-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-color:var(--color-neutral-3);background-color:var(--color-fill-2);color:var(--color-text-2);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .1s cubic-bezier(0,0,1,1)}.arco-input-number-step-button:hover{border-color:var(--color-fill-3);background-color:var(--color-fill-3)}.arco-input-number-step-button:active{border-color:var(--color-fill-4);background-color:var(--color-fill-4)}.arco-input-number-step-button-disabled{cursor:not-allowed;background-color:var(--color-fill-2);color:var(--color-text-4)}.arco-input-number-step-button-disabled:active,.arco-input-number-step-button-disabled:hover{border-color:var(--color-neutral-3);background-color:var(--color-fill-2)}.arco-input-number-prefix,.arco-input-number-suffix{transition:all .1s cubic-bezier(0,0,1,1)}.arco-input-number-mode-embed .arco-input-number-step-layer{opacity:0;position:absolute;right:4px;top:4px;bottom:4px;width:18px;border-radius:1px;overflow:hidden;transition:all .1s cubic-bezier(0,0,1,1)}.arco-input-number-mode-embed .arco-input-number-step-layer .arco-input-number-step-button{width:100%;height:50%;font-size:10px}.arco-input-number-mode-embed:not(.arco-input-group-wrapper-disabled):hover .arco-input-number-step-layer{opacity:1}.arco-input-number-mode-embed:not(.arco-input-group-wrapper-disabled):hover .arco-input-number-step-layer~.arco-input-number-suffix{opacity:0;pointer-events:none}.arco-input-number-mode-embed .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-focus) .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover{background-color:var(--color-fill-4)}.arco-input-number-rtl.arco-input-number-mode-embed .arco-input-number-step-layer{right:unset;left:4px}.arco-input-number-mode-button .arco-input{text-align:center}.arco-input-number-mode-button .arco-input-group{position:relative}.arco-input-number-mode-button .arco-input-group-addafter,.arco-input-number-mode-button .arco-input-group-addbefore{padding:0}.arco-input-number-mode-button .arco-input-group .arco-input-number-step-button{position:absolute;top:0;height:100%;border:inherit}.arco-input-number-mode-button .arco-input-group .arco-input-number-step-button:active{border-color:var(--color-fill-4)}.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button{left:0;border-right-color:var(--color-neutral-3)}.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button{right:0;border-left-color:var(--color-neutral-3)}.arco-input-number-mode-button.arco-input-number-size-mini .arco-input-group-addafter,.arco-input-number-mode-button.arco-input-number-size-mini .arco-input-group-addbefore{width:24px}.arco-input-number-mode-button.arco-input-number-size-mini .arco-input-group-addafter .arco-input-number-step-button,.arco-input-number-mode-button.arco-input-number-size-mini .arco-input-group-addbefore .arco-input-number-step-button{width:24px}.arco-input-number-mode-button.arco-input-number-size-small .arco-input-group-addafter,.arco-input-number-mode-button.arco-input-number-size-small .arco-input-group-addbefore{width:28px}.arco-input-number-mode-button.arco-input-number-size-small .arco-input-group-addafter .arco-input-number-step-button,.arco-input-number-mode-button.arco-input-number-size-small .arco-input-group-addbefore .arco-input-number-step-button{width:28px}.arco-input-number-mode-button.arco-input-number-size-default .arco-input-group-addafter,.arco-input-number-mode-button.arco-input-number-size-default .arco-input-group-addbefore{width:32px}.arco-input-number-mode-button.arco-input-number-size-default .arco-input-group-addafter .arco-input-number-step-button,.arco-input-number-mode-button.arco-input-number-size-default .arco-input-group-addbefore .arco-input-number-step-button{width:32px}.arco-input-number-mode-button.arco-input-number-size-large .arco-input-group-addafter,.arco-input-number-mode-button.arco-input-number-size-large .arco-input-group-addbefore{width:36px}.arco-input-number-mode-button.arco-input-number-size-large .arco-input-group-addafter .arco-input-number-step-button,.arco-input-number-mode-button.arco-input-number-size-large .arco-input-group-addbefore .arco-input-number-step-button{width:36px}.arco-input-number-readonly .arco-input-number-step-button{pointer-events:none;color:var(--color-text-4)}.arco-input-number-illegal-value input{color:rgb(var(--danger-6))}