mod-build 4.0.6 → 4.0.7

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

@@ -0,0 +1,640 @@
+$step-header-align-items: center !default;
+$step-header-background-color: $color-charcoal6 !default;
+$step-header-border-radius: 0 !default;
+$step-header-display: block !default;
+$step-header-display-desktop: flex !default;
+$step-header-flex-direction: column !default;
+$step-header-justify-content: center !default;
+$step-header-min-height-desktop: 90px !default;
+$step-header-padding: 15px !default;
+$step-header-padding-desktop: $step-header-padding !default;
+$step-header-position: relative !default;
+$step-header-text-align: center !default;
+
+$step-header-title-color: $color-white !default;
+$step-header-title-font-family: inherit !default;
+$step-header-title-font-size: 1.25rem !default;
+$step-header-title-font-size-desktop: 1.5rem !default;
+$step-header-title-font-weight: 400 !default;
+$step-header-title-line-height: 1.25 !default;
+
+$step-header-subtitle-color: $color-white !default;
+$step-header-subtitle-font-size: .875rem !default;
+$step-header-subtitle-font-size-desktop: 1rem !default;
+$step-header-subtitle-font-weight: 700 !default;
+$step-header-subtitle-line-height: 1.35 !default;
+$step-header-subtitle-margin: 10px 0 0 !default;
+
+$step-header-subtitle-list-color: $color-white !default;
+$step-header-subtitle-list-font-size: .875rem !default;
+$step-header-subtitle-list-font-weight: 400 !default;
+$step-header-subtitle-list-icon: '\e920' !default;
+$step-header-subtitle-list-icon-line-height: 1 !default;
+$step-header-subtitle-list-icon-margin: 0 5px 0 0 !default;
+$step-header-subtitle-list-line-height: 1.35 !default;
+$step-header-subtitle-list-margin: 0 !default;
+
+$step-header-arrow-animation: AnimateArrowUpDown 10s linear 2s infinite !default;
+$step-header-arrow-background-color: $step-header-background-color !default;
+$step-header-arrow-color: $step-header-title-color !default;
+$step-header-arrow-content: '\e900' !default;
+$step-header-arrow-font-size: 1.375rem !default;
+$step-header-arrow-font-family: modicons-basic !default;
+$step-header-arrow-position: absolute !default;
+$step-header-arrow-bottom: -24px !default;
+$step-header-arrow-left: 50% !default;
+$step-header-arrow-transform: translateX(-50%) !default;
+$step-header-arrow-container-height: 75px !default;
+$step-header-arrow-container-width: 140px !default;
+$step-header-arrow-container-position: absolute !default;
+$step-header-arrow-container-bottom: -40px !default;
+$step-header-arrow-container-left: 50% !default;
+$step-header-arrow-container-transform: translateX(-50%) !default;
+$step-header-arrow-container-z-index: -1 !default;
+$step-header-arrow-border-radius: 0 0 $step-header-arrow-container-height $step-header-arrow-container-height !default;
+
+$step-content-padding: 30px 35px !default;
+$step-content-padding-desktop: 40px 60px 60px !default;
+$step-content-text-align: center !default;
+
+$step-title-color: $color-charcoal8 !default;
+$step-title-display: block !default;
+$step-title-font-size: 1.375rem !default;
+$step-title-font-size-desktop: 1.5rem !default;
+$step-title-font-weight: 400 !default;
+$step-title-line-height: 1.25 !default;
+$step-title-margin: 0 0 25px !default;
+
+$step-subtitle-color: $color-charcoal6 !default;
+$step-subtitle-font-size: .875rem !default;
+$step-subtitle-font-size-desktop: 1rem !default;
+$step-subtitle-font-weight: 400 !default;
+$step-subtitle-line-height: 1.35 !default;
+$step-subtitle-margin: -15px 0 20px !default;
+
+$step-overview-border: 1px solid $color-charcoal1 !default;
+$step-overview-color: $color-charcoal5 !default;
+$step-overview-display: flex !default;
+$step-overview-font-size: .8125rem !default;
+$step-overview-justify-content: space-between !default;
+$step-overview-letter-spacing: .1px !default;
+$step-overview-line-height: 1.35 !default;
+$step-overview-margin: 0 auto 25px !default;
+$step-overview-padding: 8px 0 !default;
+$step-overview-text-align: center !default;
+$step-overview-width: 100% !default;
+
+$step-overview-number-background: $step-overview-color !default;
+$step-overview-number-color: $color-white !default;
+$step-overview-number-font-size: .875rem !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;
+
+$step-fields-width: 100% !default;
+$step-fields-max-width: 100% !default;
+
+$step-extra-initial-display: none !default;
+$step-extra-margin: 0 !default;
+
+$step-secure-text-include-border-background-color: $color-ivory5 !default;
+$step-secure-text-include-border-border: 1px solid $color-charcoal1 !default;
+$step-secure-text-include-border-padding: 4px 6px !default;
+$step-secure-text-color: $color-charcoal5 !default;
+$step-secure-text-display: inline-block !default;
+$step-secure-text-font-size: .875rem !default;
+$step-secure-text-font-weight: 700 !default;
+$step-secure-text-margin: 5px auto !default;
+$step-secure-text-padding: 0 !default;
+
+$step-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
+$step-focus-outline-offset: -2px !default;
+
+$step-buttons-align-items: center !default;
+$step-buttons-display: flex !default;
+$step-buttons-flex-direction: row !default;
+$step-buttons-gap: 60px !default;
+$step-buttons-justify-content: space-between !default;
+
+// First Step
+$first-step-content-align-items-desktop: center !default;
+$first-step-content-display-desktop: flex !default;
+$first-step-content-flex-direction-desktop: column !default;
+$first-step-content-justify-content-desktop: center !default;
+$first-step-content-min-height-desktop: 380px !default;
+$first-step-button-max-width: 200px !default;
+$first-step-button-margin: 10px auto !default;
+$first-step-fields-margin: 0 auto !default;
+$first-step-fields-max-width: 280px !default;
+
+// Form Groups
+$form-position: relative !default;
+$form-group-legend-color: $step-title-color !default;
+$form-group-legend-font-size: $step-title-font-size !default;
+$form-group-legend-font-size-desktop: $step-title-font-size-desktop !default;
+$form-group-legend-font-weight: $step-title-font-weight !default;
+$form-group-legend-line-height: $step-title-line-height !default;
+$form-group-legend-margin: $step-title-margin !default;
+$form-group-legend-padding: 0 !default;
+
+$form-group-margin: 0 !default;
+$form-group-label-color: $color-charcoal5 !default;
+$form-group-label-display: unset !default;
+$form-group-label-font-family: inherit !default;
+$form-group-label-font-size: 1rem !default;
+$form-group-label-font-size-desktop: 1.125rem !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: 17px !default;
+$form-group-label-in-input-left-position: 15px !default;
+$form-group-label-in-input-z-index: -1 !default;
+
+$form-group-error-message-color: $color-a11y-red !default;
+$form-group-error-message-font-size: .875rem !default;
+$form-group-error-message-margin: -10px 0 10px 2px !default;
+$form-group-error-message-padding: 0 !default;
+$form-group-error-message-text-align: left !default;
+
+$form-group-city-state-color: $color-charcoal4 !default;
+$form-group-city-state-font-size: .75rem !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: $color-charcoal4 !default;
+$form-group-note-font-size: .75rem !default;
+$form-group-note-font-style: italic !default;
+$form-group-note-margin: -7px 0 0 !default;
+
+$form-inprogress-form-display: flex !default;
+$form-inprogress-form-flex-direction: column !default;
+$form-inprogress-form-justify-content: space-between !default;
+$form-inprogress-form-min-height: inherit !default;
+$form-inprogress-width: 100% !default;
+$form-inprogress-min-height: 510px !default;
+$form-inprogress-top-section-padding: 30px 35px 0 !default;
+$form-inprogress-top-section-padding-desktop: 40px 60px 0 !default;
+$form-inprogress-bottom-section-padding-desktop: 0 60px 60px !default;
+$form-inprogress-top-section-padding-lg: 60px 40px 0 !default;
+$form-inprogress-bottom-section-padding-lg: 0 40px 40px !default;
+$form-inprogress-top-section-padding-xl: 70px 60px 0 !default;
+$form-inprogress-bottom-section-padding-xl: 0 60px 60px !default;
+$step-inprogress-content-padding-desktop: $step-content-padding-desktop !default;
+$step-inprogress-content-padding-lg: 60px 40px 40px !default;
+$step-inprogress-content-padding-xl: 70px 60px 60px !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%;
+
+	/* Step Header */
+	&__header {
+		background-color: $step-header-background-color;
+		border-radius: $step-header-border-radius;
+		display: $step-header-display;
+		padding: $step-header-padding;
+		position: $step-header-position;
+		text-align: $step-header-text-align;
+	}
+
+	&__header-title {
+		color: $step-header-title-color;
+		font-family: $step-header-title-font-family;
+		font-size: $step-header-title-font-size;
+		font-weight: $step-header-title-font-weight;
+		line-height: $step-header-title-line-height;
+	}
+
+	&__header-subtitle {
+		color: $step-header-subtitle-color;
+		font-size: $step-header-subtitle-font-size;
+		font-weight: $step-header-subtitle-font-weight;
+		line-height: $step-header-subtitle-line-height;
+		margin: $step-header-subtitle-margin;
+	}
+
+	&__header-subtitle-list {
+		list-style: none;
+		margin: $step-header-subtitle-list-margin;
+		padding-left: 0;
+
+		li {
+			color: $step-header-subtitle-list-color;
+			font-size: $step-header-subtitle-list-font-size;
+			font-weight: $step-header-subtitle-list-font-weight;
+			line-height: $step-header-subtitle-list-line-height;
+
+			&:before {
+				content: $step-header-subtitle-list-icon;
+				display: inline-block;
+				font-family: 'modicons-fill';
+				font-style: normal;
+				font-variant: normal;
+				font-weight: 400;
+				line-height: $step-header-subtitle-list-icon-line-height;
+				margin: $step-header-subtitle-list-icon-margin;
+				text-transform: none;
+			}
+		}
+	}
+
+	/* Step Content */
+	&__content {
+		padding: $step-content-padding;
+		text-align: $step-content-text-align;
+	}
+
+	&__title {
+		color: $step-title-color;
+		display: $step-title-display;
+		font-size: $step-title-font-size;
+		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;
+		font-weight: $step-subtitle-font-weight;
+		line-height: $step-subtitle-line-height;
+		margin: $step-subtitle-margin;
+	}
+
+	&__overview {
+		border-bottom: $step-overview-border;
+		border-top: $step-overview-border;
+		color: $step-overview-color;
+		display: $step-overview-display;
+		font-size: $step-overview-font-size;
+		justify-content: $step-overview-justify-content;
+		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;
+		width: $step-overview-width;
+
+		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;
+	}
+
+	&__fields {
+		max-width: $step-fields-max-width;
+		width: $step-fields-width;
+	}
+
+	&__secure-text {
+		color: $step-secure-text-color;
+		display: $step-secure-text-display;
+		font-size: $step-secure-text-font-size;
+		font-weight: $step-secure-text-font-weight;
+		margin: $step-secure-text-margin;
+		padding: $step-secure-text-padding;
+
+		&--border {
+			background-color: $step-secure-text-include-border-background-color;
+			border: $step-secure-text-include-border-border;
+			padding: $step-secure-text-include-border-padding;
+		}
+	}
+
+	&__extra {
+		display: $step-extra-initial-display;
+		margin: $step-extra-margin;
+	}
+
+	&__buttons {
+		align-items: $step-buttons-align-items;
+		display: $step-buttons-display;
+		flex-direction: $step-buttons-flex-direction;
+		gap: $step-buttons-gap;
+		justify-content: $step-buttons-justify-content;
+	}
+
+	&--first {
+		.step__fields {
+			margin: $first-step-fields-margin;
+			max-width: $first-step-fields-max-width;
+		}
+
+		.btn--primary {
+			max-width: $first-step-button-max-width;
+		}
+	}
+
+	&:focus {
+		outline: $step-focus-outline;
+		outline-offset: $step-focus-outline-offset;
+	}
+}
+
+.form {
+	position: $form-position;
+
+	&--disable-step-focus {
+		.step:focus {
+			outline: none;
+			outline-offset: 0;
+		}
+	}
+}
+
+.form-group {
+	margin: $form-group-margin;
+
+	legend {
+		color: $form-group-legend-color;
+		font-size: $form-group-legend-font-size;
+		font-weight: $form-group-legend-font-weight;
+		line-height: $form-group-legend-line-height;
+		margin: $form-group-legend-margin;
+		padding: $form-group-legend-padding;
+	}
+
+	&__label {
+		color: $form-group-label-color;
+		display: $form-group-label-display;
+		font-family: $form-group-label-font-family;
+		font-size: $form-group-label-font-size;
+		font-weight: $form-group-label-font-weight;
+		margin: $form-group-label-margin;
+	}
+
+	&__error-message {
+		color: $form-group-error-message-color;
+		font-size: $form-group-error-message-font-size;
+		display: none;
+		margin: $form-group-error-message-margin;
+		padding: $form-group-error-message-padding;
+		text-align: $form-group-error-message-text-align;
+	}
+
+	&__label-input {
+		color: $form-group-label-color;
+		cursor: $form-group-label-in-input-cursor;
+		font-family: $form-group-label-font-family;
+		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-in-out, font-size 200ms ease-in-out;
+		user-select: none;
+		z-index: $form-group-label-in-input-z-index;
+	}
+
+	&__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;
+	}
+}
+
+.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;
+		}
+	}
+}
+
+.form-in-progress {
+	.form__top-section {
+		padding: $form-inprogress-top-section-padding;
+	}
+}
+
+@include breakpoint-md {
+	.step {
+		/* Step Header */
+		&__header {
+			align-items: $step-header-align-items;
+			display: $step-header-display-desktop;
+			flex-direction: $step-header-flex-direction;
+			justify-content: $step-header-justify-content;
+			min-height: $step-header-min-height-desktop;
+			padding: $step-header-padding-desktop;
+		}
+
+		&__header-title{
+			font-size: $step-header-title-font-size-desktop;
+		}
+
+		&__header-subtitle {
+			font-size: $step-header-subtitle-font-size-desktop;
+		}
+
+		/* Step Content */
+		&__content {
+			padding: $step-content-padding-desktop;
+		}
+
+		&--first {
+			.step__content {
+				align-items: $first-step-content-align-items-desktop;
+				display: $first-step-content-display-desktop;
+				flex-direction: $first-step-content-flex-direction-desktop;
+				justify-content: $first-step-content-justify-content-desktop;
+				min-height: $first-step-content-min-height-desktop;
+			}
+		}
+
+		&__title {
+			font-size: $step-title-font-size-desktop;
+		}
+
+		&__subtitle {
+			font-size: $step-subtitle-font-size-desktop;
+		}
+	}
+
+	.form-group {
+		legend {
+			font-size: $form-group-legend-font-size-desktop;
+		}
+
+		&__label {
+			font-size: $form-group-label-font-size-desktop;
+		}
+
+		&__label-input {
+			font-size: $form-group-label-font-size-desktop;
+		}
+	}
+
+	.form-in-progress {
+		.step__content {
+			padding: $step-inprogress-content-padding-desktop;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-desktop;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-desktop
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.form-in-progress {
+		.form {
+			display: $form-inprogress-form-display;
+			flex-direction: $form-inprogress-form-flex-direction;
+			justify-content: $form-inprogress-form-justify-content;
+			min-height: $form-inprogress-form-min-height;
+		}
+
+		.swiper--form {
+			min-height: $form-inprogress-min-height;
+			width: $form-inprogress-width;
+		}
+
+		.step__content {
+			padding: $step-inprogress-content-padding-lg;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-lg;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-lg
+		}
+	}
+}
+
+@include breakpoint-xl {
+	.step {
+		&__header {
+			&--show-animated-arrow {
+				&:before {
+					animation: $step-header-arrow-animation;
+					bottom: $step-header-arrow-bottom;
+					color: $step-header-arrow-color;
+					content: $step-header-arrow-content;
+					font-size: $step-header-arrow-font-size;
+					font-family: $step-header-arrow-font-family;
+					left: $step-header-arrow-left;
+					position: $step-header-arrow-position;
+					transform: $step-header-arrow-transform;
+				}
+
+				&:after {
+					background-color: $step-header-arrow-background-color;
+					border-radius: $step-header-arrow-border-radius;
+					bottom: $step-header-arrow-container-bottom;
+					content: '';
+					height: $step-header-arrow-container-height;
+					left: $step-header-arrow-container-left;
+					position: $step-header-arrow-container-position;
+					transform: $step-header-arrow-container-transform;
+					width: $step-header-arrow-container-width;
+					z-index: $step-header-arrow-container-z-index;
+				}
+			}
+		}
+	}
+
+	.form-in-progress {
+		.step__content {
+			padding: $step-inprogress-content-padding-xl;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-xl;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-xl
+		}
+	}
+}