diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb index d30b50b..b8bc826 100644 --- a/helpers/sass_helpers.rb +++ b/helpers/sass_helpers.rb @@ -328,7 +328,7 @@ module SassHelpers if block_given? # Get rid of extra whitespace to avoid more bogus
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 diff --git a/source/assets/css/components/_callouts.scss b/source/assets/css/components/_callouts.scss index 41e4836..b6443f4 100644 --- a/source/assets/css/components/_callouts.scss +++ b/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; } diff --git a/source/assets/css/components/_lists.scss b/source/assets/css/components/_lists.scss index 274eee8..ca4af12 100644 --- a/source/assets/css/components/_lists.scss +++ b/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); } + } + } } diff --git a/source/assets/js/sass.js b/source/assets/js/sass.js index e1c81bf..f20473e 100644 --- a/source/assets/js/sass.js +++ b/source/assets/js/sass.js @@ -83,7 +83,7 @@ $(function() { details.hide(); expandLink.click(function() { details.toggle(); - expandLink.text(expandLink.text() == "▶" ? "▼" : "▶"); + expandLink.toggleClass("expanded"); }); }); });