Fixing loading icon positioning

ollips · ollips · commit 3d7c9a905406 · 2025-01-23T15:55:03.000-08:00
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;
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -58,22 +58,10 @@ $banner-border-width: $border-width !default;`
`58`	`58`	`&.is-loading {`
`59`	`59`	`color: transparent;`
`60`	`60`
`61`		`- > :first-child {`
`62`		`- margin-inline-start: 1.75em;`
`63`		`- }`
`64`		`-`
`65`	`61`	`&::before {`
`66`	`62`	`@include loader;`
`67`	`63`
`68`		`- position: absolute;`
`69`	`64`	`border-color: transparent transparent $banner-color $banner-color;`
`70`		`- font-size: $banner-icon-size;`
`71`		`- inset-block-start: calc($banner-padding-block + $banner-icon-block-spacing);`
`72`		`- inset-inline-start: $layout-gap;`
`73`		`-`
`74`		`- @include widescreen {`
`75`		`- inset-inline-start: $layout-widescreen-gap;`
`76`		`- }`
`77`	`65`	`}`
`78`	`66`	`}`
`79`	`67`
`@@ -106,7 +94,8 @@ $banner-border-width: $border-width !default;`
`106`	`94`	`}`
`107`	`95`	`}`
`108`	`96`
`109`		`- .banner-icon {`
	`97`	`+ .banner-icon,`
	`98`	`+ &.is-loading::before {`
`110`	`99`	`flex-shrink: 0;`
`111`	`100`	`font-size: $banner-icon-size;`
`112`	`101`	`line-height: 1;`
`@@ -122,7 +111,8 @@ $banner-border-width: $border-width !default;`
`122`	`111`	`}`
`123`	`112`
`124`	`113`	`.banner-icon,`
`125`		`- .banner-dismiss {`
	`114`	`+ .banner-dismiss,`
	`115`	`+ &.is-loading::before {`
`126`	`116`	`margin-block-start: $banner-icon-block-spacing;`
`127`	`117`	`}`
`128`	`118`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,18 +59,10 @@ $notification-border-radius: $border-radius !default;`
`59`	`59`	`&.is-loading {`
`60`	`60`	`color: transparent;`
`61`	`61`
`62`		`- > :first-child {`
`63`		`- margin-inline-start: 1.75em;`
`64`		`- }`
`65`		`-`
`66`	`62`	`&::before {`
`67`	`63`	`@include loader;`
`68`	`64`
`69`		`- position: absolute;`
`70`	`65`	`border-color: transparent transparent $notification-color $notification-color;`
`71`		`- font-size: $notification-icon-size;`
`72`		`- inset-block-start: calc($notification-padding-block + $notification-icon-block-spacing);`
`73`		`- inset-inline-start: $notification-padding-inline;`
`74`	`66`	`}`
`75`	`67`	`}`
`76`	`68`
`@@ -99,7 +91,8 @@ $notification-border-radius: $border-radius !default;`
`99`	`91`	`}`
`100`	`92`	`}`
`101`	`93`
`102`		`- .notification-icon {`
	`94`	`+ .notification-icon,`
	`95`	`+ &.is-loading::before {`
`103`	`96`	`flex-shrink: 0;`
`104`	`97`	`font-size: $notification-icon-size;`
`105`	`98`	`line-height: 1;`
`@@ -115,7 +108,8 @@ $notification-border-radius: $border-radius !default;`
`115`	`108`	`}`
`116`	`109`
`117`	`110`	`.notification-icon,`
`118`		`- .notification-dismiss {`
	`111`	`+ .notification-dismiss,`
	`112`	`+ &.is-loading::before {`
`119`	`113`	`margin-block-start: $notification-icon-block-spacing;`
`120`	`114`	`}`
`121`	`115`	`}`