Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 65 deletions

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) {