diff --git a/src/material/button/button.ts b/src/material/button/button.ts index 37a82770e732..9dbed00542fb 100644 --- a/src/material/button/button.ts +++ b/src/material/button/button.ts @@ -94,7 +94,7 @@ export class MatButton extends _MatButtonMixinBase @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string) { super(elementRef); - // For each of the variant selectors that is prevent in the button's host + // For each of the variant selectors that is present in the button's host // attributes, add the correct corresponding class. for (const attr of BUTTON_HOST_ATTRIBUTES) { if (this._hasHostAttributes(attr)) { @@ -102,6 +102,11 @@ export class MatButton extends _MatButtonMixinBase } } + // Add a class that applies to all buttons. This makes it easier to target if somebody + // wants to target all Material buttons. We do it here rather than `host` to ensure that + // the class is applied to derived classes. + elementRef.nativeElement.classList.add('mat-button-base'); + this._focusMonitor.monitor(this._elementRef, true); if (this.isRoundButton) { diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 18c3f1c353eb..b09d10254f68 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -61,10 +61,7 @@ $mat-dialog-button-margin: 8px !default; justify-content: center; } - .mat-button + .mat-button, - .mat-raised-button + .mat-raised-button, - .mat-button + .mat-raised-button, - .mat-raised-button + .mat-button { + .mat-button-base + .mat-button-base { margin-left: $mat-dialog-button-margin; [dir='rtl'] & {