From 56a80ef3502ac1f456a852c61cfc07130c381688 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Sat, 1 Sep 2018 14:47:42 +0200
Subject: [PATCH] scss: adding list-group component.

---
 app/assets/sass/_variables.scss             | 11 +++++
 app/assets/sass/application.scss            |  1 +
 app/assets/sass/components/_list-group.scss | 46 +++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 app/assets/sass/components/_list-group.scss

diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
index 9053952..a31392a 100644
--- a/app/assets/sass/_variables.scss
+++ b/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
 // ----------------------------------
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 54e7fed..6f97880 100644
--- a/app/assets/sass/application.scss
+++ b/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";
 
diff --git a/app/assets/sass/components/_list-group.scss b/app/assets/sass/components/_list-group.scss
new file mode 100644
index 0000000..d216f38
--- /dev/null
+++ b/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;
+    }
+}