diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss index 09f44509c4e3..7b92854808e7 100644 --- a/src/lib/list/_list-theme.scss +++ b/src/lib/list/_list-theme.scss @@ -8,7 +8,7 @@ $background: map-get($theme, background); $foreground: map-get($theme, foreground); - .mat-list, .mat-nav-list, .mat-selection-list { + .mat-list-base { .mat-list-item { color: mat-color($foreground, text); } @@ -46,7 +46,7 @@ } // Default list - .mat-list, .mat-nav-list, .mat-selection-list { + .mat-list-base { .mat-list-item { font-size: mat-font-size($config, subheading-2); @include mat-line-base(mat-font-size($config, body-1)); @@ -65,7 +65,7 @@ } // Dense list - .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] { + .mat-list-base[dense] { .mat-list-item { font-size: mat-font-size($config, caption); @include mat-line-base(mat-font-size($config, caption)); diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 030f6fcd6de9..c28e8c832628 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -189,9 +189,7 @@ $mat-list-item-inset-divider-offset: 72px; // This needs slightly more specificity, because it // can be overwritten by the typography styles. - .mat-list &, - .mat-nav-list &, - .mat-selection-list & { + .mat-list-base & { margin: 0; } } @@ -206,7 +204,7 @@ $mat-list-item-inset-divider-offset: 72px; } } -.mat-list, .mat-nav-list, .mat-selection-list { +.mat-list-base { padding-top: $mat-list-top-padding; display: block; -webkit-tap-highlight-color: transparent; @@ -229,9 +227,7 @@ $mat-list-item-inset-divider-offset: 72px; } -.mat-list[dense], -.mat-nav-list[dense], -.mat-selection-list[dense] { +.mat-list-base[dense] { padding-top: $mat-dense-top-padding; display: block; diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 55011dea74a6..c01dc9d41147 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -36,7 +36,7 @@ export const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase); exportAs: 'matNavList', host: { 'role': 'navigation', - 'class': 'mat-nav-list' + 'class': 'mat-nav-list mat-list-base' }, templateUrl: 'list.html', styleUrls: ['list.css'], @@ -51,7 +51,9 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {} selector: 'mat-list', exportAs: 'matList', templateUrl: 'list.html', - host: {'class': 'mat-list'}, + host: { + 'class': 'mat-list mat-list-base' + }, styleUrls: ['list.css'], inputs: ['disableRipple'], encapsulation: ViewEncapsulation.None, diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index f2dc0862da31..d22041502886 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -263,7 +263,7 @@ export class MatListOption extends _MatListOptionMixinBase host: { 'role': 'listbox', '[tabIndex]': 'tabIndex', - 'class': 'mat-selection-list', + 'class': 'mat-selection-list mat-list-base', '(focus)': 'focus()', '(blur)': '_onTouched()', '(keydown)': '_keydown($event)',