Component Library
Sign out

Forms: Form Catalog 

<div>
    <h3>Form Input Boxes</h3>

    <div class="acl-forms__input-container" style="max-width: 300px;">
        <input type="text" class="acl-forms__input" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text">
        <i class="acl-forms__input-icon"><i class="aforza-icons animated fadeIn">acl_edit</i></i>
    </div>

    <br>

    <div class="acl-forms__input-container" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--title" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text">
    </div>

    <br>

    <div class="acl-forms__input-container acl-forms__input-container--border-grey acl-forms__input-container--background-white  acl-forms__input-container--rounded-corners" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--padding" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text">
    </div>

    <br>

    <div class="acl-forms__input-container acl-forms__input-container--border-blue acl-forms__input-container--background-white" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--padding" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text">
        <i class="acl-forms__input-icon acl-forms__input-icon--blue acl-forms__input-icon--extra-padding"><i class="aforza-icons animated fadeIn">acl_close_small</i></i>
    </div>

    <br>

    <h3>Form Text Area</h3>

    <div class="acl-forms__text-area-container" style="max-width: 500px; height: 100px">
        <textarea name="ACL Text Area" class="acl-forms__text-area" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text"></textarea>
    </div>

    <br>
    <br>

    <div class="acl-forms__text-area-container" style="max-width: 500px; height: 100px">
        <textarea name="ACL Text Area" class="acl-forms__text-area acl-forms__text-area--border-grey acl-forms__text-area--background-white acl-forms__text-area--rounded-corners" placeholder="Placeholder" aria-describedby="text-field-filled-helper-text"></textarea>
    </div>

    <br>

</div>
 
<div>
    <h3>Form Input Boxes</h3>

    <div class="acl-forms__input-container" style="max-width: 300px;">
        <input type="text" class="acl-forms__input" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text">
        <i class="acl-forms__input-icon"><i class="aforza-icons animated fadeIn">acl_edit</i></i>
    </div>

    <br>

    <div class="acl-forms__input-container" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--title" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text">        
    </div>

    <br>

    <div class="acl-forms__input-container acl-forms__input-container--border-grey acl-forms__input-container--background-white  acl-forms__input-container--rounded-corners" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--padding" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text">
    </div>

    <br>    
    
    <div class="acl-forms__input-container acl-forms__input-container--border-blue acl-forms__input-container--background-white" style="max-width: 500px;">
        <input type="text" class="acl-forms__input acl-forms__input--padding" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text">
             <i class="acl-forms__input-icon acl-forms__input-icon--blue acl-forms__input-icon--extra-padding"><i class="aforza-icons animated fadeIn">acl_close_small</i></i>
    </div>

    <br>

    <h3>Form Text Area</h3>

    <div class="acl-forms__text-area-container" style="max-width: 500px; height: 100px">
        <textarea name="ACL Text Area" class="acl-forms__text-area" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text"></textarea>
    </div>

    <br>
    <br>

    <div class="acl-forms__text-area-container" style="max-width: 500px; height: 100px">
        <textarea name="ACL Text Area" class="acl-forms__text-area acl-forms__text-area--border-grey acl-forms__text-area--background-white acl-forms__text-area--rounded-corners" placeholder="Placeholder"
            aria-describedby="text-field-filled-helper-text"></textarea>
    </div>

    <br>

</div>
 
/* 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

No notes defined.