scss: adding list-group component.

app/assets/sass/_variables.scss

@@ -127,6 +127,17 @@ $button-gitlab-bg:             $gitlab-color;
 $button-linkedin-color:        white;
 $button-linkedin-bg:           $linkedin-color;
 
+// ----------------------------------
+//   List group
+// ----------------------------------
+
+$list-group-item-color:             $text-color;
+$list-group-item-background:        transparent;
+$list-group-item-border-color:      $gray-light;
+
+$list-group-hover-background:       $gray-lightest;
+$list-group-item-active-background: $brand-color;
+
 // ----------------------------------
 //   Shadows
 // ----------------------------------

app/assets/sass/application.scss

@@ -34,6 +34,7 @@
 @import "components/spacer";
 @import "components/pagination";
 @import "components/blankslate";
+@import "components/list-group";
 @import "components/request-list";
 @import "components/callback-list";
 

app/assets/sass/components/_list-group.scss

@@ -0,0 +1,46 @@
+
+.list-group {
+
+    padding-left: 0;    // for <ul>, reset left padding.
+    margin-bottom: 0;   // for <ul>, reset bottom margin.
+
+    &-item {
+
+        display: block;
+        padding: .5em 1em;
+
+        color: $list-group-item-color;
+        background-color: $list-group-item-background;
+        border: 1px solid $list-group-item-border-color;
+
+        &-active {
+            background-color: $list-group-item-active-background;
+        }
+
+        // Remove bottom border for all but last item.
+        &:not(:last-child) {
+            border-bottom: 0;
+        }
+    }
+}
+
+//    Links
+// ----------------------------------
+
+.list-group-item-link,
+a.list-group-item {
+
+    color: $list-group-item-color;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+        background: $list-group-hover-background;
+    }
+}