fix(list): incorrect padding for list-items with avatars, icons

[devversion]

Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the mat-list-item-content of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the mat-list-item-content already has a padding for that one.

Fixes #9156

[crisbeto]

LGTM

[andrewseguin]

Turns out this caused an issue that was caught in screenshot diffs internally.

If there is no avatar or icon, the mat-list-text should have no padding due to the rule:

&:nth-child(2) {
  padding: 0;
}

However, it is now always overridden to have padding again by the following CSS:

  // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
  // list-item. This means that there should be a padding for the mat-list-text on the start-side.
  .mat-list-item-content .mat-list-text {
    padding-left: $mat-list-side-padding;

    [dir='rtl'] & {
      padding-right: $mat-list-side-padding;
      padding-left: 0;
    }
  }

  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
  // end of the list option. Since there is a secondary item (checkbox) at the end of the
  // option, there needs to be a padding for the mat-list-text on the end-side.
  .mat-list-item-content-reverse .mat-list-text {
    padding-left: 0;
    padding-right: $mat-list-side-padding;

    [dir='rtl'] & {
      padding-right: 0;
      padding-left: $mat-list-side-padding;
    }
  }

A likely fix would be to just define those styles in a different order

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}