mod-build 4.0.49 → 4.0.50-beta.2

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

@@ -1,136 +0,0 @@
-{{#each this.items}}
-<li id="{{#if this.priority}}step{{inc this.priority}}{{else}}step{{inc @index}}{{/if}}" class="swiper-slide swiper-no-swiping step {{#if this.stepClassName}}{{this.stepClassName}}{{/if}} {{#if @first}}step--active swiper-slide-active{{/if}}{{#if this.trade }} {{this.trade}}{{/if}}{{#if ../this.textAlignment}} text-aligned-{{{../this.textAlignment}}}{{/if}}" data-bind="step" {{#if @first}}data-slide="active"{{/if}} {{#if this.stepName}} data-step-name="{{this.stepName}}"{{/if}}{{#if this.trade }} data-trade="{{this.trade}}"{{/if}}>
-	<div class="step-inner{{#if this.stepInnerClass}} {{this.stepInnerClass}}{{/if}}">
-		{{#if this.customStepTopTemplate}}
-			{{ fileInclude this.customStepTopTemplate
-				stepTopOpt = this
-			}}
-		{{/if}}
-
-		{{#if this.stepHeader}}
-		<div class="step__title-container{{#if this.stepHeader.classModifierFlag}} step__title-container{{this.stepHeader.classModifierFlag}}{{/if}}">
-			{{#if this.stepHeader.supertitle}}
-				<div class="step__supertitle{{#if this.stepHeader.showAnimatedArrow}} step__supertitle--show-animated-arrow{{/if}}" {{{this.stepHeader.supertitleAttributes}}} data-theme-template="formtitle">
-					{{#if this.stepHeader.mobileSupertitle}}
-						<span class="hidden-xs">{{{this.stepHeader.supertitle}}}</span>
-						<span class="visible-xs">{{{this.stepHeader.mobileSupertitle}}}</span>
-					{{else}}
-						{{{this.stepHeader.supertitle}}}
-					{{/if}}
-				</div>
-				{{#xif "'../this.callTracking' && '../this.callTracking.stepHeader'"}}
-					{{fileInclude 'src/shared-components/call-tracking/call-tracking.html'
-						isStepHeader=true
-					}}
-				{{/xif}}
-			{{/if}}
-			{{#if this.stepHeader.title}}
-				<div class="step__title">
-					{{#if this.stepHeader.mobileTitle}}
-						<span class="hidden-xs">{{{this.stepHeader.title}}}</span>
-						<span class="visible-xs">{{{this.stepHeader.mobileTitle}}}</span>
-					{{else}}
-						{{{this.stepHeader.title}}}
-					{{/if}}
-				</div>
-			{{/if}}
-
-			{{#if this.stepHeader.subtitle}}
-				<div class="step__subtitle">
-					{{#if this.stepHeader.subtitle.text}}{{{this.stepHeader.subtitle.text}}}{{/if}}
-					{{#if this.stepHeader.subtitle.list}}
-						<ul class="step__subtitle-list">
-							{{#each this.stepHeader.subtitle.list}}
-								<li>
-									<span>{{{this}}}</span>
-								</li>
-							{{/each}}
-						</ul>
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#if this.stepHeader.overview}}
-				{{#unless this.moveOverviewUnderHeader}}
-					<div class="step__overview row">
-					{{#each this.stepHeader.overview}}
-						<span class="{{#unless this.class}}col-xs-4{{/unless}}">
-							<span class="step__overview-number">{{this.number}}</span> {{{this.text}}}
-						</span>
-					{{/each}}
-					</div>
-				{{/unless}}
-			{{/if}}
-		</div>
-		{{/if}}
-
-		{{#if this.moveOverviewUnderHeader}}
-			{{#if this.stepHeader.overview}}
-				<div class="step__overview row">
-				{{#each this.stepHeader.overview}}
-					<span class="{{#unless this.class}}col-xs-4{{/unless}}">
-						<span class="step__overview-number">{{this.number}}</span> {{{this.text}}}
-					</span>
-				{{/each}}
-				</div>
-			{{/if}}
-		{{/if}}
-
-		<div class="step__fields{{#if this.fieldsWrapperClass}} {{this.fieldsWrapperClass}}{{/if}}">
-		{{#each this.fields}}
-			<div class="form-group{{#if this.wrapper.class}} {{this.wrapper.class}}{{/if}}{{#unless this.skipErrorClass}} parent-error{{/unless}}" {{#if this.wrapper.id}}id="{{this.wrapper.id}}"{{/if}} {{#if this.wrapper.style}}style="{{this.wrapper.style}}"{{/if}}>
-				{{#if this.label}}
-					<label class="form-group__label">
-						{{{this.label}}}
-						{{#if this.labelToolTip}}
-							<span class="form-group__label-tooltip" data-bind="tooltip-icon">
-								<i class="{{#if this.labelToolTipIcon}}{{this.labelToolTipIcon}}{{else}}icon-stroke-warning{{/if}}" {{#if this.labelTooltipName}}data-tooltip-name="{{this.labelTooltipName}}"{{/if}}></i>
-								<span class="form-group__label-tooltip-text">
-									{{{this.labelToolTip}}}
-								</span>
-							</span>
-						{{/if}}
-						{{#if this.labelNote}}<span class="form-group__note">{{{this.labelNote}}}</span>{{/if}}
-					</label>
-				{{/if}}
-
-				{{ fileInclude 'src/shared-components/steps/step-fields.html'
-					stepFields = this
-				}}
-
-				{{#if this.errorMessage}}<div class="form-group__error-message">{{{this.errorMessage}}}</div>{{/if}}
-				{{#if this.showCityState}}<div class="form-group__city-state">City, State</div>{{/if}}
-				{{#if this.note}}<span class="form-group__note">{{{this.note}}}</span>{{/if}}
-			</div>
-		{{/each}}
-		</div>
-
-		{{#if this.extraQuestionBlock}}
-		<div {{#if this.extraQuestionBlock.id}}id="{{this.extraQuestionBlock.id}}"{{/if}} class="step__extra{{#if this.extraQuestionBlock.class}} {{this.extraQuestionBlock.class}}{{/if}}">
-			{{#if this.extraQuestionBlock.title}}
-				<div class="step__title">
-					{{{this.extraQuestionBlock.title}}}
-				</div>
-			{{/if}}
-			{{#if this.extraQuestionBlock.subtitle}}
-				<div class="step__subtitle">
-					{{#if this.extraQuestionBlock.subtitle.text}}
-						{{{this.extraQuestionBlock.subtitle.text}}}
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#each this.extraQuestionBlock.fields}}
-				{{ fileInclude 'src/shared-components/steps/step-fields.html'
-					stepFields = this
-				}}
-			{{/each}}
-		</div>
-		{{/if}}
-
-		{{#if this.customStepBottomTemplate}}
-			{{ fileInclude this.customStepBottomTemplate
-				stepBottomOpt = this
-			}}
-		{{/if}}
-	</div>
-</li>
-{{/each}}

package/src/shared-components/textarea/_textarea.scss

@@ -1,96 +0,0 @@
-$form-textarea-bg-color: $color-white !default;
-$form-textarea-border: 1px solid $color-charcoal1 !default;
-$form-textarea-border-radius: 4px !default;
-$form-textarea-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
-$form-textarea-color: $color-charcoal5 !default;
-$form-textarea-font-size: 16px !default;
-$form-textarea-font-weight: 400 !default;
-$form-textarea-height: 120px !default;
-$form-textarea-line-height: 1.1875 !default;
-$form-textarea-margin: 0 0 15px !default;
-$form-textarea-padding: 15px !default;
-$form-textarea-placeholder-color: $color-charcoal2 !default;
-$form-textarea-placeholder-color-desktop: $form-textarea-placeholder-color !default;
-$form-textarea-resize: none !default;
-$form-textarea-transition-time: .15s !default;
-$form-textarea-zip-width: 200px !default;
-
-$form-textarea-focus-bg-color: $form-textarea-bg-color !default;
-$form-textarea-focus-border: 1px solid $color-charcoal2 !default;
-
-$form-textarea-error-color: $color-red5 !default;
-$form-textarea-error-border: 1px solid $form-textarea-error-color !default;
-$form-textarea-error-box-shadow: inset 0 1px 1px rgba($color-black, .08) !default;
-$form-textarea-error-focus-border-color: #E34B2B !default;
-$form-textarea-error-focus-box-shadow: inset 0 1px 1px rgba($color-black, .08), 0 0 6px #F5BEB2 !default;
-$form-textarea-icon-error-bg-color: $color-red2 !default;
-$form-textarea-icon-error-color: $color-red5 !default;
-$form-textarea-group-error-border-width: 0 !default;
-$form-textarea-group-input-error-border: $form-textarea-error-border !default;
-
-.form-textarea {
-	background-color: $form-textarea-bg-color;
-	border: $form-textarea-border;
-	border-radius: $form-textarea-border-radius;
-	box-shadow: $form-textarea-box-shadow;
-	color: $form-textarea-color;
-	font-size: $form-textarea-font-size;
-	font-weight: $form-textarea-font-weight;
-	height: $form-textarea-height;
-	line-height: $form-textarea-line-height;
-	margin: $form-textarea-margin;
-	padding: $form-textarea-padding;
-	position: relative;
-	resize: $form-textarea-resize;
-	transition: background-color $form-textarea-transition-time ease-in-out, border-color $form-textarea-transition-time ease-in-out, box-shadow $form-textarea-transition-time ease-in-out;
-	width: 100%;
-
-	&::-webkit-input-placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&::-ms-input-placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&::placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&:focus {
-		background-color: $form-textarea-focus-bg-color;
-		border: $form-textarea-focus-border;
-		box-shadow: none;
-	}
-
-	&.zip {
-		width: $form-textarea-zip-width;
-	}
-}
-
-.has-error .form-textarea {
-	border: $form-textarea-error-border;
-	box-shadow: $form-textarea-error-box-shadow;
-	color: $form-textarea-error-color;
-
-	&:focus {
-		border-color: $form-textarea-error-focus-border-color;
-		box-shadow: $form-textarea-error-focus-box-shadow;
-	}
-}
-
-@include breakpoint-sm {
-	.form-textarea {
-		&::-webkit-input-placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-
-		&::-ms-input-placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-
-		&::placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-	}
-}

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

@@ -1,13 +0,0 @@
-<textarea
-	id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}"
-	class="form-textarea {{this.field.class}}"
-	name="{{this.field.name}}"
-	{{#if this.field.placeholder}}placeholder="{{this.field.placeholder}}"{{/if}}
-	{{#if this.field.maxLength}}maxlength="{{this.field.maxLength}}"{{/if}}
-	{{#if this.field.required}}data-required="{{this.field.required}}"{{/if}}
-	{{#if this.field.value}}value="{{this.field.value}}"{{/if}}
-	{{#if this.field.min}}data-{{this.field.required}}-min="{{this.field.min}}"{{/if}}
-	{{#if this.field.saveField}}data-save{{/if}}
-	{{#if this.field.readonly}}readonly{{/if}}
-	{{#if this.field.extraAttributes}}{{#each this.field.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}
-></textarea>

package/src/shared-components/theme-toggle/_theme-toggle.scss

@@ -1,68 +0,0 @@
-.toggle-wrapper {
-	align-items: center;
-	color: $color-charcoal1;
-	display: flex;
-	font-size: 12px;
-	font-weight: bold;
-	float: right;
-	justify-content: space-evenly;
-	max-width: 160px;
-	text-transform: uppercase;
-	width: 100%;
-
-
-	input[type="checkbox"] {
-		&.theme-toggle {
-			opacity: 0;
-			position: absolute;
-
-			& + label {
-				background-color: $color-charcoal1;
-				border: 1px solid $color-white;
-				border-radius: 100px;
-				cursor: pointer;
-				display: inline-block;
-				height: 26px;
-				position: relative;
-				transition: all .4s ease;
-				user-select: none;
-				width: 56px;
-
-				&::before {
-					content: "";
-					border-radius: 30px;
-					display: block;
-					height: 100%;
-					left: 0;
-					position: absolute;
-					top: 0;
-					transition: .2s cubic-bezier(.24, 0, .5, 1);
-					width: 100%;
-				}
-
-				&::after {
-					background: $color-orange5;
-					border-radius: 100px;
-					content: "";
-					display: block;
-					left: 3px;
-					height: 18px;
-					position: absolute;
-					top: 3px;
-					transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-					width: 18px;
-				}
-			}
-
-			&:checked {
-				& + label::before {
-					background-color: $color-charcoal7;
-				}
-				& + label::after {
-					background: $color-blue5;
-					left: 33px
-				}
-			}
-		}
-	}
-}

package/src/shared-components/theme-toggle/theme-toggle.html

@@ -1,34 +0,0 @@
-<div class="toggle-wrapper hidden-xs hidden-sm hidden-md">
-  <span>Light</span>
-  <input type="checkbox" id="theme-toggle" name="theme-toggle" class="theme-toggle" />
-  <label for="theme-toggle"></label>
-  <span>Dark</span>
-</div>
-<script>
-  (function () {
-    const themeToggle = document.getElementById('theme-toggle');
-    const body = document.body;
-    if (themeToggle) {
-      const toggleDarkClass = function (event) {
-        event ? body.classList.add('dark') : body.classList.remove('dark');
-      };
-
-      themeToggle.addEventListener('click', function(){
-        toggleDarkClass(this.checked)
-      });
-
-      if ('matchMedia' in window) {
-        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        const isDarkColorScheme = colorScheme.matches;
-
-        toggleDarkClass(isDarkColorScheme)
-        themeToggle.checked = isDarkColorScheme
-
-        colorScheme.addEventListener('change',function(e){
-          toggleDarkClass(e.matches)
-          themeToggle.checked = e.matches
-        })
-      }
-    }
-  })();
-</script>

package/src/shared-components/tile/_tile.scss

@@ -1,117 +0,0 @@
-$tile-height: 100% !default;
-$tile-width: 100% !default;
-$tile-display: inline-flex !default;
-$tile-flex-direction: column !default;
-$tile-justify-content: center !default;
-
-$tile-border-transition: border-color .15s ease-in-out !default;
-
-$tile-bg-background-position: center 1px !default;
-$tile-bg-border-radius: 5px !default;
-$tile-bg-box-shadow: 0 3px 4px 0 rgba(#000, .2) !default;
-$tile-bg-border-color: transparent !default;
-$tile-bg-border-width: 3px !default;
-$tile-bg-border-border-radius: 8px !default;
-$tile-bg-hover-border-color: $color-blue5 !default;
-$tile-bg-font-size: 18px !default;
-$tile-bg-font-weight: 700 !default;
-$tile-bg-text-color: #FFF !default;
-$tile-bg-text-transform: uppercase !default;
-
-$tile-icon-border-color: $color-charcoal1 !default;
-$tile-icon-hover-border-color: $color-charcoal2 !default;
-$tile-icon-border-radius: 4px !default;
-$tile-icon-border-width: 1px !default;
-$tile-icon-box-shadow: 0 2px 4px 0 rgba(#000, .1) !default;
-$tile-icon-font-size: 12px !default;
-$tile-icon-font-weight: 700 !default;
-$tile-icon-text-color: $color-charcoal4 !default;
-$tile-icon-img-width: 100% !default;
-$tile-icon-img-height: 90px !default;
-
-.tile {
-	display: $tile-display;
-	flex-direction: $tile-flex-direction;
-	height: $tile-height;
-	justify-content: $tile-justify-content;
-	width: $tile-width;
-
-	&--background-image {
-		.tile__background-image {
-			background-position: $tile-bg-background-position;
-			background-size: cover;
-			border-radius: $tile-bg-border-radius;
-			box-shadow: $tile-bg-box-shadow;
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-
-			&::before {
-				border: $tile-bg-border-width solid $tile-bg-border-color;
-				border-radius: $tile-bg-border-border-radius;
-				content: '';
-				height: calc(100% + 10px);
-				left: -5px;
-				position: absolute;
-				top: -5px;
-				transition: $tile-border-transition;
-				width: calc(100% + 10px);
-				z-index: -1;
-			}
-		}
-
-		.tile__text {
-			color: $tile-bg-text-color;
-			font-size: $tile-bg-font-size;
-			font-weight: $tile-bg-font-weight;
-			position: relative;
-			text-transform: $tile-bg-text-transform;
-			z-index: 2;
-		}
-
-		&:hover {
-			.tile__background-image {
-				&::before {
-					border-color: $tile-bg-hover-border-color;
-				}
-			}
-		}
-	}
-
-	&--icon {
-		.tile__icon {
-			height: $tile-icon-img-height;
-			width: $tile-icon-img-width;
-		}
-
-		.tile__text {
-			color: $tile-icon-text-color;
-			display: inline-block;
-			font-size: $tile-icon-font-size;
-			font-weight: $tile-icon-font-weight;
-
-			&::before {
-				border: $tile-icon-border-width solid $tile-icon-border-color;
-				border-radius: $tile-icon-border-radius;
-				box-shadow: $tile-icon-box-shadow;
-				content: '';
-				display: block;
-				height: 100%;
-				left: 0;
-				position: absolute;
-				top: 0;
-				transition: $tile-border-transition;
-				width: 100%;
-			}
-		}
-		&:hover {
-			.tile__text {
-				&::before {
-					border-color: $tile-icon-hover-border-color;
-				}
-			}
-		}
-	}
-}

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

@@ -1,27 +0,0 @@
-<div class="tile {{#if this.field.backgroundImageUrl}}tile--background-image{{/if}}{{#xif "this.field.svgSpriteIconUrl || this.field.imageIconUrl || this.field.localSVGPath || this.field.localSvgSpriteIconUrl || this.field.localImageIconUrl"}}tile--icon{{/xif}}">
-	{{#if this.field.backgroundImageUrl}}
-		<div class="tile__background-image {{#if this.field.backgroundImageClass}}{{this.field.backgroundImageClass}}{{/if}}" {{#xif "this.field.backgroundImageUrl != 'none'"}}style="background-image: url('https://{{x 'process.env.NODE_ENV'}}{{this.field.backgroundImageUrl}}')"{{/xif}}></div>
-	{{/if}}
-	{{#if this.field.imageIconUrl}}
-		<img class="tile__icon" src="https://{{x 'process.env.NODE_ENV'}}{{this.field.imageIconUrl}}" alt="{{this.field.text}}">
-	{{/if}}
-	{{#if this.field.localImageIconUrl}}
-		<img class="tile__icon" src="{{this.field.localImageIconUrl}}" alt="{{this.field.text}}">
-	{{/if}}
-	{{#if this.field.svgSpriteIconUrl}}
-		<svg class="tile__icon" role="img">
-			<use href="{{#xif 'isLocal === "true"'}}/temp/assets{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{/xif}}{{this.field.svgSpriteIconUrl}}"></use>
-		</svg>
-	{{/if}}
-	{{#if this.field.localSvgSpriteIconUrl}}
-		<svg class="tile__icon" role="img">
-			<use href="{{this.field.localSvgSpriteIconUrl}}"></use>
-		</svg>
-	{{/if}}
-	{{#if this.field.localSVGPath}}
-		<div class="tile__icon">
-			{{ fileInclude this.field.localSVGPath }}
-		</div>
-	{{/if}}
-	<span class="tile__text">{{{this.field.text}}}</span>
-</div>

package/src/shared-components/value-props/_value-props.scss

@@ -1,99 +0,0 @@
-$value-props-display-mobile: none !default;
-$value-props-display: block !default;
-$value-props-backdrop-filter: blur(4px) !default;
-$value-props-background-color: rgba($color-blue5,.85) !default;
-$value-props-color: $color-white !default;
-$value-props-margin: 0 0 0 25% !default;
-$value-props-margin-mobile: 0 !default;
-$value-props-max-width: 100% !default;
-$value-props-padding: 30px 0 !default;
-$value-props-padding-mobile: $value-props-padding !default;
-
-$value-props-wrapper-display: flex !default;
-$value-props-wrapper-flex-direction: row !default;
-$value-props-wrapper-justify-content: space-evenly !default;
-
-$value-props-icon-height: 40px !default;
-$value-props-icon-width: $value-props-icon-height !default;
-$value-props-icon-height-mobile: $value-props-icon-height !default;
-$value-props-icon-width-mobile: $value-props-icon-width !default;
-
-$value-props-item-border-left: 0 !default;
-$value-props-item-flex: 0 0 25% !default;
-$value-props-item-padding: 0 15px !default;
-$value-props-item-text-align: center !default;
-
-$value-props-description-font-size: 16px !default;
-$value-props-description-font-size-tablet: $value-props-description-font-size !default;
-$value-props-description-font-size-mobile: $value-props-description-font-size !default;
-$value-props-description-font-weight: normal !default;
-$value-props-description-line-height: 1.2 !default;
-$value-props-description-line-height-mobile: $value-props-description-line-height !default;
-$value-props-description-margin: 10px auto 0 !default;
-$value-props-description-width: 80% !default;
-
-.value-props {
-	backdrop-filter: $value-props-backdrop-filter;
-	background: $value-props-background-color;
-	color: $value-props-color;
-	display: $value-props-display-mobile;
-	margin: $value-props-margin-mobile;
-	max-width: $value-props-max-width;
-	padding: $value-props-padding-mobile;
-
-	&__wrapper {
-		display: $value-props-wrapper-display;
-		flex-direction: $value-props-wrapper-flex-direction;
-		justify-content: $value-props-wrapper-justify-content;
-	}
-
-	&__item {
-		flex: $value-props-item-flex;
-		padding: $value-props-item-padding;
-		text-align: $value-props-item-text-align;
-
-		~ .value-props__item {
-			border-left: $value-props-item-border-left;
-		}
-	}
-
-	&__icon {
-		height: $value-props-icon-height-mobile;
-		width: $value-props-icon-width-mobile;
-	}
-
-	&__description {
-		font-size: $value-props-description-font-size-mobile;
-		font-weight: $value-props-description-font-weight;
-		line-height: $value-props-description-line-height-mobile;
-		margin: $value-props-description-margin;
-		width: $value-props-description-width;
-	}
-}
-
-@include breakpoint-sm {
-	.value-props {
-		display: $value-props-display;
-		padding: $value-props-padding;
-
-		&__icon {
-			height: $value-props-icon-height;
-			width: $value-props-icon-width;
-		}
-
-		&__description {
-			font-size: $value-props-description-font-size-tablet;
-			line-height: $value-props-description-line-height;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.value-props {
-		margin: $value-props-margin;
-		
-		&__description {
-			font-size: $value-props-description-font-size;
-		}
-	}
-}

package/src/shared-components/value-props/value-props.html

@@ -1,17 +0,0 @@
-<div class="value-props{{#if this.props.class}} {{this.props.class}}{{/if}}">
-	<ul class="value-props__wrapper">
-		{{#each this.props.items}}
-		<li class="value-props__item">
-			{{#if this.icon}}
-			<svg class="value-props__icon" role="img">
-				<use href="{{this.icon}}"></use>
-			</svg>
-			{{/if}}
-			{{#if this.imageIcon}}
-				<img class="value-props__icon" src="{{this.imageIcon}}">
-			{{/if}}
-			{{#if this.description}}<p class="value-props__description" data-theme-template="vp">{{{this.description}}}</p>{{/if}}
-		</li>
-		{{/each}}
-	</ul>
-</div>

package/src/shared-components/zip-control/_zip-control.scss

@@ -1,42 +0,0 @@
-$zip-control-color: $color-blue5 !default;
-$zip-control-hover-color: $zip-control-color !default;
-$zip-control-font-size: 12px !default;
-$zip-control-font-weight: 700 !default;
-$zip-control-line-height: 1.25 !default;
-$zip-control-margin: 0 !default;
-$zip-control-text-align: right !default;
-
-$zip-control-edit-color: $zip-control-color !default;
-$zip-control-edit-hover-color: $zip-control-edit-color !default;
-$zip-control-edit-margin-left: 0 !default;
-$zip-control-edit-text-decoration: none !default;
-
-.zip-control {
-	font-size: $zip-control-font-size;
-	font-weight: $zip-control-font-weight;
-	line-height: $zip-control-line-height;
-	margin: $zip-control-margin;
-	text-align: $zip-control-text-align;
-
-	&__location,
-	&__zipcode {
-		color: $zip-control-color;
-	}
-
-	&__location {
-		&:hover {
-			color: $zip-control-hover-color;
-		}
-	}
-
-	&__edit,
-	&__icon {
-		color: $zip-control-edit-color;
-		margin-left: $zip-control-edit-margin-left;
-		text-decoration: $zip-control-edit-text-decoration;
-
-		&:hover {
-			color: $zip-control-edit-hover-color;
-		}
-	}
-}

package/src/shared-components/zip-control/zip-control.html

@@ -1,21 +0,0 @@
-{{#if this.field.notEditableOnMobile}}
-<div class="zip-control visible-xs" id="zip-control">
-	<span class="zip-control__location user-location">City, State</span>
-	{{#if this.field.includeInitialZipCode}}
-	<span class="zip-control__zipcode user-zipcode"></span>
-	{{/if}}
-</div>
-{{/if}}
-<div class="zip-control{{#if this.field.notEditableOnMobile}} hidden-xs{{/if}}" id="zip-control">
-	<a class="zip-control__button" id="zip-control__button" role="button">
-		<span class="zip-control__location user-location">City, State</span>
-		{{#if this.field.includeInitialZipCode}}
-			<span class="zip-control__zipcode user-zipcode"></span>
-		{{/if}}
-		{{#if this.field.editText}}
-			<span class="zip-control__edit">{{this.field.editText}}</span>
-		{{else}}
-			<i class="zip-control__icon icon-fill-edit"></i>
-		{{/if}}
-	</a>
-</div>