From b6ea27dfa667347238ac147389a68571e3e84be2 Mon Sep 17 00:00:00 2001
From: Joao Fernandes <joao.fernandes@docker.com>
Date: Mon, 10 Apr 2017 10:28:43 -0700
Subject: [PATCH] Adds style for warnings and notes

---
 _scss/_notes.scss | 35 +++++++++++++++++++++++++++++++++++
 css/style.scss    |  1 +
 test.md           | 33 +++++++++++++++++++++------------
 3 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 _scss/_notes.scss

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
new file mode 100644
index 0000000000..31ac9db7ba
--- /dev/null
+++ b/_scss/_notes.scss
@@ -0,0 +1,35 @@
+/*
+* Infos, notes, and warnings
+*/
+
+$info-color: #1488C6;
+$warning-color: #aa6708;
+$danger-color: #ce4844;
+
+blockquote {
+  border-left-color: $info-color;
+}
+
+blockquote > p:first-child {
+  margin-top: 0;
+}
+
+blockquote > p > strong {
+  color: $info-color;
+}
+
+blockquote.warning {
+  border-left-color: $warning-color;
+}
+
+blockquote.warning > p > strong {
+  color: $warning-color;
+}
+
+blockquote.danger {
+  border-left-color: $danger-color;
+}
+
+blockquote.danger > p > strong {
+  color: $danger-color;
+}
diff --git a/css/style.scss b/css/style.scss
index 55fbded9d0..7116b195d1 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -15,3 +15,4 @@
 @import "github";
 @import "overrides";
 @import "mobile";
+@import "notes";
diff --git a/test.md b/test.md
index 0e40f06234..7ea3781a9a 100644
--- a/test.md
+++ b/test.md
@@ -358,20 +358,31 @@ Bootstrap JS are loaded.
 
 ## Admonitions (notes)
 
-> **Note**: This is a note.
+> **Note**: This is a note using the old note style
 
-> **Info**: This is an info.
+> **This is a note using the new style**
+>
+> And you include a small description here telling users to be on the lookout
 
-> **Tip**: This is a tip.
+> **Be careful out there**
+>
+> Add the `warning` class to your blockquotes if you want to tell users
+> to be careful about something.
+{: .warning}
 
-> **Warning**: This is a warning.
+> **Ouch, don't do that!**
+>
+> Use the `danger` class to let people know this is dangerous or they
+> should pay close attention to this part of the road.
+>
+> You can also add more paragraphs here if your explanation is
+> super complex.
+{: .danger}
 
-> **Caution**: This is a caution.
 
-> **Note**: One line of note text
-> another line of note text
-
-> **Note**: This is a note with a list and a table in it.
+> **This is a crazy note**
+>
+> This note has tons of content in it:
 >
 > - List item 1
 > - List item 2
@@ -383,6 +394,7 @@ Bootstrap JS are loaded.
 >
 > And another sentence to top it all off.
 
+
 ## Comments
 
 You can use XML style comments, which show up in the HTML "view source", or
@@ -548,6 +560,3 @@ authorizedkeys:
   volumes:
     /root:/user:rw
 ```
-
-
-