mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 12:54:13 +03:00
BS PR #18981 flexes list-group, assuming it is accepted, this integrates with those changes.
This commit is contained in:
Kevin Ross
parent
8eca18ebea
commit
60b085280e
|
|
@ -88,7 +88,7 @@ a, a:hover {
|
|||
background-color: $blue-grey-800;
|
||||
z-index: -2;
|
||||
|
||||
.mdb-list-group-item {
|
||||
.list-group-item {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
font-size: .8125rem;
|
||||
|
|
|
|||
|
|
@ -101,36 +101,36 @@ js: example.js
|
|||
</div>
|
||||
</header>
|
||||
<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
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">inbox</i>Inbox
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">delete</i>Trash
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">report</i>Spam
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">forum</i>Forums
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">flag</i>Updates
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">local_offer</i>Promos
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">shopping_cart</i>Purchases
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="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">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
|
||||
</a>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">Text only</li>
|
||||
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||
<button type="button" class="mdb-list-group-item">Button item</button>
|
||||
<a href="#" class="mdb-list-group-item active">Active link item</a>
|
||||
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||
<li class="list-group-item">Text only</li>
|
||||
<a href="#" class="list-group-item">Link item</a>
|
||||
<button type="button" class="list-group-item">Button item</button>
|
||||
<a href="#" class="list-group-item active">Active link item</a>
|
||||
<a href="#" class="list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -31,11 +31,11 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group mdb-list-group-sm">
|
||||
<li class="mdb-list-group-item">Text</li>
|
||||
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||
<button type="button" class="mdb-list-group-item">Button item</button>
|
||||
<a href="#" class="mdb-list-group-item active">Active link item</a>
|
||||
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||
<li class="list-group-item">Text</li>
|
||||
<a href="#" class="list-group-item">Link item</a>
|
||||
<button type="button" class="list-group-item">Button item</button>
|
||||
<a href="#" class="list-group-item active">Active link item</a>
|
||||
<a href="#" class="list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -43,41 +43,41 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon left
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icons left and right
|
||||
<i class="material-icons">face</i>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left and right
|
||||
<span class="label label-default label-pill">14</span>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
Icon <code>.right</code>
|
||||
<i class="material-icons right">face</i>
|
||||
<a class="list-group-item">
|
||||
Icon right
|
||||
<i class="material-icons pull-xs-right">face</i>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
Label pill <code>.right</code>
|
||||
<span class="label label-default label-pill right">14</span>
|
||||
<a class="list-group-item">
|
||||
Label pill right
|
||||
<span class="label label-default label-pill pull-xs-right">14</span>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill and icon
|
||||
<i class="material-icons">inbox</i>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon and label pill
|
||||
<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 %}
|
||||
<ul class="list-group">
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</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 %}
|
||||
<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">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</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 %}
|
||||
<ul class="list-group">
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
<div class="mdb-list-group-col">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Icon right</p>
|
||||
</div>
|
||||
<i class="material-icons right">face</i>
|
||||
<i class="material-icons pull-xs-right">face</i>
|
||||
</a>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Label pill to the right</p>
|
||||
</div>
|
||||
<span class="label label-default label-pill right">14</span>
|
||||
<span class="label label-default label-pill pull-xs-right">14</span>
|
||||
</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
@ -192,13 +192,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<a class="mdb-list-group-item">
|
||||
<a class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<li class="mdb-list-group-item">
|
||||
<li class="list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<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>
|
||||
|
|
@ -220,7 +220,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-list-group-item</code>
|
||||
<code>.list-group-item</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<code>.list-group-item</code>
|
||||
|
|
@ -237,18 +237,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
{% markdown %}None{% endmarkdown %}
|
||||
</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 %}
|
||||
</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 %}
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
// https://www.google.com/design/spec/components/lists.html#lists-specs
|
||||
|
||||
|
||||
// - single line 48dp
|
||||
// - single line avatar 56dp
|
||||
// - double line (with and w/o avatar) 72dp
|
||||
// - triple line 88dp
|
||||
|
||||
.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.
|
||||
padding: .5rem 0;
|
||||
|
||||
|
|
@ -16,14 +13,12 @@
|
|||
&.mdb-list-group-sm {
|
||||
padding: .25rem 0;
|
||||
|
||||
.mdb-list-group-item {
|
||||
.list-group-item {
|
||||
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 {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
|
@ -31,14 +26,7 @@
|
|||
//flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdb-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;
|
||||
.list-group-item {
|
||||
padding: 1rem;
|
||||
line-height: 1;
|
||||
|
||||
|
|
@ -60,16 +48,24 @@
|
|||
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
|
||||
> .right,
|
||||
// second icon/label, or only icon/label marked as 'pull-*-right', or any direct child element marked as right
|
||||
> .pull-xs-right,
|
||||
> .pull-sm-right,
|
||||
> .pull-md-right,
|
||||
> .pull-lg-right,
|
||||
> .pull-xl-right,
|
||||
> * ~ .label:last-child,
|
||||
> * ~ .material-icons:last-child {
|
||||
margin-right: 0; // some variations actually match the first-child
|
||||
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
|
||||
.material-icons.right, // need the specificity
|
||||
// add the padding to icons (margin-left is used for alignment)
|
||||
.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 {
|
||||
padding-left: 1rem; // guarantee space per spec
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user