Adding list group

Updating version number
patternfly · Feb 19, 2014 · 9c4cc71 · 9c4cc71
1 parent d60e615
commit 9c4cc71
Showing 9 changed files with 150 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "PatternFly",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "authors": "Red Hat",
   "license": "Apache-2.0",
   "homepage": "https://www.patternfly.org",

diff --git a/dist/css/patternfly.css b/dist/css/patternfly.css
@@ -4607,16 +4607,16 @@ a.thumbnail.active {
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #ffffff;
-  border: 1px solid #bababa;
+  border: 1px solid #f2f2f2;
 }
 .list-group-item:first-child {
-  border-top-right-radius: 1px;
-  border-top-left-radius: 1px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
 }
 .list-group-item:last-child {
   margin-bottom: 0;
-  border-bottom-right-radius: 1px;
-  border-bottom-left-radius: 1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .list-group-item > .badge {
   float: right;
@@ -8215,6 +8215,19 @@ h5 .label,
 h6 .label {
   font-size: 75%;
 }
+.list-group {
+  border-top: 1px solid #e9e8e8;
+}
+.list-group .list-group-item:first-child {
+  border-top: 0;
+}
+.list-group-item {
+  border-left: 0;
+  border-right: 0;
+}
+.list-group-item-heading {
+  font-weight: 700;
+}
 .login-pf {
   height: 100%;
 }

diff --git a/dist/css/patternfly.min.css b/dist/css/patternfly.min.css
diff --git a/less/list-group.less b/less/list-group.less
@@ -0,0 +1,18 @@
+//
+// List groups
+// --------------------------------------------------
+
+.list-group {
+  border-top: 1px solid @list-group-top-border;
+  .list-group-item:first-child {
+    border-top: 0;
+  }
+}
+.list-group-item {
+  border-left: 0;
+  border-right: 0;
+}
+
+.list-group-item-heading {
+  font-weight: 700;
+}
diff --git a/less/patternfly.less b/less/patternfly.less
@@ -25,6 +25,7 @@
 @import "icons";
 @import "infotip";
 @import "labels";
+@import "list-group";
 @import "login";
 @import "modals";
 @import "navbar";

diff --git a/less/variables.less b/less/variables.less
@@ -62,7 +62,8 @@
 @input-height-base:                                                 26px;
 @line-height-base:                                                  1.81818181; // 20/11
 @link-color:                                                        #0099d3;
-@list-group-border:                                                 @input-border;
+@list-group-border:                                                 #f2f2f2;
+@list-group-border-radius:                                          0;
 @list-group-hover-bg:                                               #d4edfa;
 @link-hover-color:                                                  #00618a;
 @nav-tabs-active-link-hover-color:                                  @link-color;
@@ -129,8 +130,7 @@
 @img-path:                                                          "../img";
 @img-path-alt:                                                      @img-path;
 @input-border-disabled:                                             #d4d4d4;
-@list-group-focus-border:                                           #0076b7;
-@list-group-hover-border:                                           #b3d3e7;
+@list-group-top-border:                                             #e9e8e8;
 @login-bg-color:                                                    #080808;
 @login-container-bg-color:                                          #181818;
 @login-container-bg-color-rgba:                                     rgba(255, 255, 255, 0.055);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "PatternFly",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Red Hat",
   "license": "Apache-2.0",
   "devDependencies": {

diff --git a/tests/index.html b/tests/index.html
@@ -45,6 +45,7 @@ <h1>PatternFly</h1>
             <li><a href="icons.html">Icons</a></li>
             <li><a href="infotip.html">Info Tip</a></li>
             <li><a href="labels.html">Labels</a></li>
+            <li><a href="list-group.html">List Group</a></li>
             <li><a href="login.html">Login</a></li>
             <li><a href="modals.html">Modals</a></li>
             <li><a href="navbar.html">Navbar</a></li>

diff --git a/tests/list-group.html b/tests/list-group.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!--[if IE 8]><html class="ie8"><![endif]-->
+<!--[if gt IE 8]><!-->
+<html>
+<!--<![endif]-->
+  <head>
+    <title>List Group - PatternFly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../dist/css/patternfly.css" rel="stylesheet" media="screen, print">
+    <link href="tests.css" rel="stylesheet" media="screen, print">
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="../components/html5shiv/dist/html5shiv.js"></script>
+    <script src="../components/respond/respond.min.js"></script>
+    <![endif]-->
+    <!-- IE8 requires jQuery and Bootstrap JS to load in head to prevent rendering bugs -->
+    <!-- IE8 requires jQuery v1.x -->
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="page-header">
+            <h1>List Group</h1>
+          </div>
+          <div class="alert alert-warning">
+             <span class="pficon-layered">
+              <span class="pficon pficon-warning-triangle"></span>
+              <span class="pficon pficon-warning-exclamation"></span>
+            </span>
+            These examples are include for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
+          </div>
+          <hr>
+          <h2>Basic example</h2>
+          <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>
+          <hr>
+          <h2>Badges</h2>
+          <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>
+          <hr>
+          <h2>Linked items</h2>
+          <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>
+          <hr>
+          <h2>Contextual classes</h2>
+          <ul class="list-group">
+            <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
+            <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
+            <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+          </ul>
+          <div class="list-group">
+            <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
+            <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
+            <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+          </div>
+          <hr>
+          <h2>Custom content</h2>
+          <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.</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.</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.</p>
+            </a>
+          </div>
+        </div><!-- /col -->
+      </div><!-- /row -->
+    </div><!-- /container -->
+  </body>
+</html>