mdb-ui-kit/scss/_list-group.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;
  }
}