More sass goodness

3 files changed, 179 insertions, 224 deletions

diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index 643183a3..83966952 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -19,7 +19,6 @@ table tr.hidden { display: none !important; }
 p#no_rows { display: none; font-size: 1.2em; }
 
 a.nav { text-decoration: none; color: inherit; }
-
 a.nav:hover { text-decoration: underline; color: inherit; }
 
 #header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #eee; }
@@ -40,31 +39,20 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container { display: inline-block; float: right; margin: 0 2em 0 0; }
-
 #filter_container input { width: 10em; }
 
 h2.stats { margin-top: .5em; font-size: 1em; }
 
 .stats span { border: 1px solid; padding: .1em .25em; margin: 0 .1em; cursor: pointer; border-color: #999 #ccc #ccc #999; }
-
 .stats span.hide_run, .stats span.hide_exc, .stats span.hide_mis, .stats span.hide_par, .stats span.par.hide_run.hide_par { border-color: #ccc #999 #999 #ccc; }
-
 .stats span.par.hide_run { border-color: #999 #ccc #ccc #999; }
-
 .stats span.run { background: #ddffdd; }
-
 .stats span.exc { background: #eeeeee; }
-
 .stats span.mis { background: #ffdddd; }
-
 .stats span.hide_run { background: #eeffee; }
-
 .stats span.hide_exc { background: #f5f5f5; }
-
 .stats span.hide_mis { background: #ffeeee; }
-
 .stats span.par { background: #ffffaa; }
-
 .stats span.hide_par { background: #ffffcc; }
 
 #keyboard_icon { float: right; margin: 5px; cursor: pointer; }
@@ -80,15 +68,11 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #panel_icon { float: right; cursor: pointer; }
 
 .keyhelp { margin: .75em; }
-
 .keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: monospace; font-weight: bold; background: #eee; }
 
 .linenos p { text-align: right; margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; }
-
 .linenos p.highlight { background: #ffdd00; }
-
 .linenos p a { text-decoration: none; color: #999999; font-size: .8333em; line-height: 1em; }
-
 .linenos p a:hover { text-decoration: underline; color: #999999; }
 
 td.text { width: 100%; }
@@ -107,31 +91,22 @@ td.text { width: 100%; }
 .text p.hide_run:hover, .text p.hide_exc:hover, .text p.hide_mis:hover, .text p.hide_par:hover, .text p.hide_run.hide_par:hover { background: #f2f2f2; }
 
 .text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; }
-
 .text p.hide_par span.annotate { display: none; }
-
 .text span.annotate.long { display: none; }
-
 .text p:hover span.annotate.long { display: block; max-width: 50%; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; width: 30em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
 
 .text .com { color: green; font-style: italic; line-height: 1px; }
-
 .text .key { font-weight: bold; line-height: 1px; }
-
 .text .str { color: #000080; }
 
 td.contexts p { margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; white-space: nowrap; position: relative; }
-
 td.contexts p:hover { background: #eee; }
-
 td.contexts p span.context-list { display: none; }
-
 td.contexts p:hover span.context-list { display: block; min-width: 30em; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
+td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }
 
 span.context-list span.context-line { display: block; }
 
-td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }
-
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
 
 #index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
@@ -159,5 +134,4 @@ td.contexts p span.context-button { display: inline-block; cursor: pointer; font
 #index tr.file:hover td.name { text-decoration: underline; color: #000; }
 
 #scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: white; border-left: 1px solid #eee; will-change: transform; }
-
 #scroll_marker .marker { background: #eedddd; position: absolute; min-height: 3px; width: 100%; }
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index bc5a1503..168d6878 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -20,67 +20,68 @@ html, body, h1, h2, h3, p, table, td, th {
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
-    }
+}
 
 // Set baseline grid to 16 pt.
 body {
     font-family: georgia, serif;
     font-size: 1em;
-    }
+}
 
 html>body {
     font-size: 16px;
-    }
+}
 
 // Set base font size to 12/16
 p {
     font-size: .75em;           // 12/16
     line-height: 1.33333333em;  // 16/12
-    }
+}
 
 table {
     border-collapse: collapse;
-    }
+}
 td {
     vertical-align: top;
 }
 table tr.hidden {
     display: none !important;
-    }
+}
 
 p#no_rows {
     display: none;
     font-size: 1.2em;
-    }
+}
 
 a.nav {
     text-decoration: none;
     color: inherit;
+
+    &:hover {
+        text-decoration: underline;
+        color: inherit;
     }
-a.nav:hover {
-    text-decoration: underline;
-    color: inherit;
-    }
+}
 
 // Page structure
 #header {
     background: #f8f8f8;
     width: 100%;
     border-bottom: 1px solid #eee;
-    }
+}
 
 #source {
     padding: 1em;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    }
+}
 
 .indexfile #footer {
     margin: 1em 3em;
-    }
+}
 
 .pyfile #footer {
     margin: 1em 1em;
-    }
+}
 
 #footer .content {
     padding: 0;
@@ -88,16 +89,16 @@ a.nav:hover {
     font-family: verdana, sans-serif;
     color: #666666;
     font-style: italic;
-    }
+}
 
 #index {
     margin: 1em 0 0 3em;
