fix: cap height & font-size scaling for Progress Bar

Codeinwp · Aug 11, 2023 · d2e299b · d2e299b
1 parent ccae01a
commit d2e299b
Showing 1 changed file with 15 additions and 29 deletions.
diff --git a/src/blocks/blocks/progress-bar/style.scss b/src/blocks/blocks/progress-bar/style.scss
@@ -189,34 +189,20 @@ html[amp] {
 
 @media ( max-width: 600px ) {
 	.wp-block-themeisle-blocks-progress-bar {
-		.wp-block-themeisle-blocks-progress-bar__area {
-			font-size: 20px;
-			height: 30px;
+		:is(
+			.wp-block-themeisle-blocks-progress-bar__area,
+			.wp-block-themeisle-blocks-progress-bar__area__title,
+			.wp-block-themeisle-blocks-progress-bar__area__title span,
+			.wp-block-themeisle-blocks-progress-bar__progress,
+			.wp-block-themeisle-blocks-progress-bar__area__bar,
+			.wp-block-themeisle-blocks-progress-bar__progress__append 
+		) {
+				height: clamp(0px, var(--height), 45px);
+				font-size: clamp(0px, var(--font-size), 24px);
 		}
-
-		.wp-block-themeisle-blocks-progress-bar__area__title {
-			font-size: 20px;
-			height: 30px;
-
-			span {
-				font-size: 20px;
-				height: 30px;
-			}
-		}
-
-		.wp-block-themeisle-blocks-progress-bar__progress {
-			font-size: 20px;
-			height: 30px;
-		}
-
-		.wp-block-themeisle-blocks-progress-bar__area__bar {
-			font-size: 20px;
-			height: 30px;
-		}
-
-		.wp-block-themeisle-blocks-progress-bar__progress__append {
-			font-size: 20px;
-			height: 30px;
+
+		:is(.wp-block-themeisle-blocks-progress-bar__outer__title, .wp-block-themeisle-blocks-progress-bar__outer__value) {
+			font-size: clamp(0px, var(--title-font-size), 24px);
 		}
-	}
-}
+	} 
+}