Tweak impl status styling

* Make the font smaller to make them less prominent and help visually
  associate the callout with the list.
* Decrease the top margin to more clearly associate them with their
  preceding header.
* Lighten the callout background when in another callout to make it
  more visible.
* Animate the expand button.

helpers/sass_helpers.rb

@@ -328,7 +328,7 @@ module SassHelpers
 
     if block_given?
       # Get rid of extra whitespace to avoid more bogus <p> tags.
-      concat(content_tag :div, _render_markdown(_capture {yield}).strip, class: 'sl-c-callout')
+      concat(content_tag :div, _render_markdown(_capture {yield}).strip, class: 'sl-c-callout sl-c-callout--impl-status')
     end
   end
 

source/assets/css/components/_callouts.scss

@@ -23,6 +23,16 @@
     }
   }
 
+  &--impl-status {
+    font-size: 0.8em;
+    margin-top: -1rem;
+    padding: 0.8rem;
+
+    .sl-c-callout & {
+      background: lighten($sl-color--pale-sky, 53%);
+    }
+  }
+
   > *:first-child { margin-top: 0; }
 
   > *:last-child { margin-bottom: 0; }

source/assets/css/components/_lists.scss

@@ -63,4 +63,21 @@
 
     &:first-child { padding-left: 0; }
   }
+
+  &.impl-status {
+    font-size: 0.8em;
+    margin-top: -1em;
+
+    a {
+      transition: transform 0.1s;
+      border-bottom: none;
+      background: none;
+      cursor: pointer;
+      width: 19px;
+      text-align: center;
+      transform-origin: 8px 11px;
+
+      &.expanded { transform: rotate(90deg); }
+    }
+  }
 }

source/assets/js/sass.js

@@ -83,7 +83,7 @@ $(function() {
     details.hide();
     expandLink.click(function() {
       details.toggle();
-      expandLink.text(expandLink.text() == "▶" ? "▼" : "▶");
+      expandLink.toggleClass("expanded");
     });
   });
 });