Animate priority notifications [nice-to-have]

[thevoiceofzeke]

MUMUP-3006: "As a user, I'd like a smoother experience when dismissing priority notifications, so that I can see the action happening, rather than just a disappearing bar."

In this PR:

• Added animations for appearance/dismissal of priority notifications
• Adjusted design of priority notifications to be more attractive (hopefully)
• Made a little more room for options buttons in app-header
• Adjusted some z-indexes so not to overlay Angular Material modals
• Adjusted confusing CSS dealing with fixed-positioned elements
• Username in user menu no longer all caps, first letter capitalized instead
• Added LESS variables for 5 levels of depth (per material design)
• Renamed some LESS variables so not to tie them to specific HTML elements

Demo

Screenshots

Priority notifications

Modal depth fix

Username menu

---

Contributor License Agreement adherence:

• This Contribution is under the terms of Individual Contributor License Agreements (and also Corporate Contributor License Agreements to the extent applicable) appearing in the Apereo CLA roster.

[davidmsibley]

What's this about?

[thevoiceofzeke]

It's necessary to change the case of the username in the menu. It has to be programmatically changed to lowercase because the CSS text-transform: capitalize has no effect on capital letters. I figured using this with CSS is less overkill than making a custom filter.