mod-build 4.0.22 → 4.0.23

package/src/shared-components/select/_select.scss

@@ -1,61 +0,0 @@
-$select-bg-color: transparent !default;
-$select-border: 1px solid $color-charcoal1 !default;
-$select-border-raius: 4px !default;
-$select-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
-$select-font-size: 16px !default;
-$select-line-height: 1.1875 !default;
-$select-margin: 0 0 15px !default;
-$select-padding: 14px 15px 13px !default;
-$select-text-color: $color-charcoal5 !default;
-$select-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
-
-$select-focus-border: 1px solid $color-charcoal2 !default;
-$select-focus-box-shadow: none !default;
-
-$select-option-bg-color: $color-white !default;
-$select-option-color: $color-charcoal5 !default;
-
-$select-arrow-position-right: 15px !default;
-$select-arrow-position-top: calc(50% - 7px) !default;
-$select-arrow-color: $select-text-color !default;
-
-.select-wrapper {
-	color: $select-text-color;
-	margin: $select-margin;
-	position: relative;
-}
-
-.select {
-	appearance: none;
-	background: $select-bg-color;
-	border: $select-border;
-	border-radius: $select-border-raius;
-	box-shadow: $select-box-shadow;
-	cursor: pointer;
-	font-size: $select-font-size;
-	line-height: $select-line-height;
-	margin: 0;
-	padding: $select-padding;
-	position: relative;
-	transition: $select-transition;
-	width: 100%;
-
-	&:focus {
-		border: $select-focus-border;
-		box-shadow: $select-focus-box-shadow;
-	}
-
-	option {
-		background: $select-option-bg-color;
-		color: $select-option-color;
-	}
-
-	.select-caret {
-		color: $select-arrow-color;
-		margin-top: 0;
-		pointer-events: none;
-		position: absolute;
-		right: $select-arrow-position-right;
-		top: $select-arrow-position-top;
-	}
-}

package/src/shared-components/select/select.html

