mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 fully flex the .list-group so that we can easily use a growable mdb-layout-spacer to push content to the other end

Browse Source
This commit is contained in:
Kevin Ross 2016-01-18 13:51:46 -06:00
parent e77ffbc58a
commit 4f89b3d2be
5 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/dashboard/example.scss
View File

@ -83,7 +83,7 @@ a, a:hover {
} }
} }
.mdl-navigation { .mdb-nav {
flex-grow: 1; flex-grow: 1;
background-color: $blue-grey-800; background-color: $blue-grey-800;
z-index: -2; z-index: -2;

77
docs/examples/dashboard/index.html
View File

@ -102,41 +102,51 @@ js: example.js
</div> </div>
</div> </div>
</header> </header>
<ul class="mdl-navigation list-group"> <!--<div class="mdb-nav">-->
<a class="mdb-list-group-item"> <ul class="mdb-nav list-group">
<i class="material-icons" role="presentation">home</i>Home <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">home</i>Home
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">inbox</i>Inbox <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">inbox</i>Inbox
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">delete</i>Trash <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">delete</i>Trash
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">report</i>Spam <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">report</i>Spam
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">forum</i>Forums <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">forum</i>Forums
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">flag</i>Updates <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">flag</i>Updates
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">local_offer</i>Promos <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">local_offer</i>Promos
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">shopping_cart</i>Purchases <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">shopping_cart</i>Purchases
<a class="mdb-list-group-item"> </a>
<i class="material-icons" role="presentation">people</i>Social <a class="mdb-list-group-item">
</a> <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> <div class="mdb-layout-spacer"></div>
<a class="mdb-list-group-item"> <ul class="list-group">
<i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span> <a class="mdb-list-group-item">
</a> <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
</ul> </a>
</ul>
-->
<!--</div>-->
</div> </div>
<main class="mdb-layout-content"> <main class="mdb-layout-content">
@ -144,7 +154,8 @@ js: example.js
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
This is an implementation of 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. <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> </div>
<!-- round charts --> <!-- round charts -->

2
scss/_drawer.scss
View File

@ -27,7 +27,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.mdl-navigation { .mdb-nav {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding-top: 1rem; padding-top: 1rem;

5
scss/_layout.scss
View File

@ -46,3 +46,8 @@
-webkit-overflow-scrolling: touch; // TODO: why? -webkit-overflow-scrolling: touch; // TODO: why?
} }
// Pushes content to the other end
.mdb-layout-spacer {
flex-grow: 1;
}

5
scss/_list-group.scss
View File

@ -7,8 +7,9 @@
// - triple line 88dp // - triple line 88dp
.list-group { .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, display: flex;
//because subheaders contain their own padding. 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; padding: .5rem 0;
// dense size variation // dense size variation