mod-base 1.0.3 → 1.0.4-9.beta-2

package/src/styles/base/_ratings.scss

@@ -0,0 +1,427 @@
+@import '../icons/mixin-fill';
+@import '../icons/mixin-stroke';
+
+$star-rating-height: 24px;
+$star-rating-height-sm: 20px;
+$star-rating-height-lg: 28px;
+
+$rating-icons-folder: '../images/rating-icons' !default;
+
+@mixin star-rating-sm {
+	.star-rating {
+		&__stars {
+			height: $star-rating-height-sm;
+			line-height: $star-rating-height-sm;
+
+			&::before,
+			&::after {
+				font-size: $star-rating-height-sm;
+				height: $star-rating-height-sm;
+				line-height: $star-rating-height-sm;
+			}
+		}
+	}
+}
+
+@mixin star-rating-lg {
+	height: $star-rating-height-lg;
+	line-height: $star-rating-height-lg;
+
+	.star-rating {
+		&__stars {
+			height: $star-rating-height-lg;
+			line-height: $star-rating-height-lg;
+
+			&::before,
+			&::after {
+				font-size: $star-rating-height-lg;
+				height: $star-rating-height-lg;
+				line-height: $star-rating-height-lg;
+			}
+		}
+	}
+}
+
+.star-rating {
+	display: inline-block;
+
+	> span {
+		vertical-align: middle;
+	}
+
+	&__stars {
+		display: inline-block;
+		height: $star-rating-height;
+		line-height: $star-rating-height;
+		margin-right: 5px;
+		position: relative;
+
+		&::before,
+		&::after {
+			@include icon-fill;
+			content: '\e907\e907\e907\e907\e907';
+			display: inline-block;
+			font-size: $star-rating-height;
+			height: $star-rating-height;
+			line-height: $star-rating-height;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		&::before {
+			color: $color-ivory5;
+			position: relative;
+			z-index: 1;
+		}
+
+		&::after {
+			color: $color-yellow5;
+			left: 0;
+			position: absolute;
+			top: 0;
+			z-index: 2;
+			width: 0;
+		}
+
+		&--00 {
+			&::before {
+				color: $color-ivory5;
+				font-size: $star-rating-height;
+				height: $star-rating-height;
+				line-height: $star-rating-height;
+			}
+
+			&::after {
+				display: none;
+			}
+		}
+
+		&--05 {
+			&::after {
+				width: 10%;
+			}
+		}
+
+		&--10 {
+			&::after {
+				width: 20%;
+			}
+		}
+
+		&--15 {
+			&::after {
+				width: 30%;
+			}
+		}
+
+		&--20 {
+			&::after {
+				width: 40%;
+			}
+		}
+
+		&--25 {
+			&::after {
+				width: 50%;
+			}
+		}
+
+		&--30 {
+			&::after {
+				width: 60%;
+			}
+		}
+
+		&--35 {
+			&::after {
+				width: 70%;
+			}
+		}
+
+		&--40 {
+			&::after {
+				width: 80%;
+			}
+		}
+
+		&--45 {
+			&::after {
+				width: 90%;
+			}
+		}
+
+		&--50 {
+			&::after {
+				width: 100%;
+			}
+		}
+	}
+
+	&__label {
+		color: $color-charcoal5;
+		display: inline-block;
+		font-size: .75rem;
+		font-weight: 700;
+		line-height: 1.3;
+		transition: color .15s ease;
+		white-space: nowrap;
+
+		&--verified {
+			color: $color-orange5;
+			font-size: .875rem;
+			line-height: 1.3;
+		}
+
+		&--text {
+			color: $color-charcoal4;
+			font-size: .875rem;
+			font-weight: 400;
+			line-height: 1.3;
+		}
+	}
+
+	&--lg {
+		@include star-rating-lg;
+	}
+
+	&--sm {
+		@include star-rating-sm;
+	}
+}
+
+a {
+	&.star-rating {
+		&:hover,
+		&:focus,
+		&:active {
+			.star-rating {
+				&__label {
+					color: $color-charcoal6;
+
+					&--verified {
+						color: $color-orange6;
+					}
+
+					&--text {
+						color: $color-charcoal5;
+					}
+				}
+			}
+		}
+	}
+}
+
+/**
+* External ratings
+*/
+.ext-rating-icon {
+	border: 1px solid $color-charcoal1;
+	border-radius: 16px;
+	color: $color-charcoal5;
+	display: inline-block;
+	font-size: 1.0625rem;
+	font-weight: bold;
+	line-height: 20px;
+	padding: 5px 10px;
+	transition: border-color .15s ease;
+
+	&--google,
+	&--bbb,
+	&--trustpilot {
+		background-position: 10px 50%;
+		background-repeat: no-repeat;
+		padding-left: 30px;
+	}
+
+	&--google {
+		background-image: url('#{$rating-icons-folder}/google.svg');
+		background-size: 14px 14px;
+	}
+
+	&--bbb {
+		background-image: url('#{$rating-icons-folder}/bbb.svg');
+		background-position: 8px 50%;
+		background-size: 22px 22px;
+	}
+
+	&--trustpilot {
+		background-image: url('#{$rating-icons-folder}/trustpilot.svg');
+		background-position: 8px 50%;
+		background-size: 20px 20px;
+	}
+}
+
+@include breakpoint-phone {
+	.ext-rating-icon {
+		&--trustpilot {
+			background-size: 14px 14px;
+			padding-left: 26px;
+		}
+	}
+}
+
+a {
+	&.ext-rating-icon {
+		&:focus,
+		&:hover,
+		&:active {
+			border-color: $color-charcoal2;
+			color: $color-charcoal5;
+		}
+	}
+}
+
+/**
+* Ratings set
+*/
+.ratings-set {
+	margin: 0 0 15px;
+
+	&__group {
+		font-size: 0;
+
+		& + & {
+			margin-top: 10px;
+		}
+
+		.ext-rating-icon {
+			+ .ext-rating-icon {
+				margin-left: 9px;
+			}
+		}
+	}
+}
+
+/**
+* Large rating icons
+*/
+@mixin large-rating-icon-vertical-layout {
+	font-size: 1.25rem;
+	height: 65px;
+	line-height: 20px;
+	min-width: 40px;
+	padding: 45px 0 0;
+	text-align: center;
+	white-space: nowrap;
+
+	&::before {
+		left: 50%;
+		margin-left: -20px;
+		top: 0;
+	}
+}
+
+.large-rating-icon {
+	color: $color-charcoal5;
+	display: inline-block;
+	font-size: 1.75rem;
+	font-weight: bold;
+	height: 40px;
+	line-height: 40px;
+	padding-left: 45px;
+	position: relative;
+
+	&::before {
+		@include icon-fill;
+		color: $color-yellow5;
+		content: '\e907';
+		font-size: 2.5rem;
+		height: 40px;
+		left: 0;
+		line-height: 40px;
+		position: absolute;
+		top: 0;
+		width: 40px;
+	}
+
+	&::after {
+		color: $color-charcoal4;
+		content: '/ 5';
+		display: inline-block;
+		font-size: .9375rem;
+		font-weight: 400;
+		vertical-align: middle;
+	}
+
+	&--empty-star {
+		color: $color-charcoal1;
+
+		&::before {
+			@include icon-stroke;
+			color: $color-ivory5;
+			content: '\e908';
+			font-size: 2.5rem;
+		}
+	}
+
+	&--google {
+		&::before {
+			background-image: url('#{$rating-icons-folder}/google.svg');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 28px 28px;
+			content: '';
+		}
+	}
+
+	&--trustpilot {
+		&::before {
+			background-image: url('#{$rating-icons-folder}/trustpilot.svg');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 28px 28px;
+			content: '';
+		}
+	}
+
+	&--bbb {
+		&::before {
+			background-image: url('#{$rating-icons-folder}/bbb.svg');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 38px 38px;
+			content: '';
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+@include breakpoint-phone {
+	.large-rating-icon {
+		@include large-rating-icon-vertical-layout;
+	}
+}
+
+/**
+* Large rating icons set
+*/
+.large-rating-icon-set {
+	display: flex;
+	flex-wrap: wrap;
+
+	&__item {
+		flex: 1;
+		max-width: 165px;
+		min-width: 130px;
+		padding: 20px 0;
+
+		&--large {
+			max-width: 100%;
+			min-width: 300px;
+			padding: 0;
+		}
+	}
+}
+
+@include breakpoint-phone {
+	.large-rating-icon-set {
+		&__item {
+			&:not(.large-rating-icon-set__item--large) {
+				min-width: 70px;
+			}
+		}
+	}
+}

package/src/styles/base/_reset.scss

@@ -99,14 +99,6 @@ video {
 	vertical-align: baseline;
 }
 
-a,
-button,
-input,
-select,
-textarea {
-	appearance: none;
-}
-
 strong,
 b {
 	font-weight: 700;
@@ -134,15 +126,6 @@ section {
 	display: block;
 }
 
-a,
-button,
-input,
-select,
-textarea {
-	appearance: none;
-	outline: none !important;
-}
-
 button,
 select {
 	cursor: pointer;
@@ -169,8 +152,38 @@ table {
 	border-spacing: 0;
 }
 
+a,
+button,
+input,
+select,
+textarea {
+	appearance: none;
+	outline: none;
+}
+
+img {
+	border: 0;
+	vertical-align: middle;
+}
+
 *,
 :after,
 :before {
 	box-sizing: border-box;
 }
+
+sub,
+sup {
+	font-size: 70%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -.25em;
+}
+
+sup {
+	top: -.5em;
+}

package/src/styles/base/_spacing.scss

@@ -0,0 +1,9 @@
+$spacing-none: 0;
+$spacing-xxs: .25rem;
+$spacing-xs: .5rem;
+$spacing-sm: 1rem;
+$spacing-md: 1.5rem;
+$spacing-lg: 2rem;
+$spacing-xl: 2.5rem;
+$spacing-xxl: 3rem;
+$spacing-2xl: 4rem;

package/src/styles/base/_variables.scss

@@ -1,3 +1,23 @@
-$base-body-color: $color-charcoal8;
-$base-font-family: 'Roboto', sans-serif;
-$base-transition: all .15s ease-in-out;
+$base-body-color: $color-black !default;
+$base-font-family: 'Roboto', sans-serif !default;
+$base-transition: all .15s ease-in-out !default;
+
+// Typography
+$h2-font-size: 1.375rem !default;
+$h2-font-size-desktop: 1.5rem !default;
+$h2-line-height: 1.25 !default;
+
+$h3-font-size: 1.125rem !default;
+$h3-font-size-desktop: 1.125rem !default;
+$h3-line-height: 1.25 !default;
+
+$body-font-size: 1rem !default;
+$body-font-size-desktop: 1.125rem !default;
+$body-line-height: 1.35 !default;
+
+$disclaimer-font-size: .75rem !default;
+$disclaimer-line-height: 1.35 !default;
+
+// Best Company
+$bc-base-font-family: 'Lato', sans-serif !default;
+$bc-secondary-font-family: 'Work Sans', sans-serif !default;

package/src/styles/base/components/_duplicate-submission.scss

@@ -0,0 +1,44 @@
+.duplicate-submission {
+	align-items: center;
+	background-color: $color-white;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 390px;
+	padding: 40px 10px;
+	text-align: center;
+
+	h3 {
+		color: $color-charcoal5;
+		font-size: 1.375rem;
+		font-weight: bold;
+		margin: 30px auto 0;
+	}
+
+	p {
+		color: $color-charcoal5;
+		display: block;
+		font-size: .9375rem;
+		font-weight: 400;
+		line-height: 1.5;
+		margin: 20px auto 30px;
+	}
+
+	a.btn {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		line-height: normal;
+		margin: 0 auto 30px;
+		max-width: 280px;
+		min-width: unset;
+		padding: 14px 0 15px;
+		width: 100%;
+
+		.btn__text {
+			font-size: 1.125rem;
+			visibility: visible;
+		}
+	}
+}

package/src/styles/base/components/_index.scss

@@ -0,0 +1 @@
+@import 'duplicate-submission';

package/src/styles/base/index.scss

@@ -6,4 +6,10 @@
 @import 'flex';
 @import 'fonts';
 @import 'grid';
+@import 'radius';
+@import 'ratings';
+@import 'spacing';
 @import 'variables';
+
+// components
+@import 'components/index';

package/src/styles/icons/_icon-classes-fill.scss

@@ -260,3 +260,9 @@
 		content: '\e916';
 	}
 }
+
+.icon-fill-phone-ringing {
+	&::before {
+		content: '\e917';
+	}
+}

package/src/styles/icons/_icon-classes-stroke.scss

@@ -422,3 +422,116 @@
 		content: '\e942';
 	}
 }
+
+.icon-stroke-vanity {
+	&::before {
+		content: '\e943';
+	}
+}
+
+.icon-stroke-basement-waterproofing {
+	&::before {
+		content: '\e944';
+	}
+}
+
+.icon-stroke-foundation-repair {
+	&::before {
+		content: '\e945';
+	}
+}
+
+.icon-stroke-tree-services {
+	&::before {
+		content: '\e946';
+	}
+}
+
+.icon-stroke-dollar-circle {
+	&::before {
+		content: '\e947';
+	}
+}
+
+.icon-stroke-best {
+	&::before {
+		content: '\e948';
+	}
+}
+
+.icon-stroke-heart {
+	&::before {
+		content: '\e949';
+	}
+}
+
+.icon-stroke-insulation {
+	&::before {
+		content: '\e94a';
+	}
+}
+
+.icon-stroke-water-treatment {
+	&::before {
+		content: '\e94b';
+	}
+}
+
+.icon-stroke-garage {
+	&::before {
+		content: '\e94c';
+	}
+}
+
+.icon-stroke-restoration {
+	&::before {
+		content: '\e94d';
+	}
+}
+
+.icon-stroke-fire-damage {
+	&::before {
+		content: '\e94e';
+	}
+}
+
+.icon-stroke-mold-damage {
+	&::before {
+		content: '\e94f';
+	}
+}
+
+.icon-stroke-sewage-damage {
+	&::before {
+		content: '\e950';
+	}
+}
+
+.icon-stroke-water-damage {
+	&::before {
+		content: '\e951';
+	}
+}
+
+.icon-stroke-compass {
+	&::before {
+		content: '\e952';
+	}
+}
+
+.icon-stroke-crawlspace {
+	&::before {
+		content: "\e953";
+	}
+}
+
+.icon-stroke-fencing {
+	&::before {
+		content: "\e954";
+	}
+}
+.icon-stroke-deck {
+	&::before {
+		content: "\e955";
+	}
+}