From 4f89b3d2be013f53fa8a30328e509c1453e39f88 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Mon, 18 Jan 2016 13:51:46 -0600
Subject: [PATCH] #822 fully flex the .list-group so that we can easily use a
 growable mdb-layout-spacer to push content to the other end

---
 docs/examples/dashboard/example.scss |  2 +-
 docs/examples/dashboard/index.html   | 77 ++++++++++++++++------------
 scss/_drawer.scss                    |  2 +-
 scss/_layout.scss                    |  5 ++
 scss/_list-group.scss                |  5 +-
 5 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/docs/examples/dashboard/example.scss b/docs/examples/dashboard/example.scss
index fe35ee60..48f45acc 100644
--- a/docs/examples/dashboard/example.scss
+++ b/docs/examples/dashboard/example.scss
@@ -83,7 +83,7 @@ a, a:hover {
     }
   }
 
-  .mdl-navigation {
+  .mdb-nav {
     flex-grow: 1;
     background-color: $blue-grey-800;
     z-index: -2;
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 851a4f19..6014c931 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -102,41 +102,51 @@ js: example.js
           </div>
         </div>
       </header>
-      <ul class="mdl-navigation list-group">
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">home</i>Home
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">inbox</i>Inbox
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">delete</i>Trash
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">report</i>Spam
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">forum</i>Forums
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">flag</i>Updates
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">local_offer</i>Promos
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">shopping_cart</i>Purchases
-        </a>
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">people</i>Social
-        </a>
+      <!--<div class="mdb-nav">-->
+        <ul class="mdb-nav list-group">
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">home</i>Home
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">inbox</i>Inbox
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">delete</i>Trash
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">report</i>Spam
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">forum</i>Forums
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">flag</i>Updates
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">local_offer</i>Promos
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">shopping_cart</i>Purchases
+          </a>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">people</i>Social
+          </a>
 
+          <li class="mdb-layout-spacer"></li>
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
+          </a>
+        </ul>
+        <!--
         <div class="mdb-layout-spacer"></div>
 
-        <a class="mdb-list-group-item">
-          <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
-        </a>
-      </ul>
+        <ul class="list-group">
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
+          </a>
+        </ul>
+        -->
+      <!--</div>-->
     </div>
 
     <main class="mdb-layout-content">
@@ -144,7 +154,8 @@ js: example.js
         <div class="alert alert-info" role="alert">
           This is an implementation of
           <a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
-          <small>(see license)</small>.  Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
+          <small>(see license)</small>
+          . Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
         </div>
 
         <!-- round charts -->
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index e62a5a93..71936bd7 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -27,7 +27,7 @@
     flex-shrink: 0;
   }
 
-  .mdl-navigation {
+  .mdb-nav {
     flex-direction: column;
     align-items: stretch;
     padding-top: 1rem;
diff --git a/scss/_layout.scss b/scss/_layout.scss
index aeae2e8b..a28e6cde 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -46,3 +46,8 @@
   -webkit-overflow-scrolling: touch; // TODO: why?
 }
 
+// Pushes content to the other end
+.mdb-layout-spacer {
+  flex-grow: 1;
+}
+
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index b6e91d0f..de5ea0e8 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -7,8 +7,9 @@
 // - triple line 88dp
 
 .list-group {
-  // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader,
-  //because subheaders contain their own padding.
+  display: flex;
+  flex-direction: column;
+  // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
   padding: .5rem 0;
 
   // dense size variation