Merge pull request #13158 from mark-dr/restyle-alerts

Restyle notification banners

_scss/_night-mode.scss

@@ -68,19 +68,6 @@ body.night {
         background-color: #344658;
         border: 1px solid #192837;
     }
-    blockquote {
-        color: $note-color-night;
-        background: $note-bg-color-night;
-        &.warning, &.warning p:first-child {
-            color: $warning-color-night !important;
-        }
-        &.important {
-            border-left-color: #f5ac45 !important;
-        }
-        &.important, &.important p:first-child {
-            color: $important-color-night !important;
-        }
-    }
     table {
         border: 1px solid #1b1a1a;
         color: #cbdbe6;

_scss/_notes.scss

@@ -1,51 +1,137 @@
 //noinspection CssNoGenericFontName
-blockquote {
+
-  background-color:  $note-bg-color;
+/*
-  border-left-color: $note-color;
+
+These rules control the display of notes/notifications/alerts. They can be used like so:
+
+> **This is a paid feature**
+>
+> Docker Hub Vulnerability Scanning is available for developers subscribed to a Pro or a Team plan. For more information about the pricing plans, see [Docker Pricing](https://www.docker.com/pricing?utm_source=docker&utm_medium=webreferral&utm_campaign=docs_driven_upgrade)
+{: .restricted }
+
+(The first line is always treated as a header, unless it's the only line)
+
+The available classes are:
+
+.important: Yellow
+.warning: Red/orange
+.restricted: Purple, used to indicate features that require paid plans
+[no class]: Blue, the default
+
+*/
+
+@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
+  background-color:  $bg-color;
+  border-left-color: $left-border-color;
   font-size:         unset; // override bootstrap font-size for blockquotes
 
-  > p:first-child {
+  // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
-    color:       $note-color;
+  // but we have some notes that don't have headers; if there's only one child of the note,
+  // assume it's not a header
+  > p:first-child:not(:only-child) {
+    color:       $header-color;
     font-weight: 700;
     margin-top:  0;
 
     &::before {
       font-family: FontAwesome;
-      content:     "\f058 \00a0";
+      content:     "#{$icon} \00a0";
     }
   }
 
-  // Maintain backwards compatibility with old note style
+  > p:only-child, > p:not(:first-child) {
-  > p:only-child {
+    color: $body-text-color;
-    color:       inherit;
+  }
-    font-weight: inherit;
+}
 
-    &::before {
+
-      content: none;
+
+blockquote {
+  body.night & {
+    // DARK THEME
+
+    &:not(.important):not(.warning):not(.restricted) {
+      @include notification(
+        $bg-color: change-color($marine-10, $alpha: 0.2),
+        $left-border-color: $blue-80,
+        $header-color: $marine-10,
+        $body-text-color: $marine-10,
+        $icon: "\f058"
+      );
+    }
+
+    &.important {
+      @include notification(
+        $bg-color: change-color($orange-60, $alpha: 0.4),
+        $left-border-color: $orange-90,
+        $header-color: $orange-20,
+        $body-text-color: $orange-20,
+        $icon: "\f06a"
+      );
+    }
+
+    &.warning {
+      @include notification(
+        $bg-color: change-color($red-60, $alpha: 0.3),
+        $left-border-color: $red-40,
+        $header-color: $red-10,
+        $body-text-color: $red-10,
+        $icon: "\f057"
+      );
+    }
+
+    &.restricted {
+      @include notification(
+        $bg-color: change-color($purple-60, $alpha: 0.44),
+        $left-border-color: $purple-70,
+        $header-color: $purple-10,
+        $body-text-color: $purple-10,
+        $icon: "\f135"
+      );
     }
   }
 
-  &.important {
+  body:not(.night) & {
-    border-left-color: $important-color;
+    // LIGHT THEME
 
-    > p:first-child {
+    &:not(.important):not(.warning):not(.restricted) {
-      color: $important-color;
+      @include notification(
-
+        $bg-color: change-color($marine-10, $alpha: 0.2),
-      &::before {
+        $left-border-color: $blue-80,
-        content: "\f06a  \00a0";
+        $header-color: $blue-80,
-      }
+        $body-text-color: inherit,
+        $icon: "\f058"
+      );
     }
-  }
 
-  &.warning {
+    &.important {
-    border-left-color: $warning-color;
+      @include notification(
+        $bg-color: change-color($orange-10, $alpha: 0.4),
+        $left-border-color: $orange-90,
+        $header-color: $orange-90,
+        $body-text-color: inherit,
+        $icon: "\f06a"
+      );
+    }
 
-    > p:first-child {
+    &.warning {
-      color: $warning-color;
+      @include notification(
+        $bg-color: change-color($red-10, $alpha: 0.2),
+        $left-border-color: $red-40,
+        $header-color: $red-40,
+        $body-text-color: inherit,
+        $icon: "\f057"
+      );
+    }
 
-      &::before {
+    &.restricted {
-        content: "\f057  \00a0";
+      @include notification(
-      }
+        $bg-color: change-color($purple-20, $alpha: 0.2),
+        $left-border-color: $purple-70,
+        $header-color: $purple-50,
+        $body-text-color: inherit,
+        $icon: "\f135"
+      );
     }
   }
 }