add list group component

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 4a91214a3812382cc28f29976c6864cdb18a1a0b..652b845cd82f472a43efe519cfe2189e50e56f84 100644 (file)
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,12 +163,25 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
+    <li>
+      <a href="#list-group">List group</a>
+      <ul class="nav">
+        <li><a href="#list-group-basic">Basic list group</a></li>
+        <li><a href="#list-group-chevrons">With chevrons</a></li>
+        <li><a href="#list-group-badges">With badges</a></li>
+        <li><a href="#list-group-badges-chevrons">With badges and chevrons</a></li>
+        <li><a href="#list-group-linked">Linked items</a></li>
+        <li><a href="#list-group-custom-content">Custom content</a></li>
+        <!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
+      </ul>
+    </li>
     <li>
       <a href="#panels">Panels</a>
       <ul class="nav">
         <li><a href="#panels-basic">Basic panel</a></li>
         <li><a href="#panels-heading">Panel with heading</a></li>
         <li><a href="#panels-alternatives">Contextual alternatives</a></li>
+        <li><a href="#panels-list-group">With list groups</a></li>
       </ul>
     </li>
     <li><a href="#wells">Wells</a></li>

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b86a16a78878ad68ee5189aa50c2e4bc8bbad8b6..fcbc5d58080b437e62f24134ffcaa079c210a6ae 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2944,6 +2944,80 @@ fieldset[disabled] .btn-link:focus {
   z-index: 1051;
 }
 
+.list-group {
+  margin: 0 0 20px;
+  background-color: #ffffff;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 30px 10px 15px;
+  margin-bottom: -1px;
+  border: 1px solid #dddddd;
+}
+
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+a.list-group-item .list-group-item-heading {
+  color: #333;
+}
+
+a.list-group-item .list-group-item-text {
+  color: #555;
+}
+
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+a.list-group-item.active {
+  z-index: 2;
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+a.list-group-item.active .list-group-item-heading,
+a.list-group-item.active .list-group-item-text {
+  color: inherit;
+}
+
+.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;
+}
+
 .panel {
   padding: 15px;
   margin-bottom: 20px;
@@ -3006,6 +3080,23 @@ fieldset[disabled] .btn-link:focus {
   border-color: #bce8f1;
 }
 
+.list-group-flush {
+  margin: 15px -15px -15px;
+}
+
+.list-group-flush .list-group-item {
+  border-width: 1px 0;
+}
+
+.list-group-flush .list-group-item:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.list-group-flush .list-group-item:last-child {
+  border-bottom: 0;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 181a3a734e1b829053861d266530b45bdf1f5d0d..e1fd6a2b45ca3c0e54316ba7d3a6cc1eac8b5e38 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -311,6 +311,7 @@ section > ul li {
 .bs-docs-example > .jumbotron:last-child,
 .bs-docs-example > .alert:last-child,
 .bs-docs-example > .panel:last-child,
+.bs-docs-example > .list-group:last-child,
 .bs-docs-example > .well:last-child {
   margin-bottom: 0;
 }
@@ -339,6 +340,10 @@ section > ul li {
   margin: 0;
 }
 
+/* List groups */
+.bs-docs-example > .list-group {
+  max-width: 400px;
+}
 
 /* Navbar examples */
 .bs-navbar-top-example,

diff --git a/docs/docs.html b/docs/docs.html
index 7603d2ccc3536c1d1fa82f8748904b0e8817536e..844a467d2b1c7294f91bd5ed1bdde6839d43fad6 100644 (file)
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4369,6 +4369,172 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+  <!-- List group
+  ================================================== -->
+  <div class="bs-docs-section" id="list-group">
+    <div class="page-header">
+      <h1>List group</h1>
+    </div>
+    <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
+
+    <h3 id="list-group-basic">Basic list group</h3>
+    <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+        <li class="list-group-item">Morbi leo risus</li>
+        <li class="list-group-item">Porta ac consectetur ac</li>
+        <li class="list-group-item">Vestibulum at eros</li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+  <li class="list-group-item">Porta ac consectetur ac</li>
+  <li class="list-group-item">Vestibulum at eros</li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-chevrons">With chevrons</h3>
+    <p>Adding Glyphicon chevrons are automatically moved to the right.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-badges">With badges</h3>
+    <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="badge">14</span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="badge">2</span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="badge">1</span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="badge">14</span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
+    <p>Why not both?</p>
+    <div class="bs-docs-example">
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">14</span>
+          Cras justo odio
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">2</span>
+          Dapibus ac facilisis in
+        </li>
+        <li class="list-group-item">
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="badge">1</span>
+          Morbi leo risus
+        </li>
+      </ul>
+    </div>
+{% highlight html linenos %}
+<ul class="list-group">
+  <li class="list-group-item">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="badge">14</span>
+    Cras justo odio
+  </li>
+</ul>
+{% endhighlight %}
+
+    <h3 id="list-group-linked">Linked list group</h3>
+    <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p>
+    <div class="bs-docs-example">
+      <div class="list-group">
+        <a href="#" class="list-group-item active">Cras justo odio</a>
+        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+        <a href="#" class="list-group-item">Morbi leo risus</a>
+        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+        <a href="#" class="list-group-item">Vestibulum at eros</a>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="list-group">
+  <a href="#" class="list-group-item active">Cras justo odio</a>
+  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item">Morbi leo risus</a>
+  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item">Vestibulum at eros</a>
+</div>
+{% endhighlight %}
+
+    <h3 id="list-group-custom-content">Custom content</h3>
+    <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
+    <div class="bs-docs-example">
+      <div class="list-group">
+        <a href="#" class="list-group-item active">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </a>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="list-group">
+  <a href="#" class="list-group-item active">
+    <h4 class="list-group-item-heading">List group item heading</h4>
+    <p class="list-group-item-text">...</p>
+  </a>
+</div>
+{% endhighlight %}
+  </div>
+
+
+
+
   <!-- Panels
   ================================================== -->
   <div class="bs-docs-section" id="panels">
@@ -4430,6 +4596,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="panel panel-warning">...</div>
 <div class="panel panel-danger">...</div>
 <div class="panel panel-info">...</div>
+{% endhighlight %}
+
+    <h3 id="panels-list-group">With list groups</h3>
+    <p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        <!-- Default panel contents -->
+        <div class="panel-heading">Panel heading</div>
+        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
+        <!-- List group -->
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Morbi leo risus</li>
+          <li class="list-group-item">Porta ac consectetur ac</li>
+          <li class="list-group-item">Vestibulum at eros</li>
+        </ul>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  <div class="panel-heading">Panel heading</div>
+  Panel content
+</div>
 {% endhighlight %}
 
   </div>

diff --git a/less/bootstrap.less b/less/bootstrap.less
index c887fcef6fc51e6899b25e954f7d99bc064742d3..c73c85c385d9b7f0f2c2b904ef88ec9c58fc4177 100644 (file)
--- 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 (file)
index 0000000..23ddb0d
--- /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 43e51992230911e07887d1bb48c7aa4abcdb3c7a..6c9dd6df3723b190342fdd84772b55c289af778b 100644 (file)
--- 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 c4b85d80e1fc3fc22774855fc543660e52b17e32..054d2d69e3bc9af102d5143c7605e7cc01a285e5 100644 (file)
--- 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;