Example
pcs
pcs
Markup
<div class="quantity">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
</div>
<div class="quantity quantity--buttons">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity quantity--buttons quantity--big">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity quantity--buttons">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<br>
<div class="quantity">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<abbr class="quantity__uom">pcs</abbr>
</div>
<div class="quantity quantity--buttons">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<abbr class="quantity__uom">pcs</abbr>
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity quantity--buttons quantity--big">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<abbr class="quantity__uom">pcs</abbr>
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
<abbr class="quantity__uom">pcs</abbr>
</div>
Source:
assets/styles/02-atoms/06-form-inputs/_quantity-input.scss, line 1