fix(progress-bar): radius when having headings (#963)

Automattic · May 18, 2021 · 8347362 · 8347362
1 parent 460728d
commit 8347362
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/assets/components/src/progress-bar/index.js b/assets/components/src/progress-bar/index.js
@@ -58,11 +58,13 @@ class ProgressBar extends Component {
 					</div>
 				) }
 
-				<div
-					className="newspack-progress-bar__bar"
-					style={ barStyle }
-					data-testid="progress-bar-indicator"
-				/>
+				<div className="newspack-progress-bar__container">
+					<div
+						className="newspack-progress-bar__bar"
+						style={ barStyle }
+						data-testid="progress-bar-indicator"
+					/>
+				</div>
 			</div>
 		);
 	}

diff --git a/assets/components/src/progress-bar/style.scss b/assets/components/src/progress-bar/style.scss
@@ -7,39 +7,36 @@
 
 .newspack-progress-bar {
 	margin: 32px 0;
-	position: relative;
-	z-index: 1;
-	border-radius: 4px;
-	overflow: hidden;
 
-	.newspack-progress-bar__headings {
+	& &__headings {
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 8px;
 
 		h2,
 		p {
-			margin: 0;
+			margin-bottom: 0;
+			margin-top: 0;
 		}
+
+		p {
+			margin-left: auto;
+		}
+	}
+
+	&__container {
+		background-color: $light-gray-200;
+		border-radius: 4px;
+		height: 8px;
+		overflow: hidden;
+		position: relative;
+		z-index: 1;
 	}
 
-	.newspack-progress-bar__bar {
+	&__bar {
 		background-color: $primary-500;
+		height: 8px;
 		transition: width 125ms ease-in-out;
-
-		&,
-		&::before {
-			height: 8px;
-		}
-
-		&::before {
-			background-color: $light-gray-200;
-			content: '';
-			left: 0;
-			position: absolute;
-			width: 100%;
-			z-index: -1;
-		}
 	}
 }