mod-base 1.0.49 → 1.0.50

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.50
+
+- Adding dark mode styles for our new, standardized circular radio button style
+
 ## 1.0.49
 
 - Adding dark mode selectors for backgrounds of `.accordion`, `.hiw-block`, `.reviews` and also adding few more `$content-selectors`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.49",
+    "version": "1.0.50",
     "description": "Base Styles for S3 Sites",
     "author": "",
     "license": "ISC"

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

@@ -56,16 +56,21 @@ $contact-us-blue-light: #8498E7;
 	$logo-filter: invert(1) hue-rotate(180deg),
 	$partners-logo-filter: grayscale(1) invert(.9),
 	$radio-btn-background-color: $background,
-	$radio-btn-border-color: $color-grey-300,
+	$radio-btn-border-color: $color-grey-500,
 	$radio-btn-checked-background-color: null,
 	$radio-btn-checked-border-color: null,
 	$radio-btn-checked-icon-background-color: null,
 	$radio-btn-checked-icon-color: $color-grey-300,
 	$radio-btn-checked-text-color: $color-grey-300,
+	$radio-btn-hover-background-color: $radio-btn-background-color,
+	$radio-btn-hover-border-color: $radio-btn-border-color,
+	$radio-btn-hover-icon-background-color: null,
 	$radio-btn-focus-box-shadow: null,
 	$radio-btn-icon-background: transparent,
 	$radio-btn-icon-color: $background,
 	$radio-btn-text-color: $color-grey-300,
+	$radio-btn-standard-checked-background-color: $background,
+	$radio-btn-standard-hover-select-background-color: null,
 	$tcpa-color: lighten($color-grey-500, 2%),
 	$value-props-background: null
 	) {
@@ -95,6 +100,12 @@ $contact-us-blue-light: #8498E7;
 		$checkbox-label-color: $text-color;
 	}
 
+	@if ($radio-btn-checked-border-color != null and $radio-btn-standard-hover-select-background-color == null) {
+		$radio-btn-standard-hover-select-background-color: lighten($radio-btn-checked-border-color, 5%);
+	} @else {
+		$radio-btn-standard-hover-select-background-color: lighten($radio-btn-border-color, 5%);
+	}
+
 	// 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';
 	$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control,.accordion,.hiw-block,.reviews';
@@ -724,6 +735,71 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
+			// "Standardized" Radio Buttons (with circular select)
+			.radio__button {
+				label {
+					input[type='radio'] {
+						&:hover {
+							&:not(:checked) + .radio__button-select {
+								background-color: $radio-btn-standard-hover-select-background-color;
+								border-color: $radio-btn-standard-hover-select-background-color;
+
+								&::after {
+									background-color: $radio-btn-hover-background-color;
+								}
+
+								+ span {
+									color: $radio-btn-checked-text-color;
+
+									&::before {
+										background-color: $radio-btn-hover-background-color;
+										border-color: $radio-btn-hover-border-color;
+									}
+								}
+							}
+						}
+
+						&:not(:hover,:checked) {
+							+ .radio__button-select {
+								background-color: $radio-btn-background-color;
+								border-color: $radio-btn-border-color;
+
+								&::after {
+									background-color: $radio-btn-background-color;
+								}
+
+								+ span {
+									color: $radio-btn-text-color;
+
+									&::before {
+										background-color: $radio-btn-background-color;
+										border-color: $radio-btn-border-color;
+									}
+								}
+							}
+						}
+
+						&:checked + .radio__button-select {
+							background-color: $radio-btn-checked-border-color;
+
+							&::after {
+								background-color: $radio-btn-standard-checked-background-color;
+								color: $radio-btn-checked-text-color;
+							}
+
+							+ span {
+								color: $radio-btn-checked-text-color;
+
+								&::before {
+									background-color: $radio-btn-standard-checked-background-color;
+									border-color: $radio-btn-checked-border-color;
+								}
+							}
+						}
+					}
+				}
+			}
+
 			// Ketch Preference dashboard styles
 			#lanyard_root * {
 				background-color: $color-black !important;