-    }
+}
 
 /* Header styles */
 #header .content {
     padding: 1em 3em;
-    }
+}
 
 h1 {
     font-size: 1.25em;
@@ -108,9 +109,10 @@ h1 {
     display: inline-block;
     float: right;
     margin: 0 2em 0 0;
-}
-#filter_container input {
-    width: 10em;
+
+    input {
+        width: 10em;
+    }
 }
 
 h2.stats {
@@ -123,39 +125,38 @@ h2.stats {
     margin: 0 .1em;
     cursor: pointer;
     border-color: #999 #ccc #ccc #999;
-}
-.stats span.hide_run, .stats span.hide_exc,
-.stats span.hide_mis, .stats span.hide_par,
-.stats span.par.hide_run.hide_par {
-    border-color: #ccc #999 #999 #ccc;
-}
-.stats span.par.hide_run {
-    border-color: #999 #ccc #ccc #999;
-}
 
-.stats span.run {
-    background: #ddffdd;
-}
-.stats span.exc {
-    background: #eeeeee;
-}
-.stats span.mis {
-    background: #ffdddd;
-}
-.stats span.hide_run {
-    background: #eeffee;
-}
-.stats span.hide_exc {
-    background: #f5f5f5;
-}
-.stats span.hide_mis {
-    background: #ffeeee;
-}
-.stats span.par {
-    background: #ffffaa;
-}
-.stats span.hide_par {
-    background: #ffffcc;
+    &.hide_run, &.hide_exc, &.hide_mis, &.hide_par, &.par.hide_run.hide_par {
+        border-color: #ccc #999 #999 #ccc;
+    }
+    &.par.hide_run {
+        border-color: #999 #ccc #ccc #999;
+    }
+
+    &.run {
+        background: #ddffdd;
+    }
+    &.exc {
+        background: #eeeeee;
+    }
+    &.mis {
+        background: #ffdddd;
+    }
+    &.hide_run {
+        background: #eeffee;
+    }
+    &.hide_exc {
+        background: #f5f5f5;
+    }
+    &.hide_mis {
+        background: #ffeeee;
+    }
+    &.par {
+        background: #ffffaa;
+    }
+    &.hide_par {
+        background: #ffffcc;
+    }
 }
 
 // Help panel
@@ -193,15 +194,15 @@ h2.stats {
 
 .keyhelp {
     margin: .75em;
-}
 
-.keyhelp .key {
-    border: 1px solid black;
-    border-color: #888 #333 #333 #888;
-    padding: .1em .35em;
-    font-family: monospace;
-    font-weight: bold;
-    background: #eee;
+    .key {
+        border: 1px solid black;
+        border-color: #888 #333 #333 #888;
+        padding: .1em .35em;
+        font-family: monospace;
+        font-weight: bold;
+        background: #eee;
+    }
 }
 
 // Source file styles
@@ -211,24 +212,25 @@ h2.stats {
     padding: 0 .5em;
     color: #999999;
     font-family: verdana, sans-serif;
-}
-.linenos p.highlight {
-    background: #ffdd00;
-    }
-.linenos p a {
-    text-decoration: none;
-    color: #999999;
-    font-size: .8333em;   // 10/12
-    line-height: 1em;
+
+    &.highlight {
+        background: #ffdd00;
     }
-.linenos p a:hover {
-    text-decoration: underline;
-    color: #999999;
+    a {
+        text-decoration: none;
+        color: #999999;
+        font-size: .8333em;   // 10/12
+        line-height: 1em;
+        &:hover {
+            text-decoration: underline;
+            color: #999999;
+        }
     }
+}
 
 td.text {
     width: 100%;
-    }
+}
 
 $mis-color: #ffdddd;
 $run-color: #ddffdd;
@@ -299,93 +301,99 @@ $par-hover-color: mix($par-color, #000, $hover-dark-amt);
 }
 
 
-.text span.annotate {
-    font-family: georgia;
-    color: #666;
-    float: right;
-    padding-right: .5em;
-    }
-.text p.hide_par span.annotate {
-    display: none;
-    }
-.text span.annotate.long {
-    display: none;
-    }
-.text p:hover span.annotate.long {
-    display: block;
-    max-width: 50%;
-    white-space: normal;
-    float: right;
-    position: absolute;
-    top: 1.75em;
-    right: 1em;
-    width: 30em;
-    height: auto;
-    color: #333;
-    background: #ffffcc;
-    border: 1px solid #888;
-    padding: .25em .5em;
-    z-index: 999;
-    border-radius: .2em;
-    box-shadow: #cccccc .2em .2em .2em;
+.text {
+    span.annotate {
+        font-family: georgia;
+        color: #666;
+        float: right;
+        padding-right: .5em;
+    }
+    p.hide_par span.annotate {
+        display: none;
+    }
+    span.annotate.long {
+        display: none;
+    }
+    p:hover span.annotate.long {
+        display: block;
+        max-width: 50%;
+        white-space: normal;
+        float: right;
+        position: absolute;
+        top: 1.75em;
+        right: 1em;
+        width: 30em;
+        height: auto;
+        color: #333;
+        background: #ffffcc;
+        border: 1px solid #888;
+        padding: .25em .5em;
+        z-index: 999;
+        border-radius: .2em;
+        box-shadow: #cccccc .2em .2em .2em;
     }
+}
 
 // Syntax coloring
-.text .com {
-    color: green;
-    font-style: italic;
-    line-height: 1px;
+.text {
+    .com {
+        color: green;
+        font-style: italic;
+        line-height: 1px;
     }
-.text .key {
-    font-weight: bold;
-    line-height: 1px;
+    .key {
+        font-weight: bold;
+        line-height: 1px;
     }
-.text .str {
-    color: #000080;
+    .str {
+        color: #000080;
     }
+}
 
 // Line contexts
-td.contexts p {
-    margin: 0;
-    padding: 0 .5em;
-    color: #999999;
-    font-family: verdana, sans-serif;
-    white-space: nowrap;
-    position: relative;
-    }
-td.contexts p:hover {
-    background: #eee;
-    }
-td.contexts p span.context-list {
-    display: none;
-    }
-td.contexts p:hover span.context-list {
-    display: block;
-    min-width: 30em;
-    //max-width: 50%;
-    white-space: normal;
-    float: right;
-    position: absolute;
-    top: 1.75em;
-    right: 1em;
-    height: auto;
-    color: #333;
-    background: #ffffcc;
-    border: 1px solid #888;
-    padding: .25em .5em;
-    z-index: 999;
-    border-radius: .2em;
-    box-shadow: #cccccc .2em .2em .2em;
+td.contexts {
+    p {
+        margin: 0;
+        padding: 0 .5em;
+        color: #999999;
+        font-family: verdana, sans-serif;
+        white-space: nowrap;
+        position: relative;
+        &:hover {
+            background: #eee;
+        }
+        span.context-list {
+            display: none;
+        }
+        &:hover span.context-list {
+            display: block;
+            min-width: 30em;
+            white-space: normal;
+            float: right;
+            position: absolute;
+            top: 1.75em;
+            right: 1em;
+            height: auto;
+            color: #333;
+            background: #ffffcc;
+            border: 1px solid #888;
+            padding: .25em .5em;
+            z-index: 999;
+            border-radius: .2em;
+            box-shadow: #cccccc .2em .2em .2em;
+        }
+        span.context-button {
+            display: inline-block;
+            cursor: pointer;
+            font-size: .8333em;   // 10/12
+            line-height: 1em;
+        }
     }
+}
+
 span.context-list span.context-line {
     display: block;
-    }
-td.contexts p span.context-button {
-    display: inline-block;
-    cursor: pointer;
-    font-size: .8333em;   // 10/12
-    line-height: 1em;
-    }
+}
 
 // index styles
 #index td, #index th {
@@ -393,28 +401,28 @@ td.contexts p span.context-button {
     width: 5em;
     padding: .25em .5em;
     border-bottom: 1px solid #eee;
-    }
+}
 #index th {
     font-style: italic;
     color: #333;
     border-bottom: 1px solid #ccc;
     cursor: pointer;
-    }
+}
 #index th:hover {
     background: #eee;
     border-bottom: 1px solid #999;
-    }
+}
 #index td.left, #index th.left {
     padding-left: 0;
-    }
+}
 #index td.right, #index th.right {
     padding-right: 0;
