Add latest changes from gitlab-org/gitlab@master

3 files changed, 28 insertions, 71 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index c9b00e5ff27..885e9ac6667 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -282,8 +282,7 @@ pre code {
   white-space: pre-wrap;
 }
 
-.alert,
-.flash-notice {
+.alert {
   border-radius: 0;
 }
 
@@ -310,12 +309,10 @@ pre code {
 .alert-success,
 .alert-info,
 .alert-warning,
-.alert-danger,
-.flash-notice {
+.alert-danger {
   color: $white-light;
 
   h4,
-  a:not(.btn),
   .alert-link {
     color: $white-light;
   }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 8fc2fd5f53b..657e7023111 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -1,7 +1,7 @@
 $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
 
 .flash-container {
-  margin: 0;
+  margin-top: 10px;
   margin-bottom: $gl-padding;
   font-size: 14px;
   position: relative;
@@ -12,17 +12,22 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     position: -webkit-sticky;
     top: $flash-container-top;
     z-index: 251;
+  }
 
-    .flash-content {
-      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
-    }
+  &.flash-container-page {
+    margin-bottom: 0;
+  }
+
+  &:empty {
+    margin: 0;
   }
 
   .close-icon-wrapper {
-    padding: ($gl-btn-padding + $gl-padding-4) $gl-padding $gl-btn-padding;
+    padding: ($gl-padding + $gl-padding-4) $gl-padding $gl-padding;
     position: absolute;
     right: 0;
     top: 0;
+    bottom: 0;
     cursor: pointer;
 
     .close-icon {
@@ -31,13 +36,11 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     }
   }
 
-  .flash-notice,
   .flash-alert,
+  .flash-notice,
   .flash-success,
   .flash-warning {
-    border-radius: $border-radius-default;
-    color: $white-light;
-    padding-right: $gl-padding * 2;
+    padding: $gl-padding $gl-padding-32 $gl-padding ($gl-padding + $gl-padding-4);
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -45,75 +48,31 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     }
   }
 
-  .flash-notice {
-    @extend .alert;
-    background-color: $blue-500;
-    margin: 0;
-
-    &.flash-notice-persistent {
-      background-color: $blue-100;
-      color: $gl-text-color;
+  .flash-alert {
+    background-color: $red-100;
+    color: $red-700;
+  }
 
-      a {
-        color: $blue-600;
+  .flash-notice {
+    background-color: $blue-100;
+    color: $blue-700;
+  }
 
-        &:hover {
-          color: $blue-800;
-          text-decoration: none;
-        }
-      }
-    }
+  .flash-success {
+    background-color: $theme-green-100;
+    color: $green-700;
   }
 
   .flash-warning {
-    @extend .alert;
     background-color: $orange-100;
-    color: $orange-900;
+    color: $orange-800;
     cursor: default;
-    margin: 0;
   }
 
   .flash-text,
   .flash-action {
     display: inline-block;
   }
-
-  .flash-alert {
-    @extend .alert;
-    background-color: $red-500;
-    margin: 0;
-
-    .flash-action {
-      margin-left: 5px;
-      text-decoration: none;
-      font-weight: $gl-font-weight-normal;
-      border-bottom: 1px solid;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  .flash-success {
-    @extend .alert;
-    background-color: $green-500;
-    margin: 0;
-  }
-
-  &.flash-container-page {
-    margin-bottom: 0;
-
-    .flash-notice,
-    .flash-alert,
-    .flash-success {
-      border-radius: 0;
-    }
-  }
-
-  &:empty {
-    margin: 0;
-  }
 }
 
 @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 7205324e86f..8038a367fb9 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -33,7 +33,8 @@ body {
   &.limit-container-width {
     .flash-container.sticky {
       max-width: $limited-layout-width;
-      margin: 0 auto;
+      margin-right: auto;
+      margin-left: auto;
     }
   }
 }