1 files changed, 137 insertions, 26 deletions

diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index aae8aa98b..1d3066e7c 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -25,7 +25,7 @@
     padding: 1em;
 
     @media (min-width: 48em) {
-        float: left;
+        float: $left;
         padding: 2em;
     }
 
@@ -53,15 +53,20 @@
 }
 
 .labelled-line-chart,
-.labelled-sparkline {
+.labelled-sparkline,
+.responsive-bar-chart {
     position: relative;
     width: 100%;
-    line-height: 1.2em;
 
     canvas {
         width: 100% !important;
         height: auto !important;
     }
+}
+
+.labelled-line-chart,
+.labelled-sparkline {
+    line-height: 1.2em;
 
     .label {
         strong {
@@ -78,19 +83,19 @@
     @include box-sizing(border-box);
 
     @media (min-width: 48em) {
-        padding-right: 20%;
+        padding-#{$right}: 20%;
     }
 
     .label {
-        float: left;
-        margin-right: 2em;
+        float: $left;
+        margin-#{$right}: 2em;
     }
 }
 .js .labelled-line-chart .label {
     @media (min-width: 48em) {
         position: absolute;
         margin-top: -1em;
-        margin-right: 0;
+        margin-#{$right}: 0;
     }
 }
 
@@ -150,13 +155,13 @@
 .dashboard-search__input {
     @include box-sizing(border-box);
     width: 80%;
-    float: left;
-    padding-right: 1em;
+    float: $left;
+    padding-#{$right}: 1em;
 }
 
 .dashboard-search__submit {
     width: 20%;
-    float: right;
+    float: $right;
 
     input {
         width: 100%;
@@ -175,25 +180,19 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        background: transparent url(/cobrands/fixmystreet/images/crosshairs.png) no-repeat 0 0;
-        background-size: 16px 16px;
+        background-repeat: no-repeat;
+        background-size: 112px 16px;
+        @include svg-background-image('/cobrands/fixmystreet/images/button-icons');
+        background-position: -96px 0;
         margin-#{$right}: 0.5em;
         vertical-align: -0.1em;
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
-        }
     }
 }
 
 .dashboard-ranking-table {
     width: 100%;
 
-    td {
+    td, th {
         padding: 0.4em 0.8em;
 
         &:last-child {
@@ -201,13 +200,125 @@
         }
     }
 
-    tbody tr:nth-child(odd) {
-        td {
-            background-color: mix($primary, #fff, 15%);
-        }
+    th {
+        text-align: inherit;
     }
 
-    tfoot td {
+    tbody tr:nth-child(odd) > * {
+        background-color: mix($primary, #fff, 15%);
+    }
+
+    tfoot tr > * {
         font-weight: bold;
     }
 }
+
+.filters {
+    @include clearfix();
+    background-color: mix(#fff, $primary, 60%);
+    margin: 0 -1em 1em -1em;
+    border-top: $primary solid 0.75em;
+    padding: 0 1em;
+
+    // No border-top when visually preceded by .dashboard-header
+    .dashboard-header + * & {
+        border-top: none;
+    }
+
+    // Quick fix for too much spacing when followed by .dashboard-item(s)
+    & + .dashboard-row {
+        margin-top: -1em;
+    }
+
+    p {
+        padding: 0 1em;
+        font-size: 0.75em;
+
+        @media (min-width: 48em) {
+            float: $left;
+            max-width: 25%;
+        }
+    }
+
+    .no-label {
+        margin-top: 1.25em + 1.5em + 0.5em; // label line-height + margin-top + margin-bottom
+    }
+
+    select {
+        width: 100%;
+    }
+
+    .pro-feature {
+        color: mix(#222, mix(#fff, $primary, 60%), 30%);
+        cursor: help;
+
+        label {
+            cursor: inherit;
+
+            &:after {
+                display: inline-block;
+                content: "PRO";
+                color: #fff;
+                background: mix(#222, mix(#fff, $primary, 60%), 30%);
+                border-radius: 0.3em;
+                padding: 0.2em 0.4em;
+                margin-#{$left}: 1em;
+                font-size: 0.8em;
+                line-height: 1em;
+            }
+        }
+    }
+
+    .form-control[disabled] {
+        border-color: #ccc;
+        color: #999;
+        box-shadow: none;
+    }
+
+    .btn {
+        padding: 0.5em 0.75em;
+    }
+}
+
+.dashboard-options-tabs {
+    @include clearfix();
+    @include list-reset-soft();
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 2em;
+
+    li {
+        float: $left;
+    }
+
+    .pull-right {
+        float: $right;
+    }
+
+    a, span, strong {
+        display: inline-block;
+        padding: 0.4em 0.8em;
+    }
+
+    strong {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-bottom-color: #fff;
+        border-radius: 0.3em 0.3em 0 0;
+        margin-bottom: -1px;
+    }
+}
+
+.dashboard-options-tabs--below {
+    margin-bottom: 0;
+    margin-top: 2em;
+    border-bottom: none;
+    border-top: 1px solid #ddd;
+
+    strong {
+        border-top-color: #fff;
+        border-bottom-color: #ddd;
+        border-radius: 0 0 0.3em 0.3em;
+        margin-bottom: 0;
+        margin-top: -1px;
+    }
+}