2 files changed, 54 insertions, 0 deletions
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index 523d7b95d..b43c96791 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -24,4 +24,6 @@ $itemlist_item_background_hover: mix(#fff, $primary, 70%);
 
 $layout_front_stats_color: #222;
 
+$nicetable-stripe-background: #f3f3f3;
+
 $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index ac7210c74..b6a20517c 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2392,6 +2392,58 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     vertical-align: -2px;
 }
 
+$nicetable-cell-padding: 0.6em 1.5em !default;
+$nicetable-border-color: #ccc !default;
+$nicetable-stripe-background: rgba($primary, 0.05) !default;
+$nicetable-hover-background: rgba($primary, 0.15) !default;
+
+.nicetable {
+    width: 100%;
+    margin-bottom: 1.5em;
+
+    td, th {
+        padding: $nicetable-cell-padding;
+        padding-#{$left}: 0;
+        border-bottom: 1px solid $nicetable-border-color;
+        text-align: $left;
+
+        &:last-child {
+            padding-#{$right}: 0;
+        }
+    }
+
+    // Give your .nicetable an extra .stripe class to stripe alternate rows.
+    &.stripe {
+        td, th {
+            padding: $nicetable-cell-padding;
+        }
+
+        tr:nth-child(even) {
+            background: $nicetable-stripe-background;
+        }
+    }
+
+    // Give your .nicetable an extra .hover class to enable row hover effect.
+    &.hover {
+        td, th {
+            padding: $nicetable-cell-padding;
+        }
+
+        tr:hover {
+            background: $nicetable-hover-background;
+        }
+
+        thead tr {
+            background: transparent;
+        }
+    }
+
+    // For table cells containing numbers (and their associated header cells).
+    .data {
+        text-align: $right;
+    }
+}
+
 @import "_admin";
 @import "_dropzone";
 @import "_multiselect";