style(notification): Fix layout falling apart when message becomes multi-line (#200)

itsdevdom · web-flow · commit 2c2851180e65 · 2021-03-10T23:50:47.000+01:00
Related to #154. Closes #149.
diff --git a/projects/angular-notifier-demo/src/app/app.component.ts b/projects/angular-notifier-demo/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component, ViewChild } from '@angular/core';
-
 import { NotifierService } from 'angular-notifier';
 
 /**
diff --git a/projects/angular-notifier-demo/src/app/app.module.ts b/projects/angular-notifier-demo/src/app/app.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { NotifierModule, NotifierOptions } from 'angular-notifier';
 
 import { AppComponent } from './app.component';
diff --git a/projects/angular-notifier/src/styles/core.scss b/projects/angular-notifier/src/styles/core.scss
@@ -21,7 +21,8 @@
   }
 
   &__notification {
-    display: block;
+    display: flex;
+    align-items: center;
     position: fixed; // Overlay
     visibility: hidden; // Notifications are hidden by default, and get shown (or animated in) dynamically by the Angular component
     z-index: 10000; // Pretty much random ...

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { Component, ViewChild } from '@angular/core';`
`2`		`-`
`3`	`2`	`import { NotifierService } from 'angular-notifier';`
`4`	`3`
`5`	`4`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,8 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`&__notification {`
`24`		`- display: block;`
	`24`	`+ display: flex;`
	`25`	`+ align-items: center;`
`25`	`26`	`position: fixed; // Overlay`
`26`	`27`	`visibility: hidden; // Notifications are hidden by default, and get shown (or animated in) dynamically by the Angular component`
`27`	`28`	`z-index: 10000; // Pretty much random ...`