Fixing loading icon positioning

microsoft · Jan 23, 2025 · 3d7c9a9 · 3d7c9a9
1 parent 12212dd
commit 3d7c9a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 24 deletions.
diff --git a/css/src/components/banner.scss b/css/src/components/banner.scss
@@ -58,22 +58,10 @@ $banner-border-width: $border-width !default;
 	&.is-loading {
 		color: transparent;
 
-		> :first-child {
-			margin-inline-start: 1.75em;
-		}
-
 		&::before {
 			@include loader;
 
-			position: absolute;
 			border-color: transparent transparent $banner-color $banner-color;
-			font-size: $banner-icon-size;
-			inset-block-start: calc($banner-padding-block + $banner-icon-block-spacing);
-			inset-inline-start: $layout-gap;
-
-			@include widescreen {
-				inset-inline-start: $layout-widescreen-gap;
-			}
 		}
 	}
 
@@ -106,7 +94,8 @@ $banner-border-width: $border-width !default;
 		}
 	}
 
-	.banner-icon {
+	.banner-icon,
+	&.is-loading::before {
 		flex-shrink: 0;
 		font-size: $banner-icon-size;
 		line-height: 1;
@@ -122,7 +111,8 @@ $banner-border-width: $border-width !default;
 	}
 
 	.banner-icon,
-	.banner-dismiss {
+	.banner-dismiss,
+	&.is-loading::before {
 		margin-block-start: $banner-icon-block-spacing;
 	}
 }
diff --git a/css/src/components/notification.scss b/css/src/components/notification.scss
@@ -59,18 +59,10 @@ $notification-border-radius: $border-radius !default;
 	&.is-loading {
 		color: transparent;
 
-		> :first-child {
-			margin-inline-start: 1.75em;
-		}
-
 		&::before {
 			@include loader;
 
-			position: absolute;
 			border-color: transparent transparent $notification-color $notification-color;
-			font-size: $notification-icon-size;
-			inset-block-start: calc($notification-padding-block + $notification-icon-block-spacing);
-			inset-inline-start: $notification-padding-inline;
 		}
 	}
 
@@ -99,7 +91,8 @@ $notification-border-radius: $border-radius !default;
 		}
 	}
 
-	.notification-icon {
+	.notification-icon,
+	&.is-loading::before {
 		flex-shrink: 0;
 		font-size: $notification-icon-size;
 		line-height: 1;
@@ -115,7 +108,8 @@ $notification-border-radius: $border-radius !default;
 	}
 
 	.notification-icon,
-	.notification-dismiss {
+	.notification-dismiss,
+	&.is-loading::before {
 		margin-block-start: $notification-icon-block-spacing;
 	}
 }