From 1655359a98060e0ca8944e526f589ceb260db773 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 14:56:39 +0100
Subject: [PATCH] Add new purple alert type

---
 _scss/_notes.scss | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index b5bb40fd7d..fd68e77df1 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -2,6 +2,25 @@
 
 //noinspection CssNoGenericFontName
 
+/*
+
+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;
@@ -33,7 +52,7 @@ blockquote {
   body.night & {
     // DARK THEME
 
-    &:not(.important):not(.warning) {
+    &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
         $left-border-color: #367AC2,
@@ -62,12 +81,22 @@ blockquote {
         $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"
+      );
+    }
   }
 
   body:not(.night) & {
     // LIGHT THEME
 
-    &:not(.important):not(.warning) {
+    &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
         $left-border-color: #367ac2,
@@ -96,6 +125,16 @@ blockquote {
         $icon: "\f057"
       );
     }
+
+    &.restricted {
+      @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"
+      );
+    }
   }
 }