fix: restore o-header buttons to design (#1916)

* fix: use square buttons on o-header * fix: fix text positioning on subscribe button, align ask ft padding to other buttons * fix: fix lint issues
Financial-Times · Jan 8, 2025 · cac2a4b · cac2a4b
1 parent f202d72
commit cac2a4b
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 12 deletions.
diff --git a/components/o-header/main.scss b/components/o-header/main.scss
@@ -70,6 +70,7 @@
 						'theme': 'mono',
 					)
 				);
+				border-radius: 0;
 			}
 		}
 

diff --git a/components/o-header/src/scss/_mixins.scss b/components/o-header/src/scss/_mixins.scss
@@ -123,7 +123,7 @@
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	padding: 6px 8px;
+	padding: 4px 8px;
 	color: _oHeaderGet('header-ask-ft-button-text');
 	background-color: _oHeaderGet('header-ask-ft-button-background');
 	border-radius: 4px;

diff --git a/components/o-header/src/scss/features/_drawer.scss b/components/o-header/src/scss/features/_drawer.scss
@@ -18,11 +18,7 @@
 			border-right: 1px solid _oHeaderGet('drawer-border');
 			// use a 2D transform because 3D are unsupported by IE9
 			transform: translateX(-100%);
-			transform: translate3d(
-				-100%,
-				0,
-				0
-			); // stylelint-disable-line declaration-block-no-duplicate-properties
+			transform: translate3d(-100%, 0, 0); // stylelint-disable-line declaration-block-no-duplicate-properties
 
 			// this is literally the specification example for will-change
 			will-change: transform;
@@ -38,11 +34,7 @@
 			&.o-header__drawer--open {
 				// use a 2D transform because 3D are unsupported by IE9
 				transform: translateX(0);
-				transform: translate3d(
-					0,
-					0,
-					0
-				); // stylelint-disable-line declaration-block-no-duplicate-properties
+				transform: translate3d(0, 0, 0); // stylelint-disable-line declaration-block-no-duplicate-properties
 			}
 		}
 	}
@@ -149,7 +141,7 @@
 	}
 
 	.o-header__drawer-button {
-		display: block;
+		width: 100%;
 	}
 
 	//
@@ -208,6 +200,7 @@
 				'size': 'big',
 			)
 		);
+		border-radius: 0;
 	}
 
 	//

diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss
@@ -66,6 +66,7 @@
 				'size': 'big',
 			)
 		);
+		border-radius: 0;
 		display: flex;
 		gap: 10px;
 		align-items: center;

diff --git a/components/o-header/src/scss/features/_transparent.scss b/components/o-header/src/scss/features/_transparent.scss
@@ -51,6 +51,7 @@
 					'theme': 'inverse',
 				)
 			);
+			border-radius: 0;
 		}
 
 		.o-header__nav-link,
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,6 +70,7 @@ @@
     						'theme': 'mono',
     					)
     				);
+    				border-radius: 0;
     			}
     		}
@@ Expand Down @@