SWED-2335 add mobile styles for labels

SwedbankPay · Apr 10, 2024 · d9699e4 · d9699e4
1 parent 16d4c60
commit d9699e4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/less/components/form.less b/src/less/components/form.less
@@ -232,14 +232,20 @@ legend {
 	}
 }
 
+// typography here comes from typography `h4, .h4` (in typography.less)
 .form-group {
 	label {
-		font-size: 1.25rem;
-		line-height: 1.875rem;
+		font-size: 1.125rem;
+		line-height: 1.625rem;
 		margin-bottom: 0.5rem;
 		color: var(--brand-secondary);
 		font-family: var(--brand-headline);
 		font-weight: var(--font-weight-header, 400);
+
+		@media screen and (min-width: @screen-sm-min) {
+			font-size: 1.25rem;
+			line-height: 1.875rem;
+		}
 	}
 
 	&.small {

diff --git a/src/less/core/typography.less b/src/less/core/typography.less
@@ -118,6 +118,7 @@ h3,
 	}
 }
 
+// any change here should also be applied to `.form-group label` (in form.less)
 h4,
 .h4 {
 	font-family: var(--brand-headline);
@@ -319,6 +320,7 @@ blockquote,
 		}
 	}
 
+	// any change here should also be applied to `.form-group label` (in form.less)
 	h4,
 	.h4 {
 		font-size: 1.25rem;
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,6 +118,7 @@ h3, @@
     	}
     }
+    // any change here should also be applied to `.form-group label` (in form.less)
     h4,
     .h4 {
     	font-family: var(--brand-headline);
@@ Expand Down Expand Up / @@ -319,6 +320,7 @@ blockquote, @@
     		}
     	}
+    	// any change here should also be applied to `.form-group label` (in form.less)
     	h4,
     	.h4 {
     		font-size: 1.25rem;
@@ Expand Down @@