Component Library
Sign out

Forms: Incrementing Number Field 

<div class="acl-forms__quantity">
    <div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
    </div>
    <input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0" />
    <div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>

<script>
    const quantityField = new acl.ACLQuantityField();
</script>
 
<div class="acl-forms__quantity">
    <div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')"
        value="Decrease Value">-
    </div>
    <input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0" />
    <div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')"
        value="Increase Value">+</div>
</div>

<script>
    const quantityField = new acl.ACLQuantityField();
</script>
 
/* No context defined. */
  • Content: 
    .acl-forms {
	&__input-container {
		border-bottom: 1px solid #cacfe2;
		display: flex;
		align-items: center;

		&--background-white {
			background-color: #fff;

			&:hover {
				border: 1px solid #b1b7cd;
			}
		}

		&--border-grey {
			border: 1px solid #e8ebf8;

			&:hover {
				border: 1px solid #b1b7cd;
			}
		}

		&--border-blue {
			border: 2px solid #2888d6;
			border-radius: 8px;

			&:hover {
				border: 2px solid #2888d6;
			}
		}

		&--rounded-corners {
			border-radius: 3px;
		}
	}

	&__input {
		border: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100% - 25px);
		margin: 2.5px 0;

		&::placeholder {
			color: #8892b4;
		}

		&--padding {
			padding: 10px;
		}

		&--title {
			color: rgba(0, 0, 0, 0.75);
			font-size: 20px;
			letter-spacing: 0;
			line-height: 20px;
		}
	}

	&__input-icon {
		line-height: 1;

		&--extra-padding {
			padding-right: 5px;
		}

		i {
			color: #8892b4;
			user-select: none;
		}

		&--blue i {
			color: #2888d6;
			font-weight: bold;
		}
	}

	&__text-area {
		padding: 10px;
		background-color: #f8f8fb;
		color: rgba(0, 0, 0, 0.75);
		font-family: 'Open Sans';
		font-size: 12px;
		letter-spacing: 0;
		line-height: 17px;
		border: none;
		resize: none;
		width: 100%;
		height: 100%;

		&::placeholder {
			color: #8892b4;
		}

		&:focus::-webkit-input-placeholder {
			opacity: 0;
		}

		&--background-white {
			background-color: #fff;

			&:hover {
				border: 1px solid #b1b7cd;
			}
		}

		&--border-grey {
			border: 1px solid #e8ebf8;

			&:hover {
				border: 1px solid #b1b7cd;
			}
		}

		&--rounded-corners {
			border-radius: 3px;
		}
	}

	&__quantity {
		display: flex;
		align-items: center;
		justify-content: center;
		color: $teal;
		font-size: 14px;
		font-weight: 600;

		input[type='number']::-webkit-inner-spin-button,
		input[type='number']::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	&__quantity-button {
		color: $black;
		font-size: 15px;
		padding: 15px;
		user-select: none;
		cursor: pointer;
	}

	&__quantity-input {
		border: 1px solid #e8ebf8;
		border-radius: 3px;
		background-color: $white;
		box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
		height: 32px;
		width: 44px;
		text-align: center;
	}
}
  • URL: /components/raw/forms/acl-forms.scss
  • Filesystem Path: src/components/forms/acl-forms.scss
  • Size: 2.3 KB
  • Content: 
    class ACLQuantityField {
    changeQuantity(element, increaseOrDecrease) {
        const input = element.parentElement.querySelector('input');
        let value = parseInt(input.value, 10);
        value = isNaN(value) ? 0 : value;

        switch (increaseOrDecrease) {
            case 'increase':
                value++;
                input.value = value;
                break;
            case 'decrease':
                value < 1 ? (value = 1) : '';
                value--;
                input.value = value;
                break;
            default:
                console.warn('Quantity: No supplied changes to quantity, value will remain.');
        }
    }
}

export { ACLQuantityField };
  • URL: /components/raw/forms/index.js
  • Filesystem Path: src/components/forms/index.js
  • Size: 709 Bytes
  • Handle: @forms--incrementing-number-field
  • Preview:
  • Filesystem Path: src/components/forms/forms--incrementing-number-field.hbs

No notes defined.