Aligning icons, text, action buttons to be on the same level

Author: ollips

css/src/components/banner.scss

@@ -1,8 +1,13 @@
+$banner-min-height: 50px !default;
 $banner-background: $secondary-background !default;
 $banner-padding-block: 0.75em !default;
 
 $banner-gap: $spacer-3 !default;
-$banner-icon-block-spacing: 0.2em !default;
+
+$banner-icon-size: 1.145em !default;
+$banner-icon-block-spacing: 0.35em !default;
+
+$banner-content-block-spacing: 0.3em !default;
 
 $banner-color: $text !default;
 $banner-font-size: $font-size-8 !default;
@@ -18,6 +23,7 @@ $banner-border-width: $border-width !default;
 	display: grid;
 	position: relative;
 	align-items: flex-start;
+	min-height: $banner-min-height;
 	outline-color: $text;
 	background-color: $banner-background;
 	color: $banner-color;
@@ -60,9 +66,10 @@ $banner-border-width: $border-width !default;
 			@include loader;
 
 			position: absolute;
-			inset-block-start: $banner-padding-block;
-			inset-inline-start: $layout-gap;
 			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;
@@ -92,12 +99,18 @@ $banner-border-width: $border-width !default;
 
 		p {
 			max-width: $reading-max-width;
+
+			&:first-child {
+				margin-block-start: $banner-content-block-spacing;
+			}
 		}
 	}
 
 	.banner-icon {
-		grid-area: icon;
 		flex-shrink: 0;
+		font-size: $banner-icon-size;
+		line-height: 1;
+		grid-area: icon;
 		margin-inline-end: $banner-gap;
 	}
 

css/src/components/notification.scss

@@ -1,9 +1,13 @@
+$notification-min-height: 50px !default;
 $notification-background: $secondary-background !default;
 $notification-padding-block: 0.75em !default;
 $notification-padding-inline: 0.85em !default;
-
 $notification-gap: $spacer-3 !default;
-$notification-icon-block-spacing: 0.2em !default;
+
+$notification-icon-size: 1.145em !default;
+$notification-icon-block-spacing: 0.35em !default;
+
+$notification-content-block-spacing: 0.3em !default;
 
 $notification-color: $text !default;
 $notification-font-size: $font-size-8 !default;
@@ -18,6 +22,7 @@ $notification-border-radius: $border-radius !default;
 	display: grid;
 	position: relative;
 	align-items: flex-start;
+	min-height: $notification-min-height;
 	border: $notification-border-width solid $notification-border-color;
 	border-radius: $notification-border-radius;
 	outline-color: $text;
@@ -62,9 +67,10 @@ $notification-border-radius: $border-radius !default;
 			@include loader;
 
 			position: absolute;
-			inset-block-start: $notification-padding-block;
-			inset-inline-start: $notification-padding-inline;
 			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;
 		}
 	}
 
@@ -76,6 +82,10 @@ $notification-border-radius: $border-radius !default;
 			margin-inline-end: $notification-gap;
 		}
 
+		p:first-child {
+			margin-block-start: $notification-content-block-spacing;
+		}
+
 		a:not(.button) {
 			text-decoration: underline;
 
@@ -90,8 +100,10 @@ $notification-border-radius: $border-radius !default;
 	}
 
 	.notification-icon {
-		grid-area: icon;
 		flex-shrink: 0;
+		font-size: $notification-icon-size;
+		line-height: 1;
+		grid-area: icon;
 		margin-inline-end: $notification-gap;
 	}