callout - better margins for collapsed and contentless callouts

Author: cscheid

src/resources/filters/customnodes/callout.lua

@@ -40,6 +40,7 @@ function _callout_main()
     -- the first heading is the title
     local div = pandoc.Div({})
     local c = quarto.utils.as_blocks(node.content)
+    local has_content = #c > 0
     if pandoc.utils.type(c) == "Blocks" then
       div.content:extend(c)
     else
@@ -100,6 +101,10 @@ function _callout_main()
     local imgPlaceholder = pandoc.Plain({pandoc.RawInline("html", "<i class='callout-icon" .. noicon .. "'></i>")});       
     local imgDiv = pandoc.Div({imgPlaceholder}, pandoc.Attr("", {"callout-icon-container"}));
 
+    if not has_content then
+      calloutDiv.attr.classes:insert("callout-empty-content")
+    end
+
     -- show a titled callout
     if title ~= nil and (pandoc.utils.type(title) == "string" or next(title) ~= nil) then
 
@@ -123,6 +128,7 @@ function _callout_main()
         local expandedAttrVal = "true"
         if collapse == "true" or collapse == true then
           expandedAttrVal = "false"
+          headerDiv.attr.classes:insert("collapsed")
         end
 
         -- create the collapse button

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1381,6 +1381,8 @@ kbd,
 .callout.callout-style-simple .callout-body {
   font-size: 0.9rem;
   font-weight: 400;
+  margin-bottom: -0.4em;
+  margin-top: 0.5em;
 }
 
 .callout.callout-style-default .callout-body {
@@ -1397,6 +1399,15 @@ kbd,
   margin-bottom: -0.2em;
 }
 
+.callout.callout-empty-content > .callout-header {
+  margin-bottom: 0em;
+  border-bottom-right-radius: add($border-radius, -1px);
+}
+
+.callout > .callout-header.collapsed {
+  border-bottom-right-radius: add($border-radius, -1px);
+}
+
 .callout.callout-style-simple > div.callout-header {
   border-bottom: none;
   font-size: 0.9rem;
@@ -1411,6 +1422,7 @@ kbd,
   font-size: 0.9rem;
   padding-left: 0.5em;
   padding-right: 0.5em;
+  border-top-right-radius: add($border-radius, -1px);
 }
 
 .callout.callout-style-default .callout-body {