mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 19:44:07 +03:00
list group working, still need to review buttons/links
This commit is contained in:
Kevin Ross
parent
dac3c98b47
commit
d6c33cae76
|
|
@ -7,6 +7,65 @@ group: material-design
|
|||
Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve
|
||||
the varieties specified. ([Specification](https://www.google.com/design/spec/components/lists.html#lists-specs))
|
||||
|
||||
The material classes introduced are:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Classes</th>
|
||||
<th>BS Equivalent</th>
|
||||
<th>Differences</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-item`{% endmarkdown %}
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}`.list-group-item`{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-col`{% endmarkdown %}
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}None{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Flexbox column - additional class to use within a `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.right`{% endmarkdown %}
|
||||
</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-sm`{% endmarkdown %}
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}None{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
|
|
@ -18,10 +77,21 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
### Text
|
||||
|
||||
{% example html %}
|
||||
<ul class="mdb-list-group">
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">Inbox</li>
|
||||
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||
<button type="button" class="list-group-item">Button item</button>
|
||||
<button type="button" class="mdb-list-group-item">Button item</button>
|
||||
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Dense
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group mdb-list-group-sm">
|
||||
<li class="mdb-list-group-item">Inbox</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 disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
@ -29,24 +99,46 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
### Icons and labels
|
||||
|
||||
{% example html %}
|
||||
<ul class="mdb-list-group">
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon left
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left
|
||||
</li>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icons left and right
|
||||
<i class="material-icons">face</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
Icon right
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left and right
|
||||
<span class="label label-default label-pill">14</span>
|
||||
</li>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
Icon <code>.right</code>
|
||||
<i class="material-icons right">face</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
Label pill to the right
|
||||
Label pill <code>.right</code>
|
||||
<span class="label label-default label-pill right">14</span>
|
||||
</li>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill and icon
|
||||
<i class="material-icons">inbox</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon and label pill
|
||||
<span class="label label-default label-pill">14</span>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -57,7 +149,32 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
### Text
|
||||
|
||||
{% example html %}
|
||||
<ul class="mdb-list-group">
|
||||
<ul class="list-group">
|
||||
<li class="mdb-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>
|
||||
</li>
|
||||
<li class="mdb-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>
|
||||
</li>
|
||||
<li class="mdb-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>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Dense
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group mdb-list-group-sm">
|
||||
<li class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
|
|
@ -82,7 +199,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
### Icons and labels
|
||||
|
||||
{% example html %}
|
||||
<ul class="mdb-list-group">
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
|
|
@ -91,6 +208,14 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
</div>
|
||||
</li>
|
||||
|
||||
<li class="mdb-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>
|
||||
<p class="list-group-item-text">Icon left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
|
|
@ -118,3 +243,24 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
## Three line
|
||||
|
||||
### Text
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-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">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>
|
||||
</li>
|
||||
<li class="mdb-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">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>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
|||
|
|
@ -115,11 +115,15 @@ linters:
|
|||
"max-height",
|
||||
"flex",
|
||||
"flex-direction",
|
||||
"flex-basis",
|
||||
"flex-flow",
|
||||
"flex-wrap",
|
||||
"flex-order",
|
||||
"flex-pack",
|
||||
"flex-align",
|
||||
"flex-shrink",
|
||||
"align-items",
|
||||
"justify-content",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
|
|
|
|||
|
|
@ -1,44 +1,77 @@
|
|||
// https://www.google.com/design/spec/components/lists.html#lists-specs
|
||||
|
||||
|
||||
// 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 {
|
||||
//
|
||||
@extend .list-group;
|
||||
// - single line 48dp
|
||||
// - single line avatar 56dp
|
||||
// - double line (with and w/o avatar) 72dp
|
||||
// - 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.
|
||||
padding: .5rem 0;
|
||||
|
||||
// dense size variation
|
||||
&.mdb-list-group-sm {
|
||||
padding: .25rem 0;
|
||||
|
||||
.mdb-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;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
//flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdb-list-group-item {
|
||||
@extend .list-group-item;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
padding: .5rem 1rem;
|
||||
flex-flow: row wrap;
|
||||
//flex-shrink: 0;
|
||||
//flex-shrink: 1;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
line-height: 1;
|
||||
|
||||
.list-group-item-text { // word wrap? http://stackoverflow.com/a/26535469/2363935
|
||||
//flex-flow: row wrap;
|
||||
min-width: 0;
|
||||
max-height: 2.188rem; // 88dp tile total height
|
||||
//flex: 0 1 auto; // important http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
//------
|
||||
// NOTE: there are many variations of icons in a list, each one of these rules exist for a reason.
|
||||
// NOTE: there are many variations of icons/labels in a list, each one of these rules exist for a reason.
|
||||
|
||||
// first icon on the left
|
||||
.material-icons:first-child {
|
||||
// first icon/label on the left
|
||||
:first-child {
|
||||
margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin)
|
||||
}
|
||||
|
||||
// second icon, or only icon marked as 'right', or any direct child element marked as right
|
||||
// second icon/label, or only icon/label marked as 'right', or any direct child element marked as right
|
||||
> .right,
|
||||
.material-icons.right, // need the specificity
|
||||
.material-icons ~ .material-icons:last-child {
|
||||
> * ~ .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
|
||||
.material-icons ~ .material-icons:last-child {
|
||||
padding-left: 1rem; // guarantee space per spec
|
||||
}
|
||||
//------
|
||||
|
||||
.list-group-item-heading {
|
||||
//font-size: 1rem;
|
||||
|
|
@ -48,98 +81,4 @@
|
|||
font-size: .875rem;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// overflow: hidden;
|
||||
// background-color: transparent;
|
||||
// border: 0;
|
||||
// &.baseline {
|
||||
// border-bottom: 1px solid #cecece;
|
||||
// &:last-child {
|
||||
// border-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// .row-picture, .row-action-primary {
|
||||
// //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
|
||||
// display: inline-block;
|
||||
// padding-right: 16px;
|
||||
// img, i, label {
|
||||
// display: block;
|
||||
// width: 56px;
|
||||
// height: 56px;
|
||||
// }
|
||||
// img {
|
||||
// padding: 1px;
|
||||
// background: rgba($black, 0.1);
|
||||
// &.mdb-radio-outer-circle {
|
||||
// border-radius: 100%;
|
||||
// }
|
||||
// }
|
||||
// i {
|
||||
// font-size: 20px;
|
||||
// line-height: 56px;
|
||||
// color: $white;
|
||||
// text-align: center;
|
||||
// background: rgba($black, 0.25);
|
||||
// border-radius: 100%;
|
||||
// }
|
||||
// label {
|
||||
// margin: 5px -7px -5px 7px;
|
||||
// .checkbox-decorator {
|
||||
// left: -10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .row-content {
|
||||
// display: inline-block;
|
||||
// width: unquote("calc(100% - 92px)");
|
||||
// min-height: 66px;
|
||||
// .action-secondary {
|
||||
// position: absolute;
|
||||
// top: 16px;
|
||||
// right: 16px;
|
||||
// i {
|
||||
// font-size: 20px;
|
||||
// color: rgba($black, 0.25);
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
// .action-secondary ~ * {
|
||||
// max-width: unquote("calc(100% - 30px)");
|
||||
// }
|
||||
// .least-content {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 16px;
|
||||
// font-size: 14px;
|
||||
// color: rgba($black, 0.54);
|
||||
// }
|
||||
// }
|
||||
// .list-group-item-heading {
|
||||
// font-size: 20px;
|
||||
// line-height: 29px;
|
||||
// color: rgba($black, 0.77);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .list-group-item.active {
|
||||
// &:hover, &:focus {
|
||||
// background: rgba($black, .15);
|
||||
// outline: 10px solid rgba($black, .15);
|
||||
// }
|
||||
// .list-group-item-heading, .list-group-item-text {
|
||||
// color: $gray-dark;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .list-group-separator {
|
||||
// margin-top: 10px;
|
||||
// margin-bottom: 10px;
|
||||
// overflow: hidden;
|
||||
// clear: both;
|
||||
// &::before {
|
||||
// float: right;
|
||||
// width: unquote("calc(100% - 90px)");
|
||||
// content: "";
|
||||
// border-bottom: 1px solid rgba($black, 0.1);
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
//$list-group-bg: #fff !default;
|
||||
//$list-group-border-color: #ddd !default;
|
||||
//$list-group-border-width: $border-width !default;
|
||||
$list-group-border-width: 0 !default; // $border-width
|
||||
$list-group-border-radius: 0 !default; // $border-radius
|
||||
//
|
||||
//$list-group-hover-bg: #f5f5f5 !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user