configurable list borders and highlighting

README.md

@@ -66,6 +66,7 @@ Latest (master):
 * Fixed animation issue when showing sidebar
 * Slightly modified buttons' style
 * Few visual tweaks: nicer shadows, improved datepickers layout
++ Configurable list borders and highlighting of hovered and even/odd rows
 
 v1.6.0 (2015-06-10):
 

src/sass/_variables.scss

@@ -152,9 +152,17 @@ $collapsible-animation-time:    .3s !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
+$table-list-header-border:      0 0 2px !default;
+$table-list-item-border:        0 0 1px !default;
+$table-list-color-odd-rows:     true !default;
+$table-list-color-even-rows:    false !default;
+$table-list-highlight-rows:     false !default;
+
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(#000, .03) !default;
+$table-accent-factor:           .03 !default;
-$table-bg-hover:                #f1f1f1 !default;
+$table-hover-factor:            .03 !default;
+$table-bg-accent:               rgba(#000, $table-accent-factor) !default;
+$table-bg-hover:                rgba(#000, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;
 
 $table-border-color:            darken($body-bg, 13.5%) !default;

src/sass/components/_list.scss

@@ -11,9 +11,16 @@ table.list {
         margin-bottom: 0;
     }
 
+    @if $table-list-highlight-rows {
+        > tbody > tr:hover {
+            background-color: $table-bg-hover;
+        }
+    }
+
     th {
         padding: $table-cell-padding;
-        border-bottom: 2px solid $table-border-color;
+        border: 2px solid $table-border-color;
+        border-width: $table-list-header-border;
         color: $gray;
         vertical-align: bottom;
 
@@ -24,7 +31,8 @@ table.list {
 
     td {
         padding: $table-cell-padding;
-        border-bottom: 1px solid $table-border-color;
+        border: 1px solid $table-border-color;
+        border-width: $table-list-item-border;
         text-align: left;
         vertical-align: top;
 
@@ -207,9 +215,6 @@ tr {
     }
 }
 
-// /* do you */ .even {
-// }
-
 td.center {
     text-align: center;
 }
@@ -352,8 +357,16 @@ tr.entry {
     }
 }
 
-.odd {
+@if $table-list-color-odd-rows {
-    background-color: $table-bg-accent;
+    .odd {
+        background-color: $table-bg-accent;
+    }
+}
+
+@if $table-list-color-even-rows {
+    .even {
+        background-color: $table-bg-accent;
+    }
 }
 
 

src/sass/mixins/_issues.scss

@@ -16,8 +16,16 @@
             color: darken($color, 10%);
         }
 
-        &.odd {
+        @if $table-list-color-odd-rows {
-            background: darken($background, 3%);
+            &.odd {
+                background: darken($background, $table-accent-factor * 100%);
+            }
+        }
+
+        @if $table-list-color-even-rows {
+            &.even {
+                background: darken($background, $table-accent-factor * 100%);
+            }
         }
 
         td {
@@ -33,6 +41,24 @@
         }
     }
 
+    @if $table-list-highlight-rows {
+        table.list > tbody > tr#{$parent}:hover {
+            background: darken($background, $table-hover-factor * 100%);
+        }
+
+        @if $table-list-color-odd-rows {
+            &.odd {
+                background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+            }
+        }
+
+        @if $table-list-color-even-rows {
+            &.even {
+                background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+            }
+        }
+    }
+
     @if $colored-issue {
         .issue.details#{$parent} {
             color: $color;