-    }
+}
 #index th.headerSortDown, #index th.headerSortUp {
     border-bottom: 1px solid #000;
     white-space: nowrap;
     background: #eee;
-    }
+}
 #index th.headerSortDown:after {
     content: " ↓";
 }
@@ -424,27 +432,26 @@ td.contexts p span.context-button {
 #index td.name, #index th.name {
     text-align: left;
     width: auto;
-    }
+}
 #index td.name a {
     text-decoration: none;
     color: #000;
-    }
-#index tr.total,
-#index tr.total_dynamic {
-    }
+}
+#index tr.total, #index tr.total_dynamic { }     // ???
+
 #index tr.total td,
 #index tr.total_dynamic td {
     font-weight: bold;
     border-top: 1px solid #ccc;
     border-bottom: none;
-    }
+}
 #index tr.file:hover {
     background: #eeeeee;
-    }
+}
 #index tr.file:hover td.name {
     text-decoration: underline;
     color: #000;
-    }
+}
 
 // scroll marker styles
 #scroll_marker {
@@ -456,11 +463,11 @@ td.contexts p span.context-button {
     background: white;
     border-left: 1px solid #eee;
     will-change: transform; // for faster scrolling of fixed element in Chrome
-    }
 
-#scroll_marker .marker {
-    background: #eedddd;
-    position: absolute;
-    min-height: 3px;
-    width: 100%;
+    .marker {
+        background: #eedddd;
+        position: absolute;
+        min-height: 3px;
+        width: 100%;
     }
