Merge branch '25743-clean-up-css-for-project-alerts-and-flash-notifications' into 'master' 25428-sort-order-for-pipeline-build-lists-doesn-t-properly-handle-numbers

Resolve "Clean up CSS for project alerts and flash notifications."

## What does this MR do?

Cleans up CSS and html for alert stripes at the top of project pages.

## Screenshots

#### Before:

![Screen_Shot_2016-12-16_at_2.39.01_PM_copy](/uploads/6a700cf1e41557c00cdaef40f6a2a5b2/Screen_Shot_2016-12-16_at_2.39.01_PM_copy.png)

#### After:

![Screen_Shot_2016-12-16_at_2.39.23_PM_copy](/uploads/c849578becc3a634e8b15ab5340d86a2/Screen_Shot_2016-12-16_at_2.39.23_PM_copy.png)

## Are there points in the code the reviewer needs to double check?

In order to get multiple alerts to appear manually while testing, I simply added the following block to [app/views/shared/_no_password.html.haml](app/views/shared/_no_password.html.haml):

```

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'

.no-password-message.alert.alert-warning.hidden-xs
  You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account

  .pull-right
    = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
    |
    = link_to 'Remind later', '#', class: 'hide-no-password-message'
```


## Why was this MR needed?

More alert-warning stripes are coming via the CI usage limits implementation in EE (https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/965), and these layout margins and colors were becoming messy.

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] ~~[Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)~~
- [ ] ~~API support added~~
- Tests
  - [ ] ~~Added for this feature/bug~~
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #25743

See merge request !8151

5 files changed, 43 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 66711aa1804..59fae61a44f 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -32,6 +32,41 @@ body {
   }
 }
 
+.alert-wrapper {
+  margin-bottom: $gl-padding;
+
+  .alert {
+    margin-bottom: 0;
+  }
+
+  /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
+  .alert-warning {
+    transition: background-color 0.15s, border-color 0.15s;
+    background-color: lighten($gl-warning, 4%);
+    border-color: lighten($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
+
+  .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 4%);
+    border-color: darken($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 8%);
+    border-color: darken($gl-warning, 8%);
+  }
+
+  .alert-warning:only-of-type {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
+}
+
 
 /* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch,
 which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9b4d09c0576..d0c27d64239 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -474,7 +474,6 @@ $project-option-descr-color: #54565b;
 $project-breadcrumb-color: #999;
 $project-private-forks-notice-odd: #2aa056;
 $project-network-controls-color: #888;
-$project-limit-message-bg: #f28d35;
 
 /*
 * Runners
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 9c3dbc58ae0..3b1b375133d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -6,12 +6,6 @@
   }
 }
 
-.no-ssh-key-message,
-.project-limit-message {
-  background-color: $project-limit-message-bg;
-  margin-bottom: 0;
-}
-
 .new_project,
 .edit-project {
 
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index a9a0b149049..54d02ee8e4b 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -22,9 +22,10 @@
         = render "layouts/nav/#{nav}"
   .content-wrapper{ class: "#{layout_nav_class}" }
     = yield :sub_nav
-    = render "layouts/broadcast"
-    = render "layouts/flash"
-    = yield :flash_message
+    .alert-wrapper
+      = render "layouts/broadcast"
+      = render "layouts/flash"
+      = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
         = yield
diff --git a/changelogs/unreleased/25743-clean-up-css-for-project-alerts-and-flash-notifications.yml b/changelogs/unreleased/25743-clean-up-css-for-project-alerts-and-flash-notifications.yml
new file mode 100644
index 00000000000..0a81124de0d
--- /dev/null
+++ b/changelogs/unreleased/25743-clean-up-css-for-project-alerts-and-flash-notifications.yml
@@ -0,0 +1,4 @@
+---
+title: fix colors and margins for adjacent alert banners
+merge_request: 8151
+author: