mod-build 4.0.0 → 4.0.1-beta.2

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

@@ -1,636 +0,0 @@
-$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%;
-
-$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-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 {
-		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;
-		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
-		}
-	}
-}