+}
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index 643183a3..83966952 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -19,7 +19,6 @@ table tr.hidden { display: none !important; }
 p#no_rows { display: none; font-size: 1.2em; }
 
 a.nav { text-decoration: none; color: inherit; }
-
 a.nav:hover { text-decoration: underline; color: inherit; }
 
 #header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #eee; }
@@ -40,31 +39,20 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container { display: inline-block; float: right; margin: 0 2em 0 0; }
-
 #filter_container input { width: 10em; }
 
 h2.stats { margin-top: .5em; font-size: 1em; }
 
 .stats span { border: 1px solid; padding: .1em .25em; margin: 0 .1em; cursor: pointer; border-color: #999 #ccc #ccc #999; }
-
 .stats span.hide_run, .stats span.hide_exc, .stats span.hide_mis, .stats span.hide_par, .stats span.par.hide_run.hide_par { border-color: #ccc #999 #999 #ccc; }
-
 .stats span.par.hide_run { border-color: #999 #ccc #ccc #999; }
-
 .stats span.run { background: #ddffdd; }
-
 .stats span.exc { background: #eeeeee; }
-
 .stats span.mis { background: #ffdddd; }
-
 .stats span.hide_run { background: #eeffee; }
-
 .stats span.hide_exc { background: #f5f5f5; }
-
 .stats span.hide_mis { background: #ffeeee; }
-
 .stats span.par { background: #ffffaa; }
-
 .stats span.hide_par { background: #ffffcc; }
 
 #keyboard_icon { float: right; margin: 5px; cursor: pointer; }
@@ -80,15 +68,11 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #panel_icon { float: right; cursor: pointer; }
 
 .keyhelp { margin: .75em; }
-
 .keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: monospace; font-weight: bold; background: #eee; }
 
 .linenos p { text-align: right; margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; }
-
 .linenos p.highlight { background: #ffdd00; }
-
 .linenos p a { text-decoration: none; color: #999999; font-size: .8333em; line-height: 1em; }
-
 .linenos p a:hover { text-decoration: underline; color: #999999; }
 
 td.text { width: 100%; }
@@ -107,31 +91,22 @@ td.text { width: 100%; }
 .text p.hide_run:hover, .text p.hide_exc:hover, .text p.hide_mis:hover, .text p.hide_par:hover, .text p.hide_run.hide_par:hover { background: #f2f2f2; }
 
 .text span.annotate { font-family: georgia; color: #666; float: right; padding-right: .5em; }
-
 .text p.hide_par span.annotate { display: none; }
-
 .text span.annotate.long { display: none; }
-
 .text p:hover span.annotate.long { display: block; max-width: 50%; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; width: 30em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
 
 .text .com { color: green; font-style: italic; line-height: 1px; }
-
 .text .key { font-weight: bold; line-height: 1px; }
-
 .text .str { color: #000080; }
 
 td.contexts p { margin: 0; padding: 0 .5em; color: #999999; font-family: verdana, sans-serif; white-space: nowrap; position: relative; }
-
 td.contexts p:hover { background: #eee; }
-
 td.contexts p span.context-list { display: none; }
-
 td.contexts p:hover span.context-list { display: block; min-width: 30em; white-space: normal; float: right; position: absolute; top: 1.75em; right: 1em; height: auto; color: #333; background: #ffffcc; border: 1px solid #888; padding: .25em .5em; z-index: 999; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; }
+td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }
 
 span.context-list span.context-line { display: block; }
 
-td.contexts p span.context-button { display: inline-block; cursor: pointer; font-size: .8333em; line-height: 1em; }
-
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
 
 #index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
@@ -159,5 +134,4 @@ td.contexts p span.context-button { display: inline-block; cursor: pointer; font
 #index tr.file:hover td.name { text-decoration: underline; color: #000; }
 
 #scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: white; border-left: 1px solid #eee; will-change: transform; }
-
 #scroll_marker .marker { background: #eedddd; position: absolute; min-height: 3px; width: 100%; }