add list group component

4 files changed, 124 insertions, 0 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index c887fcef6..c73c85c38 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -30,6 +30,7 @@
 @import "component-animations.less";
 @import "glyphicons.less";
 @import "dropdowns.less";
+@import "list-group.less";
 @import "panels.less";
 @import "wells.less";
 @import "close.less";
diff --git a/less/list-group.less b/less/list-group.less
new file mode 100644
index 000000000..23ddb0d47
--- /dev/null
+++ b/less/list-group.less
@@ -0,0 +1,94 @@
+//
+// List groups
+// --------------------------------------------------
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+.list-group {
+  // No need to set list-style: none; since .list-group-item is block level
+  margin: 0 0 20px; // reset all margins because ul and ol
+  background-color: @list-group-bg;
+}
+
+// Individual list items
+// -------------------------
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 30px 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  border: 1px solid @list-group-border;
+}
+// Round the first and last items
+.list-group-item:first-child {
+  .border-top-radius(@border-radius-base);
+}
+.list-group-item:last-child {
+  margin-bottom: 0;
+  .border-bottom-radius(@border-radius-base);
+}
+
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+// Linked list items
+// -------------------------
+
+// Custom content within linked items
+a.list-group-item {
+  .list-group-item-heading {
+    color: #333;
+  }
+  .list-group-item-text {
+    color: #555;
+  }
+}
+
+// Hover state
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: @list-group-hover-bg;
+}
+
+// Active class on item itself, not parent
+a.list-group-item.active {
+  z-index: 2; // Place active items above their siblings for proper border styling
+  color: @list-group-active-text;
+  background-color: @list-group-active-bg;
+  border-color: @list-group-active-border;
+
+  // Force color to inherit for custom content
+  .list-group-item-heading,
+  .list-group-item-text {
+    color: inherit;
+  }
+}
+
+// Chevrons and badges within list items
+// -------------------------
+
+.list-group-item > .badge,
+.list-group-item > .glyphicon-chevron-right {
+  float: right;
+  margin-right: -15px;
+}
+.list-group-item > .glyphicon-chevron-right {
+  margin-right: -15px;
+}
+.list-group-item > .glyphicon + .badge {
+  margin-right: 5px;
+}
diff --git a/less/panels.less b/less/panels.less
index 43e519922..6c9dd6df3 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -58,3 +58,21 @@
     border-color: @panel-info-border;
   }
 }
+
+// List groups in panels
+.list-group-flush {
+  margin: 15px -15px -15px;
+
+  .list-group-item {
+    border-width: 1px 0;
+
+    // Remove border radius for top one
+    &:first-child {
+      .border-top-radius(0);
+    }
+    // But keep it for the last one
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/less/variables.less b/less/variables.less
index c4b85d80e..054d2d69e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -293,6 +293,17 @@
 @progress-bar-info-bg:        @brand-info;
 
 
+// List group
+// -------------------------
+@list-group-bg:               #fff;
+@list-group-border:           #ddd;
+@list-group-border-radius:    @border-radius-base;
+
+@list-group-hover-bg:         #f5f5f5;
+@list-group-active-text:      #fff;
+@list-group-active-bg:        @link-color;
+@list-group-active-border:    @list-group-active-bg;
+
 // Panels
 // -------------------------
 @panel-bg:                    #fff;