Clean up CSS for project alerts and flash notifications.

While working on https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/965 I've needed to implement yet another potential alert strip for the top of the projects page, and there is a problem with the CSS margins and background colors used which expect the alert messages to come in a specific order and in specific permutations. I would like to genericize this by striping the colors and applying margins based on CSS pseudo-selectors for adjacent alerts so we can add or remove alerts in the future without hassle.

I'd suggest moving the bottom margin to a :last-child selector (or add it to a wrapper element) and using something like .alert + .alert { background: $foo; } .alert + .alert + .alert { background: darken($foo, 10%); } to apply the color gradation.