mod-base 1.0.41 → 1.0.43-beta.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.43
+
+- Adjusting the dark mode styles just a bit + adding color adjustments for select dropdowns
+
+## 1.0.42
+
+- Adding duplicate submission styles
+
 ## 1.0.41
 
 - Add restoration icons
@@ -38,7 +46,7 @@
 
 ## 1.0.32
 
-- Updating `_fonts.scss` to clean up Sass Deprecation Warnings 
+- Updating `_fonts.scss` to clean up Sass Deprecation Warnings
 
 ## 1.0.31
 
@@ -76,13 +84,13 @@
 
 - Adding variables for our base typography (`h2`, `h3`, `body`) — so that our accessible components can use those instead of repeating values.
 
-## 1.0.18 
+## 1.0.18
 
 - Dark-mode updates: correct selectors list
 
 ## 1.0.17
 
-- Dark-mode updates: updated most common used selectors list 
+- Dark-mode updates: updated most common used selectors list
 
 ## 1.0.16
 

package/package.json

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

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

@@ -8,3 +8,6 @@
 @import 'grid';
 @import 'ratings';
 @import 'variables';
+
+// components
+@import 'components/index';

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

@@ -52,7 +52,7 @@ $contact-us-blue-light: #8498E7;
 	$form-focus-border-color: $color-grey-400,
 	$hero-content-box-shadow-mobile: null,
 	$interactive-text-color: $color-grey-500,
-	$interactive-text-color-hover: darken($interactive-text-color, 10%),
+	$interactive-text-color-hover: lighten($interactive-text-color, 20%),
 	$logo-filter: invert(1) hue-rotate(180deg),
 	$partners-logo-filter: grayscale(1) invert(.9),
 	$radio-btn-background-color: $background,
@@ -246,14 +246,16 @@ $contact-us-blue-light: #8498E7;
 				}
 
 				&:not(.has-error) {
-					.form-group__label-input {
+					.form-group__label-input,
+					.select {
 						color: $color-grey-500;
 						z-index: 1;
 					}
 
 					.form-input,
 					.form-input-group--icon,
-					.form-radio label {
+					.form-radio label,
+					.select {
 						border-color: $color-grey-500;
 					}
 
@@ -293,6 +295,7 @@ $contact-us-blue-light: #8498E7;
 
 			.has-error {
 				.form-input,
+				.select,
 				.form-input:-webkit-autofill {
 					border-color: $color-salmon-500;
 					color: $color-salmon-500;
@@ -586,7 +589,7 @@ $contact-us-blue-light: #8498E7;
 			.zip-control__button {
 				&:hover,
 				&:focus {
-					background-color: rgba($color-grey-500, 10%);
+					color: $color-white;
 					outline-color: $color-grey-500;
 
 					.zip-control__location,