More polish on the expandable contexts

4 files changed, 18 insertions, 13 deletions

diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index a5916681..e8ff5765 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -99,11 +99,11 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }
 #source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }
-#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: .25em .5em; margin: -.25em 0; }
+#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
 #source p input:checked ~ .r label.ctx::before { content: "▼ "; }
-#source p input:checked ~ .ctxs { display: block; }
+#source p input:checked ~ .ctxs { padding: .25em .5em; overflow-y: scroll; max-height: 10.5em; }
 #source p label.ctx { color: #999; display: inline-block; padding: 0 .5em; font-size: .8333em; }
-#source p .ctxs { display: none; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; padding: .25em .5em; border-radius: .25em; margin-right: 1.75em; }
+#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }
 #source p .ctxs span { display: block; text-align: right; }
 
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index 619c428c..901cccc4 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -417,7 +417,7 @@ $context-panel-color: #aaeeff;
                 background: $context-panel-color;
                 color: #666;
                 border-radius: .75em .75em 0 0;
-                padding: .25em .5em;
+                padding: 0 .5em;
                 margin: -.25em 0;
                 &::before {
                     content: "▼ ";
@@ -425,7 +425,9 @@ $context-panel-color: #aaeeff;
             }
 
             &:checked ~ .ctxs {
-                display: block;
+                padding: .25em .5em;
+                overflow-y: scroll;
+                max-height: 10.5em;
             }
         }
 
@@ -437,11 +439,14 @@ $context-panel-color: #aaeeff;
         }
 
         .ctxs {
-            display: none;
+            display: block;
+            max-height: 0;
+            overflow-y: hidden;
+            transition: all .2s;
+            padding: 0 .5em;
             font-family: verdana, sans-serif;
             white-space: nowrap;
             background: $context-panel-color;
-            padding: .25em .5em;
             border-radius: .25em;
             margin-right: 1.75em;
             span {
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index a5916681..e8ff5765 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -99,11 +99,11 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }
 #source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }
-#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: .25em .5em; margin: -.25em 0; }
+#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
 #source p input:checked ~ .r label.ctx::before { content: "▼ "; }
-#source p input:checked ~ .ctxs { display: block; }
+#source p input:checked ~ .ctxs { padding: .25em .5em; overflow-y: scroll; max-height: 10.5em; }
 #source p label.ctx { color: #999; display: inline-block; padding: 0 .5em; font-size: .8333em; }
-#source p .ctxs { display: none; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; padding: .25em .5em; border-radius: .25em; margin-right: 1.75em; }
+#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }
 #source p .ctxs span { display: block; text-align: right; }
 
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
diff --git a/tests/gold/html/support/style.css b/tests/gold/html/support/style.css
index a5916681..e8ff5765 100644
--- a/tests/gold/html/support/style.css
+++ b/tests/gold/html/support/style.css
@@ -99,11 +99,11 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }
 #source p input ~ .r label.ctx::before { content: "▶ "; }
 #source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }
-#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: .25em .5em; margin: -.25em 0; }
+#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
 #source p input:checked ~ .r label.ctx::before { content: "▼ "; }
-#source p input:checked ~ .ctxs { display: block; }
+#source p input:checked ~ .ctxs { padding: .25em .5em; overflow-y: scroll; max-height: 10.5em; }
 #source p label.ctx { color: #999; display: inline-block; padding: 0 .5em; font-size: .8333em; }
-#source p .ctxs { display: none; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; padding: .25em .5em; border-radius: .25em; margin-right: 1.75em; }
+#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }
 #source p .ctxs span { display: block; text-align: right; }
 
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }