Merge pull request kubernetes#30068 from sftim/20211013_use_docsy_alerts

Use Docsy alert classes

assets/scss/_custom.scss

@@ -313,33 +313,40 @@ main {
 
 // blockquotes and callouts
 
-.td-content, body {
-  blockquote.callout {
+body {
+  .alert {
+    // Override Docsy styles
     padding: 0.4rem 0.4rem 0.4rem 1rem;
-    border: 1px solid #eee;
-    border-left-width: 0.5em;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-radius: 0.25em;
+    border-left-width: 0.5em; // fallback in case calc() is missing
     background: #fff;
     color: #000;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }
-  blockquote.callout {
-    border-radius: calc(1em/3);
+  // Set minimum width and radius for alert color
+  .alert {
+      border-left-width: calc(max(0.5em, 4px));
+      border-top-left-radius: calc(max(0.5em, 4px));
+      border-bottom-left-radius: calc(max(0.5em, 4px));
   }
-  .callout.caution {
+  .alert.callout.caution {
     border-left-color: #f0ad4e;
   }
-
-  .callout.note {
+  .alert.callout.note {
     border-left-color: #428bca;
   }
-
-  .callout.warning {
+  .alert.callout.warning {
     border-left-color: #d9534f;
   }
+  .alert.third-party-content {
+    border-left-color: #444;
+  }
 
-
-  h1:first-of-type + blockquote.callout {
+  h1:first-of-type + .alert.callout {
     margin-top: 1.5em;
   }
 }
@@ -367,7 +374,7 @@ main {
   background: #f8f9cb;
 }
 
-.deprecation-warning {
+.deprecation-warning, .pageinfo.deprecation-warning {
     padding: 20px;
     margin: 20px 0;
     background-color: #faf5b6;

layouts/partials/deprecation-warning.html

@@ -1,6 +1,6 @@
 {{ if (.Site.Param "deprecated") }}
 <section id="deprecation-warning">
-  <div class="content deprecation-warning">
+  <div class="content deprecation-warning pageinfo">
     <h3>
       {{ T "deprecation_title" }} {{ .Param "version" }}
     </h3>

layouts/shortcodes/caution.html

@@ -1,3 +1,3 @@
-<blockquote class="caution callout">
-  <div><strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
+<div class="alert alert-warning caution callout" role="alert">
+  <strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>

layouts/shortcodes/note.html

@@ -1,3 +1,3 @@
-<blockquote class="note callout">
-  <div><strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
+<div class="alert alert-info note callout" role="alert">
+  <strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>

layouts/shortcodes/warning.html

@@ -1,3 +1,4 @@
-<blockquote class="warning callout">
-  <div><strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
+<div class="alert alert-danger warning callout" role="alert">
+  <strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>
+