list-item: SCSS padding inconsistent between clickable / non-clickable items

[jayharris]

Actual Behavior:

• What is the issue? * The SCSS list item padding variables—$list-item-padding-vertical and $list-item-padding-horizontal—are only applied to non-clickable (no ng-click or ng-href) list items. To consistently override list item padding, a new CSS rule must be applied, rather than simply overriding the variable values.
• What is the expected behavior? When overriding the SCSS list item padding variables, the new padding is applied consistently to clickable and non-clickable list items.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/jayaranasoft/pen/KaxEjR
• Details: $list-item-padding-horizontal set to 50px, overriding the default of 16px

Angular Versions: *

• Angular Version: 1.5.x
• Angular Material Version: 1.1.3

Additional Information:

• Browser Type: * All
• Browser Version: * All
• OS: * All

The list item variables (list.scss#L19-20)...

$list-item-padding-vertical: 0px !default;
$list-item-padding-horizontal: $baseline-grid * 2 !default;

...are only applied to non-clickable list items (list.scss#L176)...

md-list-item {
  &.md-no-proxy,
  .md-no-style {
    padding: $list-item-padding-vertical $list-item-padding-horizontal;
  }
}

...and not to clickable list items (list.scss#L145).

md-list-item {
  &._md-button-wrap {
    > div.md-button:first-child {
      padding: 0 16px;
    }
  }
}

Changing Line 145 to use the padding variables—padding: $list-item-padding-vertical $list-item-padding-horizontal;—resolves the issue.