mod-build 3.6.75-beta.2 → 4.0.0-alpha.2

package/src/styles/apt-block.scss

@@ -1,888 +0,0 @@
-/**
- * Imports
- */
-
-@import 'partials/mixins';
-
-/**
-* Vars
-*/
-
-$color-white: #FFF;
-$color-black: #000;
-$color-gray1: #E5E5E5;
-$color-gray2: #565656;
-$color-gray3: #757375;
-$color-gray4: #D8D8D8;
-$color-gray5: #676767;
-$color-gray6: #9F9F9F;
-$color-gray7: #BDBDBD;
-$color-beige1: #F6F5F1;
-$color-green1: #A0BC57;
-$color-blue1: #6EB7C2;
-$color-red1: #F34747;
-
-$color-primary: #F6931D;
-
-$trans-time: .15s;
-$trans-func: ease;
-
-/**
-* Import fonts
-*/
-$font-primary-regular: 'Montserrat', sans-serif;
-$font-primary-light: 'Montserrat-Light', sans-serif;
-$font-primary-semi-bold: 'Montserrat-SemiBold', sans-serif;
-$font-primary-bold: 'Montserrat-Bold', sans-serif;
-
-
-/**
-* Mixins
-*/
-
-@mixin font-primary-regular {
-	font-family: $font-primary-regular;
-	font-weight: normal;
-}
-
-@mixin font-primary-light {
-	font-family: $font-primary-light;
-	font-weight: normal;
-}
-
-@mixin font-primary-semi-bold {
-	font-family: $font-primary-semi-bold;
-	font-weight: normal;
-}
-
-@mixin font-primary-bold {
-	font-family: $font-primary-bold;
-	font-weight: normal;
-}
-
-@mixin btn-primary-style($color) {
-	background: $color;
-
-	&:hover,
-	&:focus,
-	&:active {
-		background: darken($color, 10);
-	}
-
-	&:active {
-		&:focus {
-			background: darken($color, 10);
-		}
-	}
-}
-
-@mixin btn-secondary-style($color) {
-	background: transparent;
-	border: 2px solid $color-white;
-	color: $color;
-	padding-bottom: 11px;
-	padding-top: 11px;
-
-	&:hover,
-	&:focus,
-	&:active {
-		background: transparent;
-		border-color: $color;
-	}
-
-	&:active {
-		&:focus {
-			background: transparent;
-			border-color: $color;
-		}
-	}
-
-	@include breakpoint-phone {
-		border-color: $color;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background: $color;
-			color: $color-white;
-		}
-
-		&:active {
-			&:focus {
-				background: $color;
-				color: $color-white;
-			}
-		}
-	}
-}
-
-
-/**
-* Animation
-*/
-
-@keyframes spinnerAnim {
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-
-/**
-* Desktop styles
-*/
-
-.apt-block {
-	border-bottom: 1px solid $color-gray1;
-	color: $color-gray2;
-	margin: 0;
-	padding: 45px 0;
-
-	&__title {
-		margin: 0 0 45px;
-	}
-
-	&__loading {
-		@include font-primary-regular;
-		color: $color-gray6;
-		font-size: 13px;
-		letter-spacing: .69px;
-		line-height: 16px;
-		margin: 40px 0 0;
-		padding-left: 20px;
-		position: relative;
-		text-transform: uppercase;
-
-		.apt-block__spinner {
-			left: 0;
-			position: absolute;
-			top: 0;
-		}
-	}
-
-	&__spinner {
-		cursor: wait;
-		display: inline-block;
-		height: 10px;
-		position: relative;
-		width: 10px;
-
-		&::before {
-			content: '';
-			display: inline-block;
-			height: 100%;
-			vertical-align: middle;
-		}
-
-		&::after {
-			animation: spinnerAnim 1.5s linear infinite;
-			border: 3px solid $color-gray6;
-			border-radius: 50%;
-			border-right-color: $color-gray1;
-			border-top-color: $color-gray1;
-			content: '';
-			display: block;
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			vertical-align: middle;
-			width: 100%;
-		}
-	}
-
-	.has-error {
-		.form-control-select {
-			border-color: $color-red1;
-			color: $color-red1;
-		}
-
-		.apt-match__schedule-error {
-			display: block;
-		}
-	}
-
-	.form-control-select {
-		background: $color-white;
-		border: 1px solid $color-gray4;
-		border-radius: 4px;
-		box-shadow: inset 0 1px 2px 0 rgba($color-black, .1);
-		color: $color-gray2;
-		display: inline-block;
-		height: 44px;
-		position: relative;
-		transition: color $trans-func $trans-time, border-color $trans-func $trans-time;
-
-		&::after {
-			border-color: $color-gray4;
-			border-style: solid;
-			border-width: 0 2px 2px 0;
-			content: '';
-			display: block;
-			height: 6px;
-			position: absolute;
-			right: 15px;
-			top: 15px;
-			transform: rotate(45deg);
-			width: 6px;
-			z-index: 1;
-		}
-
-		select {
-			@include font-primary-light;
-			appearance: none;
-			background: transparent;
-			border: 0;
-			font-size: 14px;
-			height: 44px;
-			line-height: 18px;
-			padding: 13px 30px 13px 20px;
-			width: 100%;
-			z-index: 2;
-
-			&::-ms-expand { // sass-lint:disable-line no-vendor-prefixes
-				display: none;
-			}
-
-			&:disabled {
-				cursor: not-allowed;
-			}
-		}
-	}
-
-	a,
-	button,
-	input,
-	select {
-		outline: none !important;
-	}
-
-	button,
-	select {
-		cursor: pointer;
-	}
-
-	.btn {
-		@include font-primary-regular;
-		appearance: none;
-		border: 0;
-		border-radius: 4px;
-		box-shadow: none;
-		color: $color-white;
-		display: inline-block;
-		font-size: 14px;
-		height: 44px;
-		line-height: 18px;
-		margin: 0;
-		overflow: hidden;
-		padding: 13px 20px;
-		position: relative;
-
-		& + .btn {
-			margin-left: 15px;
-		}
-
-		span {
-			color: inherit;
-		}
-
-		&-primary {
-			@include btn-primary-style($color-primary);
-		}
-
-		&-link {
-			@include btn-secondary-style($color-blue1);
-		}
-
-		.spinner {
-			cursor: wait;
-			display: none;
-			height: 10px;
-			left: 50%;
-			margin: -7px 0 0 -7px;
-			position: absolute;
-			top: 50%;
-			width: 10px;
-
-			&::before {
-				content: '';
-				display: inline-block;
-				height: 100%;
-				vertical-align: middle;
-			}
-
-			&::after {
-				animation: spinnerAnim 1.5s linear infinite;
-				border: 3px solid darken($color-primary, 15);
-				border-radius: 50%;
-				border-right-color: $color-white;
-				border-top-color: $color-white;
-				content: '';
-				display: block;
-				height: 100%;
-				left: 0;
-				position: absolute;
-				top: 0;
-				vertical-align: middle;
-				width: 100%;
-			}
-		}
-	}
-
-	&--instant {
-		.apt-block {
-			&__suptitle,
-			&__title,
-			&__subtitle {
-				text-align: center;
-			}
-
-			&__title {
-				font-size: 36px;
-				line-height: 39px;
-				margin-bottom: 15px;
-			}
-
-			&__subtitle {
-				font-size: 16px;
-				line-height: 19px;
-				margin-bottom: 25px;
-				margin-left: auto;
-				margin-right: auto;
-				max-width: 300px;
-			}
-		}
-	}
-
-	&__suptitle {
-		@include font-primary-semi-bold;
-		color: $color-gray1;
-		font-size: 16px;
-		line-height: 24px;
-		margin: 0 0 5px;
-		text-transform: uppercase;
-	}
-
-	&__instant-matches {
-		margin-left: auto;
-		margin-right: auto;
-		max-width: 585px;
-	}
-}
-
-.apt-match {
-	@include font-primary-light;
-	min-height: 120px;
-	padding-left: 150px;
-	position: relative;
-
-	& + & {
-		margin-top: 40px;
-	}
-
-	&--loading {
-		&::after {
-			bottom: 0;
-			content: '';
-			cursor: wait;
-			display: block;
-			left: 0;
-			position: absolute;
-			right: 0;
-			top: 0;
-			z-index: 10;
-		}
-
-		.btn {
-			span {
-				visibility: hidden;
-			}
-
-			.spinner {
-				display: inline-block;
-				visibility: visible;
-			}
-		}
-	}
-
-	&__logo {
-		background-position: center top;
-		background-repeat: no-repeat;
-		background-size: contain;
-		border: 4px solid $color-white;
-		box-shadow: 0 2px 4px 0 rgba($color-black, .13);
-		height: 120px;
-		left: 0;
-		overflow: hidden;
-		position: absolute;
-		text-indent: -1000px;
-		top: 0;
-		width: 120px;
-
-		&--placeholder {
-			@include font-primary-light;
-			background: $color-beige1;
-			color: $color-gray7;
-			font-size: 58px;
-			letter-spacing: 0;
-			line-height: 110px;
-			text-align: center;
-			text-indent: 0;
-		}
-	}
-
-	&__label {
-		@include font-primary-semi-bold;
-		color: $color-green1;
-		font-size: 13px;
-		letter-spacing: .69px;
-		line-height: 16px;
-		text-transform: uppercase;
-	}
-
-	&__company {
-		@include font-primary-regular;
-		font-size: 18px;
-		line-height: 20px;
-		margin: 0 0 15px;
-	}
-
-	&__form {
-		color: $color-gray3;
-		font-size: 14px;
-		line-height: 20px;
-		max-width: 585px;
-
-		&-title {
-			margin-bottom: 5px;
-		}
-	}
-
-	&__schedule-error {
-		color: $color-red1;
-		display: none;
-		margin: 5px 0 0;
-	}
-
-	&__schedule-control {
-		background: $color-white;
-		border-collapse: separate;
-		border-radius: 4px;
-		display: table;
-		font-size: 0;
-		margin: 0;
-		position: relative;
-		width: 100%;
-
-		&--date-only {
-			width: 60%;
-
-			.form-control-select {
-				&:first-child {
-					width: 100%;
-				}
-
-				&:last-child {
-					display: none;
-				}
-			}
-		}
-
-		&-controls {
-			display: table-cell;
-			vertical-align: top;
-			width: 99%;
-		}
-
-		&-btn {
-			display: table-cell;
-			vertical-align: top;
-			width: 1%;
-		}
-
-		.btn,
-		.form-control-select {
-			border-radius: 0;
-			box-sizing: border-box;
-			vertical-align: top;
-		}
-
-		.form-control-select {
-			background: transparent;
-			border-right-width: 0;
-			overflow: hidden;
-			width: 50%;
-
-			&:first-child {
-				border-radius: 4px 0 0 4px;
-			}
-		}
-
-		.btn {
-			border-radius: 0 4px 4px 0;
-		}
-	}
-
-	&__schedule-info {
-		position: relative;
-		width: 100%;
-
-		&::after {
-			clear: both;
-			content: '';
-			display: block;
-		}
-
-		&-row {
-			&::after {
-				clear: both;
-				content: '';
-				display: table;
-				height: 1px;
-				overflow: hidden;
-			}
-		}
-
-		&-col {
-			&-left {
-				float: left;
-			}
-
-			&-right {
-				float: right;
-				text-align: right;
-				width: 285px;
-			}
-		}
-
-		&-date {
-			@include font-primary-regular;
-			font-size: 18px;
-			line-height: 20px;
-			padding: 4px 0 0;
-		}
-	}
-
-	&__success-msg {
-		text-align: left;
-
-		&-title {
-			@include font-primary-semi-bold;
-			color: $color-green1;
-			font-size: 13px;
-			line-height: 16px;
-			padding-left: 15px;
-			position: relative;
-			text-transform: uppercase;
-
-			&::before {
-				border-color: $color-green1;
-				border-style: solid;
-				border-width: 0 3px 3px 0;
-				content: '';
-				display: block;
-				height: 8px;
-				left: 0;
-				position: absolute;
-				top: 0;
-				transform: rotate(45deg);
-				width: 4px;
-			}
-		}
-
-		&-text {
-			padding-left: 15px;
-		}
-	}
-
-	&__tcpa {
-		@include font-primary-regular;
-		clear: both;
-		color: $color-gray5;
-		font-size: 11px;
-		line-height: 13px;
-		margin: 20px 0 0;
-		text-align: left;
-
-		a {
-			color: inherit;
-		}
-	}
-}
-
-.apt-instant-match {
-	position: relative;
-
-	& + & {
-		margin-top: 15px;
-	}
-
-	.apt-block {
-		&__spinner {
-			margin-right: 12px;
-		}
-	}
-
-	.apt-match {
-		&__schedule-control {
-			&--date-only {
-				width: 100%;
-
-				.form-control-select {
-					&:first-child {
-						border-radius: 4px 0 0;
-						border-right-width: 0;
-						width: 50%;
-					}
-
-					&:last-child {
-						display: inline-block;
-
-						&::after {
-							opacity: .25;
-						}
-					}
-
-					select {
-						&:disabled {
-							opacity: .25;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&--loading {
-		.apt-instant-match__placeholder {
-			display: none;
-
-			&--loading {
-				display: block;
-			}
-		}
-	}
-
-	&__scheduled,
-	&__placeholder {
-		@include font-primary-semi-bold;
-		border-radius: 4px;
-		font-size: 13px;
-		line-height: 16px;
-		padding: 12px 20px;
-		text-align: center;
-		text-transform: uppercase;
-	}
-
-	&__placeholder {
-		border: 2px dashed $color-gray4;
-		color: $color-gray6;
-
-		&--loading {
-			display: none;
-		}
-	}
-
-	&__scheduled {
-		background: $color-gray5;
-		color: $color-white;
-		display: none;
-		padding-bottom: 14px;
-		padding-top: 14px;
-		transition: background-color $trans-time $trans-func;
-
-		&-content {
-			display: inline-block;
-			padding-left: 20px;
-			position: relative;
-
-			.apt-block__spinner {
-				left: 0;
-				margin-top: -8px;
-				position: absolute;
-				top: 50%;
-			}
-
-			&::before {
-				border-color: $color-white;
-				border-style: solid;
-				border-width: 0 3px 3px 0;
-				content: '';
-				display: none;
-				height: 8px;
-				left: 2px;
-				position: absolute;
-				top: 1px;
-				transform: rotate(45deg);
-				width: 5px;
-			}
-		}
-	}
-
-	&__form {
-		&--loading,
-		&--scheduled {
-			.apt-instant-match {
-				&__schedule {
-					display: none;
-				}
-
-				&__scheduled {
-					display: block;
-				}
-			}
-		}
-
-		&--loading {
-			cursor: wait;
-		}
-
-		&--scheduled {
-			.apt-instant-match {
-				&__scheduled {
-					background: #A0BC57;
-
-					&-content {
-						.apt-block__spinner {
-							display: none;
-						}
-
-						&::before {
-							display: block;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-
-/**
-* Mobile styles
-*/
-
-@include breakpoint-phone {
-	.apt-block {
-		padding: 20px 0;
-		text-align: center;
-
-		&--instant {
-			.apt-block {
-				&__title {
-					font-size: 28px;
-					line-height: 34px;
-				}
-			}
-		}
-
-		&__loading {
-			display: inline-block;
-		}
-	}
-
-	.apt-match {
-		padding-left: 0;
-		text-align: left;
-
-		&__logo {
-			height: 90px;
-			margin: 0 auto 15px;
-			position: static;
-			width: 90px;
-
-			&--placeholder {
-				font-size: 38px;
-				line-height: 84px;
-			}
-		}
-
-		&__label,
-		&__company {
-			text-align: center;
-		}
-
-		&__form {
-			margin: 0 auto;
-			max-width: 400px;
-
-			&-title {
-				text-align: center;
-			}
-		}
-
-		&__schedule-control {
-			display: block;
-
-			&-controls,
-			&-btns {
-				display: block;
-				width: 100%;
-			}
-
-			&-controls {
-				height: 44px;
-			}
-
-			.form-control-select {
-				border-radius: 0;
-
-				&:first-child {
-					border-radius: 4px 0 0;
-				}
-
-				&:last-child {
-					border-radius: 0 4px 0 0;
-					border-right-width: 1px;
-				}
-			}
-
-			&--date-only {
-				width: 100%;
-
-				.form-control-select {
-					&:first-child {
-						border-right-width: 1px;
-						border-top-right-radius: 4px;
-					}
-				}
-			}
-
-			.btn {
-				border-radius: 0 0 4px 4px;
-				display: block;
-				width: 100%;
-			}
-		}
-
-		&__schedule-info {
-			text-align: center;
-
-			&-date,
-			&-time {
-				margin-right: 0;
-			}
-
-			&-col {
-				&-left,
-				&-right {
-					float: none;
-					margin-top: 15px;
-					text-align: center;
-					width: 100%;
-				}
-			}
-		}
-
-		&__success-msg {
-			text-align: center;
-
-			&-title {
-				display: inline-block;
-			}
-
-			&-text {
-				padding: 0;
-			}
-		}
-	}
-}