mod-base 1.0.65-beta.3 → 1.0.65-beta.4

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 1.0.65
 
-- Updated dark mode color for checkbox disclaimer
+- Updated dark mode colors for review cards
 
 ## 1.0.64
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.65-beta.3",
+    "version": "1.0.65-beta.4",
     "description": "Base Styles for S3 Sites",
     "author": "",
     "license": "ISC"

package/src/styles/templates/_dark-mode.scss

@@ -71,6 +71,16 @@ $contact-us-blue-light: #8498E7;
 	$radio-btn-text-color: $color-grey-300,
 	$radio-btn-standard-checked-background-color: $background,
 	$radio-btn-standard-hover-select-background-color: null,
+	// Reviews — Active card
+	$reviews-card-active-author-border-color: null,
+	$reviews-card-active-star-color: null,
+	$reviews-card-active-verified-color: #54ADFF,
+	// Reviews — Inactive card
+	$reviews-card-inactive-author-border-color: null,
+	$reviews-card-inactive-background: #272627,
+	$reviews-card-inactive-star-color: null,
+	$reviews-card-inactive-text-color: rgba($foreground, .3),
+	$reviews-card-inactive-verified-color: null,
 	$tcpa-color: lighten($color-grey-500, 2%),
 	$value-props-background: null
 	) {
@@ -96,6 +106,34 @@ $contact-us-blue-light: #8498E7;
 		$theme: $base-color !global;
 	}
 
+	@if $reviews-card-active-star-color == null {
+		@if $theme != null {
+			$reviews-card-active-star-color: $theme;
+		} @else {
+			$reviews-card-active-star-color: $color-grey-900;
+		}
+	}
+
+	@if $reviews-card-active-author-border-color == null {
+		@if $theme != null {
+			$reviews-card-active-author-border-color: $theme;
+		} @else {
+			$reviews-card-active-author-border-color: $color-grey-900;
+		}
+	}
+
+	@if $reviews-card-inactive-star-color == null {
+		$reviews-card-inactive-star-color: rgba($reviews-card-active-star-color, .3);
+	}
+
+	@if $reviews-card-inactive-verified-color == null {
+		$reviews-card-inactive-verified-color: rgba($reviews-card-active-verified-color, .3);
+	}
+
+	@if $reviews-card-inactive-author-border-color == null {
+		$reviews-card-inactive-author-border-color: rgba($reviews-card-active-author-border-color, .3);
+	}
+
 	@if ($checkbox-label-color == null) {
 		$checkbox-label-color: $text-color;
 	}
@@ -105,7 +143,7 @@ $contact-us-blue-light: #8498E7;
 	}
 
 	// Most common selectors list
-	$content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.select,.hiw-block__title,.hiw-card__title,.hiw-card__description,.banner__title,.banner__description,.accordion__title,.reviews__title,.accordion .expand-collapse__toggle,.accordion__content p,.result__title,.result__subtitle,.result__call-text';
+	$content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.select,.hiw-block__title,.hiw-card__title,.hiw-card__description,.banner__title,.banner__description,.accordion__title,.reviews__title,.accordion .expand-collapse__toggle,.accordion__content p,.accordion__content li,.result__title,.result__subtitle,.result__call-text';
 	$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,&.form-in-progress:not(.fixed-width-desktop) .hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control,.accordion,.hiw-block,.reviews';
 
 	@media (prefers-color-scheme: dark){
@@ -128,54 +166,33 @@ $contact-us-blue-light: #8498E7;
 				color: $checkbox-label-color;
 			}
 
-			.checkbox__disclaimer {
-				color: $color-grey-500;
-			}
-
 			.checkbox--multi-select-options {
 				.checkbox__label-text {
 					color: $color-grey-300;
 				}
-		
+
 				label {
 					input[type="checkbox"] {
-						&::before {
-							background: transparent;
-							border: 1px solid $radio-btn-border-color;
+						&:not(:checked) {
+							&::before {
+								background: transparent;
+								border: 1px solid $color-grey-500;
+							}
 						}
-		
+
 						~ .checkbox__label-text {
 							&::before {
-								border: 1px solid $radio-btn-border-color;
+								border: 1px solid $color-grey-500;
 							}
 						}
-		
+
 						&:active,
+						&:focus,
 						&:hover,
-						&:focus-visible {
-							&::before {
-								background: $radio-btn-standard-hover-select-background-color;
-								border: 1px solid $radio-btn-standard-hover-select-background-color;
-							}
-						}
-		
 						&:checked {
 							~ .checkbox__label-text {
 								&::before {
-									border: 1px solid $radio-btn-checked-border-color;
-								}
-							}
-		
-							&::before {
-								background: $radio-btn-checked-border-color;
-								border: 1px solid $radio-btn-checked-border-color;
-							}
-						}
-
-						&:focus-visible {
-							~ .checkbox__label-text {
-								&::before {
-									border: 1px solid $radio-btn-checked-border-color;
+									border: 1px solid $radio-btn-standard-hover-select-background-color;
 								}
 							}
 						}
@@ -483,7 +500,7 @@ $contact-us-blue-light: #8498E7;
 			.reviews-card {
 				background-color: $background;
 				border-color: $color-grey-700;
-				box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
+				box-shadow: none;
 				color: $text-color;
 
 				&__avatar img {
@@ -491,7 +508,7 @@ $contact-us-blue-light: #8498E7;
 				}
 
 				&__author-name {
-					border-color: $color-grey-600;
+					border-color: $reviews-card-active-author-border-color;
 				}
 
 				&__review,
@@ -500,11 +517,29 @@ $contact-us-blue-light: #8498E7;
 					color: $text-color;
 				}
 
+				.star-rating__icons {
+					.stars-filled {
+						color: $reviews-card-active-star-color;
+					}
+				}
+
 				.star-rating__stars {
 					&::before {
 						color: $color-grey-800;
 					}
 				}
+
+				&__verified {
+					color: $reviews-card-active-verified-color;
+				}
+			}
+
+			@if $color-btn != null {
+				.swiper-controls {
+					.icon {
+						@include btnStyles($color-btn, $color-btn-text);
+					}
+				}
 			}
 
 			.matched,
@@ -976,6 +1011,30 @@ $contact-us-blue-light: #8498E7;
 					}
 				}
 			}
+
+			@include breakpoint-lg {
+				.reviews-card {
+					&:not(.swiper-slide-active) {
+						background-color: $reviews-card-inactive-background;
+						.reviews-card {
+							&__review,
+							&__author {
+								color: $reviews-card-inactive-text-color;
+							}
+							&__author-name {
+								border-color: $reviews-card-inactive-author-border-color;
+							}
+							&__verified {
+								color: $reviews-card-inactive-verified-color;
+							}
+						}
+						.star-rating__text,
+						.stars-filled {
+							color: $reviews-card-inactive-star-color;
+						}
+					}
+				}
+			}
 			// To load additional site-level style blocks
 			@content;
 		}