UNPKG

tu-view-plus

Version:
140 lines (124 loc) 4.18 kB
.tu-input-number { position: relative; display: inline-flex; width: 100%; box-sizing: border-box; vertical-align: middle; height: 32px; line-height: 32px; } .tu-input-number__decrease, .tu-input-number__increase { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; top: 1px; bottom: 1px; width: 32px; height: 100%; font-size: var(--tu-font-size-medium, 14px); color: var(--tu-color-text-placeholder, #9b9fa8); cursor: pointer; transition: color var(--tu-transition-duration-2, 0.2s); } .tu-input-number__decrease > .tu-icon, .tu-input-number__increase > .tu-icon { font-size: var(--tu-font-size-medium, 14px); } .tu-input-number__decrease.is-disabled, .tu-input-number__increase.is-disabled { cursor: not-allowed; color: var(--tu-color-text-placeholder, #9b9fa8); } .tu-input-number__decrease:hover:not(.is-disabled), .tu-input-number__increase:hover:not(.is-disabled) { color: var(--tu-color-text, #71757f); } .tu-input-number__decrease { left: 1px; } .tu-input-number__increase { right: 1px; } .tu-input-number.is-without-controls .tu-input__inner { padding: 0; } .tu-input-number.is-controls-at-right .tu-input-number__decrease, .tu-input-number.is-controls-at-right .tu-input-number__increase { height: 16px; line-height: 16px; } .tu-input-number.is-controls-at-right .tu-input-number__decrease { right: 1px; bottom: 1px; top: auto; left: auto; } .tu-input-number.is-controls-at-right .tu-input__inner { text-align: left; padding-left: 0; } .tu-input-number--mini { height: 24px; line-height: 24px; } .tu-input-number--mini .tu-input-number__decrease, .tu-input-number--mini .tu-input-number__increase { width: 24px; font-size: var(--tu-font-size-mini, 10px); } .tu-input-number--mini .tu-input-number__decrease > .tu-icon, .tu-input-number--mini .tu-input-number__increase > .tu-icon { font-size: var(--tu-font-size-mini, 10px); } .tu-input-number--mini.is-controls-at-right .tu-input-number__decrease, .tu-input-number--mini.is-controls-at-right .tu-input-number__increase { height: 12px; line-height: 12px; } .tu-input-number--small { height: 28px; line-height: 28px; } .tu-input-number--small .tu-input-number__decrease, .tu-input-number--small .tu-input-number__increase { width: 28px; font-size: var(--tu-font-size-small, 12px); } .tu-input-number--small .tu-input-number__decrease > .tu-icon, .tu-input-number--small .tu-input-number__increase > .tu-icon { font-size: var(--tu-font-size-small, 12px); } .tu-input-number--small.is-controls-at-right .tu-input-number__decrease, .tu-input-number--small.is-controls-at-right .tu-input-number__increase { height: 14px; line-height: 14px; } .tu-input-number--medium { height: 32px; line-height: 32px; } .tu-input-number--medium .tu-input-number__decrease, .tu-input-number--medium .tu-input-number__increase { width: 32px; font-size: var(--tu-font-size-medium, 14px); } .tu-input-number--medium .tu-input-number__decrease > .tu-icon, .tu-input-number--medium .tu-input-number__increase > .tu-icon { font-size: var(--tu-font-size-medium, 14px); } .tu-input-number--medium.is-controls-at-right .tu-input-number__decrease, .tu-input-number--medium.is-controls-at-right .tu-input-number__increase { height: 16px; line-height: 16px; } .tu-input-number--large { height: 36px; line-height: 36px; } .tu-input-number--large .tu-input-number__decrease, .tu-input-number--large .tu-input-number__increase { width: 36px; font-size: var(--tu-font-size-large, 14px); } .tu-input-number--large .tu-input-number__decrease > .tu-icon, .tu-input-number--large .tu-input-number__increase > .tu-icon { font-size: var(--tu-font-size-large, 14px); } .tu-input-number--large.is-controls-at-right .tu-input-number__decrease, .tu-input-number--large.is-controls-at-right .tu-input-number__increase { height: 18px; line-height: 18px; } .tu-input-number .tu-input__inner { text-align: center; } .tu-input-number .tu-input__inner::-webkit-inner-spin-button, .tu-input-number .tu-input__inner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }