mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 11:29:10 +03:00
87 lines
2.4 KiB
SCSS
87 lines
2.4 KiB
SCSS
// 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;
|
|
|
|
// 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;
|
|
}
|
|
|
|
.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;
|
|
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
|
|
// FIXME: text overflow with ellipsis is not working
|
|
//flex: 0 1 auto; // 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/labels in a list, each one of these rules exist for a reason.
|
|
|
|
// 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/label, or only icon/label marked as 'right', or any direct child element marked as right
|
|
> .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
|
|
.material-icons ~ .material-icons:last-child {
|
|
padding-left: 1rem; // guarantee space per spec
|
|
}
|
|
//------
|
|
|
|
.list-group-item-heading {
|
|
//font-size: 1rem;
|
|
}
|
|
|
|
.list-group-item-text {
|
|
font-size: .875rem;
|
|
color: $gray;
|
|
}
|
|
}
|