Merge pull request #247 from newfold-labs/bugfix/primary-width

Fix primary site type width and some clamps
newfold-labs · Jun 5, 2023 · 2e1da29 · 2e1da29
2 parents 3d9202d + 7c2aa68
commit 2e1da29
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 57 deletions.
diff --git a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss
@@ -3,17 +3,9 @@
 	background-color: var(--wp-admin-theme-color-darker-10);
 	padding: 16px;
 	width: 90%;
-	font-size: clamp(0.7rem, 1.2vw, 1.4em);
+	font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem);
 	font-weight: 500;
 	border-radius: 4px;
 	border: none;
 	outline: 1px solid transparent;
-
-	@media (max-width: #{($break-medium)}) {
-		padding: 24px 32px;
-	}
-
-	@media (min-width: 2600px) {
-		font-size: clamp(2.81rem, -0.48vw + 2.93rem, 1.78rem);
-	}
-}
+}
diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss
@@ -3,60 +3,27 @@
 	font-weight: 700;
 	line-height: 1.25;
 	text-align: center;
-	font-size: clamp(1.5rem, 1.82vw + 1.05rem, 2.5rem);
-
-	@media (max-width: #{($break-medium)}) {
-		font-size: clamp(1rem, 3.5vw, 1.2rem);
-		margin: 10px;
-	}
-
-	@media (min-width: 2600px) {
-		font-size: clamp(1rem, 2.44vw + 0.39rem, 6.25rem);
-		margin: 40px;
-	}
+	font-size: clamp(1rem, 0.81rem + 0.92vw, 3.125rem);
 }
 
 .nfd-step-card-subheading {
 	margin: 5px;
 	font-weight: 700;
 	color: var(--wp-admin-theme-color);
-	font-size: clamp(1rem, 0.91vw + 0.77rem, 1.5rem);
+	font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem);
 	text-align: center;
 	line-height: 1;
-
-	@media (min-width: #{ ($break-medium)}) {
-		padding-bottom: 30px;
-	}
-
-	@media (min-width: 2600px) {
-		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
-		margin: 80px;
-	}
 }
 
 .nfd-step-card-subheading-other {
 	font-weight: 700;
 	margin-top: 35px;
 	color: var(--wp-admin-theme-color);
-	font-size: clamp(0.8rem, 2.5vw, 1.2rem);
-	@media (max-width: #{($break-medium)}) {
-		margin: 3px;
-		font-size: clamp(0.7rem, 2.2vw, 1.2rem);
-	}
-
-	@media (min-width: 2600px) {
-		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
-		margin: 80px;
-	}
+	font-size: clamp(1rem, 0.93rem + 0.32vw, 1.75rem);
 }
 
 .nfd-step-card-question {
 	margin: 18px;
-	font-size: clamp(1rem, 2vw, 1.8rem);
-
-	@media (min-width: 2600px) {
-		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
-		font-weight: 700;
-		margin: 60px;
-	}
+	font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem);
+	line-height: 1.2;
 }
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss
@@ -12,7 +12,7 @@
 		color: var(--nfd-onboarding-black);
 		background: var(--nfd-onboarding-base-gray);
 		font-weight: 350;
-		font-size: clamp(0.8rem, 1.5vw, 1.2rem);
+		font-size: clamp(1rem, 0.92rem + 0.38vw, 1.875rem);
 		line-height: 1.5;
 		margin: 5px;
 		white-space: nowrap;
@@ -21,11 +21,6 @@
 			padding-right: 100px;
 		}
 
-		@media (min-width: 3700px) {
-			font-size: clamp(3.7rem, -0.27vw + 3.5rem, 3rem);
-			margin: 25px;
-			font-weight: 360;
-		}
 	}
 
 	&-tabs input:checked + label {

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss
@@ -15,7 +15,7 @@
 	&-categories {
 		margin-top: 3rem;
 		margin-bottom: 1rem;
-		width: 50vw;
+		width: 40vw;
 		text-align: center;
 	}
 
@@ -38,14 +38,13 @@
 
 			&-input {
 				width: 30vw;
-				height: 5.5vh;
 				font-size: 16px;
 				font-weight: 300;
 				margin: 0 1rem 1.5rem 1rem;
 				padding: 8px 16px !important;
 
 				&::placeholder {
-					font-size: 15px;
+					font-size: 16px;
 				}
 
 				@media (max-width: #{($break-medium - 1)}) {