sets full-page alert banner to center align, adds ::backdrop

[markconroy]

Closes localgovdrupal/localgov_base#580

What does this change?

We have - in localgov_base - a CSS property for

*,
*::before,
*::after {
  margin-top: 0;
}

This means in localgov_base our full page alert banner is placed horizontally centered, but vertically at the top since the default margin: auto for dialog is overridden.

It's worse for localgov_scarfolk since we have an override to say

.localgov-alert-banner {
  margin: var(--spacing);
}

This means the alert banner is at the top left of the page, with 1rem of spacing around it.

This PR adds the default margin: auto back to the alert banner if the banner is a dialog element.

It also adds a ::backdrop property so we can have the rest of the page faded out behind the dialog.

How to test

Create a full page alert banner, be delighted.

Images

Before:

After:

---

Thanks to Big Blue Door for sponsoring my time to work on this.

[andybroomfield]

@markconroy Do you want to target this as a bugfix release to 1.7 or as part of the 1.8 refactor?

[markconroy]

I don't mind which really. It will affect both versions so probably worth committing to one version and cherry picking to the other.

[andybroomfield]

I think this should go in full screen alert banner module, not the main stylesheet.

/modules/localgov_alert_banner_full_page/css/full-page-alert-banner-layout.css or full-page-alert-banner-theme.css.

[andybroomfield]

Seems fine in Olleivo though, so @markconroy are we sure we don't want to place this in localgov_base instead.
Note: one of the refactor plans is to make CSS optional, so it could be that localgov_base disables the alert banner styles and provides it's own anyway?

[andybroomfield]

Noting the PHPStan fail is fixed in the 1.8.x branch.

[markconroy]

Good idea, let's move this to localgov_base