mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

BS PR #18981 flexes list-group, assuming it is accepted, this integrates with those changes.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-20 17:33:40 -06:00
parent 8eca18ebea
commit 60b085280e
4 changed files with 64 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,7 @@ a, a:hover {
background-color: $blue-grey-800; background-color: $blue-grey-800;
z-index: -2; z-index: -2;
.mdb-list-group-item { .list-group-item {
padding-left: 2.5rem; padding-left: 2.5rem;
padding-right: 2.5rem; padding-right: 2.5rem;
font-size: .8125rem; font-size: .8125rem;

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

@ -101,36 +101,36 @@ js: example.js
</div> </div>
</header> </header>
<ul class="mdb-nav list-group"> <ul class="mdb-nav list-group">
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">home</i>Home <i class="material-icons" role="presentation">home</i>Home
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">inbox</i>Inbox <i class="material-icons" role="presentation">inbox</i>Inbox
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">delete</i>Trash <i class="material-icons" role="presentation">delete</i>Trash
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">report</i>Spam <i class="material-icons" role="presentation">report</i>Spam
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">forum</i>Forums <i class="material-icons" role="presentation">forum</i>Forums
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">flag</i>Updates <i class="material-icons" role="presentation">flag</i>Updates
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">local_offer</i>Promos <i class="material-icons" role="presentation">local_offer</i>Promos
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">shopping_cart</i>Purchases <i class="material-icons" role="presentation">shopping_cart</i>Purchases
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">people</i>Social <i class="material-icons" role="presentation">people</i>Social
</a> </a>
<li class="mdb-layout-spacer"></li> <li class="mdb-layout-spacer"></li>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span> <i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
</a> </a>
</ul> </ul>

89
docs/material-design/list-groups.md
View File

@ -19,11 +19,11 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item">Text only</li> <li class="list-group-item">Text only</li>
<a href="#" class="mdb-list-group-item">Link item</a> <a href="#" class="list-group-item">Link item</a>
<button type="button" class="mdb-list-group-item">Button item</button> <button type="button" class="list-group-item">Button item</button>
<a href="#" class="mdb-list-group-item active">Active link item</a> <a href="#" class="list-group-item active">Active link item</a>
<a href="#" class="mdb-list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -31,11 +31,11 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group mdb-list-group-sm">
<li class="mdb-list-group-item">Text</li> <li class="list-group-item">Text</li>
<a href="#" class="mdb-list-group-item">Link item</a> <a href="#" class="list-group-item">Link item</a>
<button type="button" class="mdb-list-group-item">Button item</button> <button type="button" class="list-group-item">Button item</button>
<a href="#" class="mdb-list-group-item active">Active link item</a> <a href="#" class="list-group-item active">Active link item</a>
<a href="#" class="mdb-list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -43,41 +43,41 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icon left Icon left
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill left Label pill left
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icons left and right Icons left and right
<i class="material-icons">face</i> <i class="material-icons">face</i>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill left and right Label pill left and right
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
Icon <code>.right</code> Icon right
<i class="material-icons right">face</i> <i class="material-icons pull-xs-right">face</i>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
Label pill <code>.right</code> Label pill right
<span class="label label-default label-pill right">14</span> <span class="label label-default label-pill pull-xs-right">14</span>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill and icon Label pill and icon
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icon and label pill Icon and label pill
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
@ -93,19 +93,19 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
@ -118,19 +118,19 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group mdb-list-group-sm">
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
@ -143,7 +143,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
@ -151,7 +151,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
@ -159,7 +159,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</div> </div>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
@ -168,20 +168,20 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<i class="material-icons">face</i> <i class="material-icons">face</i>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon right</p> <p class="list-group-item-text">Icon right</p>
</div> </div>
<i class="material-icons right">face</i> <i class="material-icons pull-xs-right">face</i>
</a> </a>
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Label pill to the right</p> <p class="list-group-item-text">Label pill to the right</p>
</div> </div>
<span class="label label-default label-pill right">14</span> <span class="label label-default label-pill pull-xs-right">14</span>
</a> </a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -192,13 +192,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="mdb-list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">Linked list group item heading</p> <p class="list-group-item-heading">Linked list group item heading</p>
<p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
</div> </div>
</a> </a>
<li class="mdb-list-group-item"> <li class="list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">Text list group item heading</p> <p class="list-group-item-heading">Text list group item heading</p>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
@ -220,7 +220,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code>.mdb-list-group-item</code> <code>.list-group-item</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
<code>.list-group-item</code> <code>.list-group-item</code>
@ -237,18 +237,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
</td> </td>
<td> <td>
{% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %} {% markdown %}Flexbox column - additional class to use within an `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.right</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Flex layout marker - additional class needed when only one icon/label is present and it should be right aligned. Only valid as a child of `.mdb-list-group-item`{% endmarkdown %}
</td> </td>
</tr> </tr>
<tr> <tr>

32
scss/_list-group.scss
View File

@ -1,14 +1,11 @@
// https://www.google.com/design/spec/components/lists.html#lists-specs // https://www.google.com/design/spec/components/lists.html#lists-specs
// - single line 48dp // - single line 48dp
// - single line avatar 56dp // - single line avatar 56dp
// - double line (with and w/o avatar) 72dp // - double line (with and w/o avatar) 72dp
// - triple line 88dp // - triple line 88dp
.list-group { .list-group {
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. // 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;
@ -16,14 +13,12 @@
&.mdb-list-group-sm { &.mdb-list-group-sm {
padding: .25rem 0; padding: .25rem 0;
.mdb-list-group-item { .list-group-item {
padding: .5rem 1rem; padding: .5rem 1rem;
} }
} }
} }
// Flex layout on a list group (some of this code could be omitted if BS v4 actually implements flex on list-group)
.mdb-list-group-col { .mdb-list-group-col {
display: flex; display: flex;
min-width: 0; min-width: 0;
@ -31,14 +26,7 @@
//flex-shrink: 0; //flex-shrink: 0;
} }
.mdb-list-group-item { .list-group-item {
@extend .list-group-item;
display: flex;
//flex-direction: row;
flex-flow: row wrap;
//flex-shrink: 0;
//flex-shrink: 1;
align-items: center;
padding: 1rem; padding: 1rem;
line-height: 1; line-height: 1;
@ -60,16 +48,24 @@
margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin) margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin)
} }
// second icon/label, or only icon/label marked as 'right', or any direct child element marked as right // second icon/label, or only icon/label marked as 'pull-*-right', or any direct child element marked as right
> .right, > .pull-xs-right,
> .pull-sm-right,
> .pull-md-right,
> .pull-lg-right,
> .pull-xl-right,
> * ~ .label:last-child, > * ~ .label:last-child,
> * ~ .material-icons:last-child { > * ~ .material-icons:last-child {
margin-right: 0; // some variations actually match the first-child margin-right: 0; // some variations actually match the first-child
margin-left: auto; margin-left: auto;
} }
// add the padding to icons, don't try on generic use of `right` because it may not be appropriate for some elements i.e. label-pill // add the padding to icons (margin-left is used for alignment)
.material-icons.right, // need the specificity .material-icons.pull-xs-right, // need the specificity
.material-icons.pull-sm-right,
.material-icons.pull-md-right,
.material-icons.pull-lg-right,
.material-icons.pull-xl-right,
.material-icons ~ .material-icons:last-child { .material-icons ~ .material-icons:last-child {
padding-left: 1rem; // guarantee space per spec padding-left: 1rem; // guarantee space per spec
} }