mod-build 4.0.21 → 4.0.22-beta.1

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

@@ -0,0 +1,131 @@
+{{#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}}" 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>
+			{{/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

@@ -0,0 +1,96 @@
+$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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,68 @@
+.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

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,117 @@
+$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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,98 @@
+$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 !default;
+$value-props-margin-mobile: $value-props-margin !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;
+		margin: $value-props-margin;
+		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 {
+		&__description {
+			font-size: $value-props-description-font-size;
+		}
+	}
+}

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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,42 @@
+$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

@@ -0,0 +1,21 @@
+{{#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>