@@ -1,8 +0,0 @@
-<div class="select-wrapper{{#if this.field.class}} this.field.class{{/if}}">
-	<select class="select" name="{{this.field.name}}" id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}" data-required="nonempty">
-		{{#each this.field.options}}
-			<option value="{{this.value}}">{{this.text}}</option>
-		{{/each}}
-	</select>
-	<span class="select-caret icon icon-caret-down"></span>
-</div>

package/src/shared-components/steps/_steps.scss

@@ -1,414 +0,0 @@
-$step-supertitle-bg-color: $color-blue5 !default;
-$step-supertitle-color: $color-white !default;
-$step-supertitle-font-size: 22px !default;
-$step-supertitle-font-size-mobile: 18px !default;
-$step-supertitle-font-weight: 300 !default;
-$step-supertitle-line-height: 1.36 !default;
-$step-supertitle-padding: 20px !default;
-$step-supertitle-padding-mobile: 15px !default;
-
-$step-supertitle-arrow-animation: AnimateArrowUpDown 10s linear 2s infinite !default;
-$step-supertitle-arrow-background-color: $step-supertitle-bg-color !default;
-$step-supertitle-arrow-color: $step-supertitle-color !default;
-$step-supertitle-arrow-content: '\e900' !default;
-$step-supertitle-arrow-font-size: 22px !default;
-$step-supertitle-arrow-font-family: modicons-basic !default;
-$step-supertitle-arrow-position: absolute !default;
-$step-supertitle-arrow-bottom: -24px !default;
-$step-supertitle-arrow-left: 50% !default;
-$step-supertitle-arrow-transform: translateX(-50%) !default;
-$step-supertitle-arrow-container-height: 75px !default;
-$step-supertitle-arrow-container-width: 140px !default;
-$step-supertitle-arrow-container-position: absolute !default;
-$step-supertitle-arrow-container-bottom: -40px !default;
-$step-supertitle-arrow-container-left: 50% !default;
-$step-supertitle-arrow-container-transform: translateX(-50%) !default;
-$step-supertitle-arrow-container-z-index: -1 !default;
-$step-supertitle-arrow-border-radius: 0 0 $step-supertitle-arrow-container-height $step-supertitle-arrow-container-height !default;
-$step-animated-arrow-title-margin-top: 75px !default;
-
-$step-title-container-bg-color: transparent !default;
-$step-title-container-margin: 0 !default;
-$step-title-container-padding: 0 20px !default;
-$step-title-container-text-align: center !default;
-
-$step-title-color: $color-blue5 !default;
-$step-title-font-size: 22px !default;
-$step-title-font-size-mobile: $step-title-font-size !default;
-$step-title-font-weight: bold !default;
-$step-title-line-height: 1.55 !default;
-$step-title-margin: 0 !default;
-
-$step-subtitle-color: $color-charcoal5 !default;
-$step-subtitle-font-size: 16px !default;
-$step-subtitle-font-size-mobile: $step-subtitle-font-size !default;
-$step-subtitle-font-weight: normal !default;
-$step-subtitle-line-height: $step-title-line-height !default;
-$step-subtitle-margin: 5px 0 25px !default;
-
-$step-subtitle-list-color: $color-white !default;
-$step-subtitle-list-font-size: 14px !default;
-$step-subtitle-list-font-weight: normal !default;
-$step-subtitle-list-icon: '\e920' !default;
-$step-subtitle-list-icon-margin: 0 10px 0 0 !default;
-$step-subtitle-list-line-height: 1.29 !default;
-$step-subtitle-list-margin: 0 !default;
-
-$step-overview-border: 1px solid $color-charcoal1 !default;
-$step-overview-color: $color-charcoal5 !default;
-$step-overview-font-size: 13px !default;
-$step-overview-letter-spacing: .1px !default;
-$step-overview-line-height: 1.38 !default;
-$step-overview-margin: 0 auto 20px !default;
-$step-overview-padding: 8px 0 !default;
-$step-overview-text-align: center !default;
-
-$step-overview-number-background: $step-overview-color !default;
-$step-overview-number-color: $color-white !default;
-$step-overview-number-font-size: 14px !default;
-$step-overview-number-font-weight: 700 !default;
-$step-overview-number-height: 22px !default;
-$step-overview-number-line-height: $step-overview-number-height !default;
-$step-overview-number-margin-right: 5px !default;
-$step-overview-number-width: $step-overview-number-height !default;
-
-$form-group-margin: 0 !default;
-$form-group-label-color: $color-charcoal5 !default;
-$form-group-label-font-size: 17px !default;
-$form-group-label-font-weight: normal !default;
-$form-group-label-margin: 10px 0 15px !default;
-
-$form-group-label-in-input-cursor: text !default;
-$form-group-label-in-input-top-position: 18px !default;
-$form-group-label-in-input-left-position: 17px !default;
-$form-group-label-in-input-z-index: -1 !default;
-
-$label-tool-tip-cursor: help !default;
-$label-tool-tip-bg-color: $color-charcoal5 !default;
-$label-tool-tip-border-radius: 6px !default;
-$label-tool-tip-color: $color-white !default;
-$label-tool-tip-font-size: 14px !default;
-$label-tool-tip-line-height: 1.2 !default;
-$label-tool-tip-margin-left: 15px !default;
-$label-tool-tip-padding: 15px !default;
-$label-tool-tip-width: 280px !default;
-$label-tool-tip-z-index: 10 !default;
-$label-tool-tip-arrow-margin: -5px 0 0 -5px !default;
-$label-tool-tip-arrow-size: 10px !default;
-
-$form-group-error-message-color: $color-red5 !default;
-$form-group-error-message-font-size: 14px !default;
-$form-group-error-message-margin: -10px 0 10px 2px !default;
-
-$form-group-city-state-color: $color-charcoal4 !default;
-$form-group-city-state-font-size: 13px !default;
-$form-group-city-state-font-weight: bold !default;
-$form-group-city-state-margin: -10px 0 0 !default;
-$form-group-city-state-padding: 0 2px 0 0 !default;
-$form-group-city-state-text-align: right !default;
-
-$form-group-note-color: #8a8a8a !default;
-$form-group-note-font-size: 11px !default;
-$form-group-note-font-style: italic !default;
-$form-group-note-margin: -7px 0 0 !default;
-
-@keyframes AnimateArrowUpDown {
-	0%,
-	20%,
-	40% {
-		bottom: -26%;
-		opacity: 1;
-	}
-
-	10%,
-	30%,
-	50% {
-		bottom: -10%;
-		opacity: 0;
-	}
-
-	60% {
-		bottom: -26%;
-		opacity: 1;
-	}
-}
-
-.step {
-	flex: 0 0 100%;
-
-	&__supertitle {
-		background-color: $step-supertitle-bg-color;
-		color: $step-supertitle-color;
-		font-size: $step-supertitle-font-size-mobile;
-		font-weight: $step-supertitle-font-weight;
-		line-height: $step-supertitle-line-height;
-		padding: $step-supertitle-padding-mobile;
-	}
-
-	&__title-container {
-		background-color: $step-title-container-bg-color;
-		margin: $step-title-container-margin;
-		padding: $step-title-container-padding;
-		text-align: $step-title-container-text-align;
-	}
-
-	&__title {
-		color: $step-title-color;
-		font-size: $step-title-font-size-mobile;
-		font-weight: $step-title-font-weight;
-		line-height: $step-title-line-height;
-		margin: $step-title-margin;
-	}
-
-	&__subtitle {
-		color: $step-subtitle-color;
-		font-size: $step-subtitle-font-size-mobile;
-		font-weight: $step-subtitle-font-weight;
-		line-height: $step-subtitle-line-height;
-		margin: $step-subtitle-margin;
-	}
-
-	&__subtitle-list {
-		list-style: none;
-		margin: $step-subtitle-list-margin;
-		padding-left: 0;
-
-		li {
-			color: $step-subtitle-list-color;
-			font-size: $step-subtitle-list-font-size;
-			font-weight: $step-subtitle-list-font-weight;
-			line-height: $step-subtitle-list-line-height;
-
-			&:before {
-				content: $step-subtitle-list-icon;
-				display: inline-block;
-				font-family: modicons-fill;
-				font-style: normal;
-				font-variant: normal;
-				font-weight: 400;
-				line-height: 1;
-				margin: $step-subtitle-list-icon-margin;
-				text-transform: none;
-			}
-		}
-	}
-
-	&__overview {
-		border-bottom: $step-overview-border;
-		border-top: $step-overview-border;
-		color: $step-overview-color;
-		font-size: $step-overview-font-size;
-		letter-spacing: $step-overview-letter-spacing;
-		line-height: $step-overview-line-height;
-		margin: $step-overview-margin;
-		padding: $step-overview-padding;
-		text-align: $step-overview-text-align;
-
-		span {
-			padding: 0;
-		}
-	}
-
-	&__overview-number {
-		background: $step-overview-number-background;
-		border-radius: 100%;
-		color: $step-overview-number-color;
-		display: inline-block;
-		font-size: $step-overview-number-font-size;
-		font-weight: $step-overview-number-font-weight;
-		height: $step-overview-number-height;
-		line-height: $step-overview-number-line-height;
-		margin-right: $step-overview-number-margin-right;
-		text-align: center;
-		width: $step-overview-number-width;
-	}
-}
-
-.form-group {
-	margin: $form-group-margin;
-
-	&__label {
-		color: $form-group-label-color;
-		font-size: $form-group-label-font-size;
-		font-weight: $form-group-label-font-weight;
-		margin: $form-group-label-margin;
-	}
-
-	&__label-input {
-		color: $form-group-label-color;
-		cursor: $form-group-label-in-input-cursor;
-		font-size: $form-group-label-font-size;
-		font-weight: $form-group-label-font-weight;
-		left: $form-group-label-in-input-left-position;
-		position: absolute;
-		top: $form-group-label-in-input-top-position;
-		transition: color 200ms ease, font-size 200ms ease;
-		user-select: none;
-		z-index: $form-group-label-in-input-z-index;
-	}
-
-	&__error-message {
-		color: $form-group-error-message-color;
-		font-size: $form-group-error-message-font-size;
-		display: none;
-		margin: $form-group-error-message-margin;
-	}
-
-	&__city-state {
-		color: $form-group-city-state-color;
-		font-size: $form-group-city-state-font-size;
-		font-weight: $form-group-city-state-font-weight;
-		margin: $form-group-city-state-margin;
-		padding: $form-group-city-state-padding;
-		text-align: $form-group-city-state-text-align;
-	}
-
-	&__note {
-		color: $form-group-note-color;
-		display: inline-block;
-		font-size: $form-group-note-font-size;
-		font-style: $form-group-note-font-style;
-		margin: $form-group-note-margin;
-	}
-
-	&__label-tooltip {
-		cursor: $label-tool-tip-cursor;
-		position: relative;
-
-		&-text {
-			background: $label-tool-tip-bg-color;
-			border-radius: $label-tool-tip-border-radius;
-			color: $label-tool-tip-color;
-			display: none;
-			font-size: $label-tool-tip-font-size;
-			left: 100%;
-			line-height: $label-tool-tip-line-height;
-			margin-left: $label-tool-tip-margin-left;
-			padding: $label-tool-tip-padding;
-			position: absolute;
-			text-align: center;
-			top: 50%;
-			transform: translateY(-50%);
-			width: $label-tool-tip-width;
-			z-index: $label-tool-tip-z-index;
-
-			&::before {
-				background: $label-tool-tip-bg-color;
-				content: '';
-				display: block;
-				height: $label-tool-tip-arrow-size;
-				left: 0;
-				margin: $label-tool-tip-arrow-margin;
-				position: absolute;
-				top: 50%;
-				transform: rotate(-45deg);
-				width: $label-tool-tip-arrow-size;
-			}
-		}
-
-		&:hover {
-			.form-group__label-tooltip-text {
-				display: block;
-			}
-		}
-	}
-}
-
-.has-error {
-	.form-group__error-message {
-		display: block;
-	}
-
-	.form-group__label-input {
-		color: $form-group-error-message-color;
-	}
-
-	&:focus-within {
-		.form-group__label-input {
-			color: $form-group-error-message-color;
-		}
-	}
-}
-
-.swiper--dynamic-step-height {
-	.step {
-		.step-inner {
-			max-height: 0;
-			opacity: 0;
-			transition: opacity 250ms 250ms ease-in;
-		}
-
-		&--active .step-inner {
-			max-height: 999px;
-			opacity: 1;
-		}
-	}
-}
-
-.disableAutofill {
-	.step-inner {
-		visibility: hidden;
-	}
-
-	.step--active {
-		.step-inner {
-			visibility: visible;
-		}
-	}
-}
-
-@include breakpoint-sm {
-	.step {
-		&__supertitle {
-			font-size: $step-supertitle-font-size;
-			padding: $step-supertitle-padding;
-		}
-
-		&__title {
-			font-size: $step-title-font-size;
-		}
-
-		&__subtitle {
-			font-size: $step-subtitle-font-size;
-		}
-	}
-}
-
-@include breakpoint-lg {
-	.step {
-		&__supertitle {
-			&--show-animated-arrow {
-				position: relative;
-
-				&:before {
-					animation: $step-supertitle-arrow-animation;
-					bottom: $step-supertitle-arrow-bottom;
-					color: $step-supertitle-arrow-color;
-					content: $step-supertitle-arrow-content;
-					font-size: $step-supertitle-arrow-font-size;
-					font-family: $step-supertitle-arrow-font-family;
-					left: $step-supertitle-arrow-left;
-					position: $step-supertitle-arrow-position;
-					transform: $step-supertitle-arrow-transform;
-				}
-
-				&:after {
-					background-color: $step-supertitle-arrow-background-color;
-					border-radius: $step-supertitle-arrow-border-radius;
-					bottom: $step-supertitle-arrow-container-bottom;
-					content: '';
-					height: $step-supertitle-arrow-container-height;
-					left: $step-supertitle-arrow-container-left;
-					position: $step-supertitle-arrow-container-position;
-					transform: $step-supertitle-arrow-container-transform;
-					width: $step-supertitle-arrow-container-width;
-					z-index: $step-supertitle-arrow-container-z-index;
-				}
-
-				+ .step__title {
-					margin-top: $step-animated-arrow-title-margin-top;
-				}
-			}
-		}
-	}
-}

package/src/shared-components/steps/defaultFormFieldConfig.json

@@ -1,64 +0,0 @@
-{
-  "zip": {
-    "fieldType": "input",
-    "type": "tel",
-    "placeholder": "Enter Zip Code",
-    "required": "zip",
-    "maxLength": "5",
-    "errorMessage": "Please enter a valid zip code."
-  },
-  "firstName": {
-    "fieldType": "input",
-    "name": "firstName",
-    "min": "2",
-    "maxLength": "30",
-    "type": "text",
-    "placeholder": "First Name",
-    "required": "name",
-    "errorMessage": "Please enter a valid first name."
-  },
-  "lastName": {
-    "fieldType": "input",
-    "name": "lastName",
-    "min": "2",
-    "maxLength": "30",
-    "type": "text",
-    "placeholder": "Last Name",
-    "required": "name",
-    "errorMessage": "Please enter a valid last name."
-  },
-  "zip1": {
-    "fieldType": "input",
-    "name": "zip1",
-    "type": "tel",
-    "placeholder": "Enter Zip Code",
-    "required": "zip",
-    "maxLength": "5",
-    "errorMessage": "Please enter a valid zip code."
-  },
-  "homePhone": {
-    "fieldType": "input",
-    "name": "homePhone",
-    "type": "tel",
-    "placeholder": "Phone Number",
-    "required": "phone",
-    "maxLength": "14",
-    "errorMessage": "Please enter a valid phone number."
-  },
-  "email": {
-    "fieldType": "input",
-    "name": "email",
-    "type": "email",
-    "placeholder": "Email",
-    "required": "email",
-    "errorMessage": "Please enter a valid email address."
-  },
-  "address": {
-    "fieldType": "input",
-    "name": "address",
-    "type": "text",
-    "placeholder": "123 Your St.",
-    "required": "address",
-    "errorMessage": "Please enter a valid address."
-  }
-}

package/src/shared-components/steps/step-fields.html

@@ -1,36 +0,0 @@
-{{#xif "this.stepFields.fieldType === 'radio'"}}
-	{{ fileInclude 'src/shared-components/radio-button/radio-button.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-
-{{#xif "this.stepFields.fieldType === 'input'"}}
-	{{ fileInclude 'src/shared-components/input/input.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'textarea'"}}
-	{{#if this.stepFields.labelInInput}}<div class="form-input-group form-input-group--includes-label">{{/if}}
-	{{ fileInclude 'src/shared-components/textarea/textarea.html'
-		field = this.stepFields
-	}}
-	{{#if this.stepFields.labelInInput}}<label class="form-group__label-input">{{{this.stepFields.labelInInput}}}</label></div>{{/if}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'select'"}}
-	{{ fileInclude 'src/shared-components/select/select.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'checkbox'"}}
-	{{ fileInclude 'src/shared-components/checkbox/checkbox.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'zip-control'"}}
-	{{ fileInclude 'src/shared-components/zip-control/zip-control.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType == 'utility-providers'"}}
-	<div class="utility-provider-wrapper"></div>
-{{/xif}}