fix(error-message): moved error-message style to a separate file and …

…changed font size
volunteers-for-city-projects · Dec 22, 2023 · fc28433 · fc28433
1 parent ed9cdc8
commit fc28433
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 311 deletions.
diff --git a/src/components/FormIncome/FormIncome.scss b/src/components/FormIncome/FormIncome.scss
@@ -1,4 +1,6 @@
 @import '../../style/variables.scss';
+@import '../Input/ErrorMessage.scss';
+
 .form-income {
 	box-sizing: border-box;
 	width: 100%;
@@ -39,7 +41,6 @@
 			width: 345px;
 			margin-top: 12px;
 		}
-		.error-message,
 		.text-area_error-message {
 			font-size: 15px;
 			font-style: normal;

diff --git a/src/components/Input/ErrorMessage.scss b/src/components/Input/ErrorMessage.scss
@@ -0,0 +1,65 @@
+@import '../../style/variables.scss';
+
+.error-message {
+	display: block;
+	margin-top: 8px;
+	color: $--Wrong;
+	font: {
+		family: $--Font-Primary;
+		size: 15px;
+		weight: 400;
+		style: normal;
+	}
+	line-height: 17px; /* 113.333% */
+	word-wrap: break-word;
+	text-overflow: ellipsis;
+	white-space: pre-wrap;
+	// overflow: hidden;
+
+	&_type-mini {
+		width: 280px;
+		height: 14px;
+	}
+
+	&_type-small {
+		width: 400px;
+
+		@media screen and (max-width: 1919px) {
+			width: 280px;
+		}
+	}
+
+	&_type-medium {
+		width: 380px;
+		max-height: 16px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		// overflow: hidden;
+	}
+
+	&_type-large {
+		width: 540px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	&_type-extra-large {
+		width: 760px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	&_type-photo {
+		width: 280px;
+		height: 14px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+
+		@media screen and (max-width: 1919px) {
+			width: 14px;
+		}
+	}
+}
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
@@ -1,4 +1,5 @@
 @import '../../style/variables.scss';
+@import './ErrorMessage.scss';
 
 .label {
 	display: block;
@@ -134,69 +135,6 @@
 	}
 }
 
-.error-message {
-	display: block;
-
-	margin-top: 8px;
-	color: $--Wrong;
-	font: {
-		family: 'Fira Sans', sans-serif;
-		size: 20px;
-		weight: 400;
-		style: normal;
-	}
-	line-height: 23px; /* 115% */
-
-	word-wrap: break-word;
-
-	text-overflow: ellipsis;
-	white-space: pre-wrap;
-	// overflow: hidden;
-
-	&_type-mini {
-		width: 280px;
-		height: 14px;
-	}
-
-	&_type-small {
-		width: 400px;
-	}
-
-	&_type-medium {
-		width: 380px;
-		max-height: 16px;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		// overflow: hidden;
-	}
-
-	&_type-large {
-		width: 540px;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-
-	&_type-extra-large {
-		width: 760px;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-
-	&_type-photo {
-		width: 280px;
-		height: 14px;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-}
-
 @media screen and (max-width: 1919px) {
 	.label {
 		display: block;
@@ -331,67 +269,4 @@
 			display: none;
 		}
 	}
-
-	.error-message {
-		display: block;
-
-		margin-top: 8px;
-		color: $--Wrong;
-		font: {
-			family: 'Fira Sans', sans-serif;
-			size: 20px;
-			weight: 400;
-			style: normal;
-		}
-		line-height: 23px; /* 115% */
-
-		word-wrap: break-word;
-
-		text-overflow: ellipsis;
-		white-space: pre-wrap;
-		// overflow: hidden;
-
-		&_type-mini {
-			width: 280px;
-			height: 14px;
-		}
-
-		&_type-small {
-			width: 280px;
-		}
-
-		&_type-medium {
-			width: 380px;
-			max-height: 16px;
-
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			// overflow: hidden;
-		}
-
-		&_type-large {
-			width: 540px;
-
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-		&_type-extra-large {
-			width: 760px;
-
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-		&_type-photo {
-			width: 280px;
-			height: 14px;
-
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-	}
 }