Component Library
Sign out

Forms: Text Input With Icon 

<h1>Deprecated - Use Form Catalog</h1>

<h3 class="acl-typography--subtitle1">Text Input With Icon</h3>
<div class="acl-text-field text-field acl-text-field--with-leading-icon acl-demo-field">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading" class="acl-text-field__input acl-text-input-with-icon" aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>

<h3 class="acl-typography--subtitle1">Text Input With Icon: State when populated</h3>
<div class="acl-text-field text-field acl-text-field--with-leading-icon acl-demo-field--populated">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading" class="acl-text-field__input acl-text-field__input--populated acl-text-input-with-icon" aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>

<h3 class="acl-typography--subtitle1">Text Input With Icon: State when invalid</h3>
<div class="acl-text-field text-field acl-text-field--with-leading-icon acl-text-field--invalid acl-demo-field--invalid">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading" class="acl-text-field__input acl-text-input-with-icon acl-text-field__input--invalid" aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>

<script>
    const textInputWithIcon = new acl.MDCTextField(document.querySelector('.acl-demo-field'));
    const textInputWithIconPopulated = new acl.MDCTextField(document.querySelector('.acl-demo-field--populated'));
    const textInputWithIconInvalid = new acl.MDCTextField(document.querySelector('.acl-demo-field--invalid'));
</script>

<style>
    .acl-demo-field,
    .acl-demo-field--invalid,
    .acl-demo-field--populated {
        max-width: 500px;
    }
</style>
 
<h1>Deprecated - Use Form Catalog</h1>

<h3 class="acl-typography--subtitle1">Text Input With Icon</h3>
<div class="acl-text-field text-field acl-text-field--with-leading-icon acl-demo-field">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading" class="acl-text-field__input acl-text-input-with-icon"
        aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>

<h3 class="acl-typography--subtitle1">Text Input With Icon: State when populated</h3>
<div class="acl-text-field text-field acl-text-field--with-leading-icon acl-demo-field--populated">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading"
        class="acl-text-field__input acl-text-field__input--populated acl-text-input-with-icon"
        aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>

<h3 class="acl-typography--subtitle1">Text Input With Icon: State when invalid</h3>
<div
    class="acl-text-field text-field acl-text-field--with-leading-icon acl-text-field--invalid acl-demo-field--invalid">
    <i class="material-icons acl-text-field__icon">map</i>
    <input type="text" id="text-field-filled-leading"
        class="acl-text-field__input acl-text-input-with-icon acl-text-field__input--invalid"
        aria-describedby="text-field-filled-leading-helper-text">
    <label class="acl-floating-label acl-floating-label--secondary" for="text-field-filled-leading">Name your route
        here</label>
</div>




<script>
    const textInputWithIcon = new acl.MDCTextField(document.querySelector('.acl-demo-field'));
    const textInputWithIconPopulated = new acl.MDCTextField(document.querySelector('.acl-demo-field--populated'));
    const textInputWithIconInvalid = new acl.MDCTextField(document.querySelector('.acl-demo-field--invalid'));
</script>

<style>
    .acl-demo-field,
    .acl-demo-field--invalid,
    .acl-demo-field--populated {
        max-width: 500px;
    }
</style>
 
/* 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--text-input-with-icon
  • Preview:
  • Filesystem Path: src/components/forms/forms--text-input-with-icon.hbs

No notes defined.