docs: Adjust the note and warning callout design (#14605)

Danilo Leal created 2 years ago

So they're more consistent and polished. Felt like they could be a bit more refined.

---

Release Notes:

- N/A

Change summary

docs/theme/css/general.css   | 62 ++++++++++++++++++++++++++++---------
docs/theme/css/variables.css |  6 ++-
2 files changed, 50 insertions(+), 18 deletions(-)

Detailed changes

docs/theme/css/general.css

@@ -202,37 +202,67 @@ table tbody tr:nth-child(2n) {
 }
 
 blockquote {
-  margin: 20px 0;
-  padding: 0 20px;
+  margin: auto;
+  margin-top: 1rem;
+  padding: 1rem 1.25rem;
   color: var(--fg);
   background-color: var(--quote-bg);
-  border-block-start: 0.1em solid var(--quote-border);
-  border-block-end: 0.1em solid var(--quote-border);
+  border: 1px solid var(--quote-border);
 }
 
-.warning {
-  margin: 20px;
-  padding: 0 20px;
-  border-inline-start: 2px solid var(--warning-border);
+blockquote > p {
+  margin: 0;
+  padding-left: 2.6rem;
+  font-size: 1.4rem;
 }
 
-.warning:before {
+blockquote:before {
   position: absolute;
-  width: 3rem;
-  height: 3rem;
-  margin-inline-start: calc(-1.5rem - 21px);
   content: "ⓘ";
-  text-align: center;
-  background-color: var(--bg);
-  color: var(--warning-border);
+  margin: 0.3rem 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  font-size: 1.6rem;
   font-weight: bold;
-  font-size: 2rem;
+  color: var(--icons);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.625em;
 }
 
 blockquote .warning:before {
   background-color: var(--quote-bg);
 }
 
+.warning {
+  margin: auto;
+  padding: 1rem 1.25rem;
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+}
+
+.warning > p {
+  margin: 0;
+  padding-left: 2.6rem;
+  font-size: 1.4rem;
+}
+
+.warning:before {
+  position: absolute;
+  content: "ⓘ";
+  margin: 0.3rem 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+  color: var(--warning-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.625em;
+}
+
 kbd {
   background-color: rgba(8, 76, 207, 0.1);
   border-radius: 4px;

docs/theme/css/variables.css

@@ -35,9 +35,11 @@
   --theme-hover: #e6e6e6;
 
   --quote-bg: hsl(197, 37%, 96%);
-  --quote-border: hsl(197, 37%, 91%);
+  --quote-border: hsl(197, 37%, 88%);
 
-  --warning-border: #ff8e00;
+  --warning-border: hsl(25, 100%, 85%);
+  --warning-bg: hsl(42, 100%, 60%, 0.1);
+  --warning-icon: hsl(42, 100%, 30%);
 
   --table-border-color: hsl(219, 93%, 42%, 0.15);
   --table-header-bg: hsl(0, 0%, 80%);