Merge pull request #23029 from sftim/20200808_improve_callout_styling

Improve styling for callouts

Author: k8s-ci-robot

assets/scss/_custom.scss

@@ -268,22 +268,34 @@ main {
 
 // blockquotes and callouts
 
-blockquote {
-  padding: 0.4rem 0.4rem 0.4rem 1rem !important;
-}
-
-// callouts are contained in static CSS as well. these require override.
+.td-content, body {
+  blockquote.callout {
+    padding: 0.4rem 0.4rem 0.4rem 1rem;
+    border: 1px solid #eee;
+    border-left-width: 0.5em;
+    background: #fff;
+    color: #000;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  blockquote.callout {
+    border-radius: calc(1em/3);
+  }
+  .callout.caution {
+    border-left-color: #f0ad4e;
+  }
 
-.caution {
-  border-left-color: #f0ad4e !important;
-}
+  .callout.note {
+    border-left-color: #428bca;
+  }
 
-.note {
-  border-left-color: #428bca !important;
-}
+  .callout.warning {
+    border-left-color: #d9534f;
+  }
 
-.warning {
-  border-left-color: #d9534f !important;
+  h1:first-of-type + blockquote.callout {
+    margin-top: 1.5em;
+  }
 }
 
 .deprecation-warning {

layouts/partials/css.html

@@ -16,7 +16,7 @@
 {{- end }}
 
 <link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
-<link rel="stylesheet" href="{{ "css/callouts.css" | relURL }}">
+<link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
 {{- if .Site.Params.announcement }}
 <link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">

layouts/shortcodes/caution.html

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

layouts/shortcodes/deprecationfilewarning.html

@@ -1,3 +1,3 @@
-<blockquote class="deprecation_file_warning">
+<blockquote class="deprecation_file_warning callout">
   <div><h4>{{ T "deprecation_file_warning" }}</h4> {{ .Inner | markdownify }}</div>
 </blockquote>

layouts/shortcodes/note.html

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

layouts/shortcodes/warning.html

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

static/css/callouts.css renamed to static/css/feature-states.css

@@ -1,24 +1,3 @@
-/* Callouts */
-.caution, .note, .warning {
-    padding: 20px;
-    margin: 20px 0;
-    border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
-}
-
-.caution {
-    border-left-color: #f0ad4e;
-}
-
-.note {
-    border-left-color: #428bca;
-}
-
-.warning {
-    border-left-color: #d9534f;
-}
-
 /* Feature States */
 
 .beta, .stable, .alpha, .deprecated {