+
-
+
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 0f0c7d511023..63bab271c252 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -4,9 +4,8 @@
@import 'button-base';
@import '../core/a11y/a11y';
-// TODO(kara): Replace attribute selectors with class selectors when possible
-[md-button], [md-icon-button] {
- @extend %md-button-base;
+.mat-button, .mat-icon-button {
+ @extend %mat-button-base;
// Only flat button and icon buttons should inherit the color
color: currentColor;
@@ -14,58 +13,58 @@
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
&:hover {
// Use the same visual treatment for hover as for focus.
- .md-button-focus-overlay {
+ .mat-button-focus-overlay {
opacity: 1;
}
}
&[disabled]:hover {
- &.md-primary, &.md-accent, &.md-warn, .md-button-focus-overlay {
+ &.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
background-color: transparent;
}
}
}
-[md-raised-button] {
- @extend %md-raised-button;
+.mat-raised-button {
+ @extend %mat-raised-button;
}
-[md-fab] {
- @include md-fab($md-fab-size, $md-fab-padding);
+.mat-fab {
+ @include mat-fab($mat-fab-size, $mat-fab-padding);
}
-[md-mini-fab] {
- @include md-fab($md-mini-fab-size, $md-mini-fab-padding);
+.mat-mini-fab {
+ @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
}
-[md-icon-button] {
+.mat-icon-button {
padding: 0;
// Reset the min-width from the button base.
min-width: 0;
- width: $md-icon-button-size;
- height: $md-icon-button-size;
+ width: $mat-icon-button-size;
+ height: $mat-icon-button-size;
flex-shrink: 0;
- line-height: $md-icon-button-size;
- border-radius: $md-icon-button-border-radius;
+ line-height: $mat-icon-button-size;
+ border-radius: $mat-icon-button-border-radius;
- i, md-icon {
- line-height: $md-icon-button-line-height;
+ i, .mat-icon {
+ line-height: $mat-icon-button-line-height;
}
}
// The text and icon should be vertical aligned inside a button
-[md-button], [md-raised-button], [md-icon-button] {
- .md-button-wrapper > * {
+.mat-button, .mat-raised-button, .mat-icon-button {
+ .mat-button-wrapper > * {
vertical-align: middle;
}
}
// The ripple container should match the bounds of the entire button.
-.md-button-ripple, .md-button-focus-overlay {
+.mat-button-ripple, .mat-button-focus-overlay {
position: absolute;
top: 0;
left: 0;
@@ -76,7 +75,7 @@
// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
// element, however we use a proper DOM element in order to be able to disable the default
// touch action. This makes the buttons more responsive on touch devices.
-.md-button-focus-overlay {
+.mat-button-focus-overlay {
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
// black, 12% opacity shade over the normal color (for both light and dark themes).
background-color: rgba(black, 0.12);
@@ -93,7 +92,7 @@
}
// For round buttons, the ripple container should clip child ripples to a circle.
-.md-button-ripple-round {
+.mat-button-ripple-round {
border-radius: 50%;
// z-index needed to make clipping to border-radius work correctly.
// http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti
@@ -102,7 +101,7 @@
// Add an outline to make it more visible in high contrast mode.
@include cdk-high-contrast {
- [md-button], [md-raised-button], [md-icon-button], [md-fab], [md-mini-fab] {
+ .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
outline: solid 1px;
}
}
diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts
index b0bfaf3c7697..564a3a29d0f3 100644
--- a/src/lib/button/button.spec.ts
+++ b/src/lib/button/button.spec.ts
@@ -30,13 +30,13 @@ describe('MdButton', () => {
testComponent.buttonColor = 'primary';
fixture.detectChanges();
- expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
- expect(aDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+ expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
+ expect(aDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
testComponent.buttonColor = 'accent';
fixture.detectChanges();
- expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
- expect(aDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+ expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
+ expect(aDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
});
it('should should not clear previous defined classes', () => {
@@ -49,14 +49,14 @@ describe('MdButton', () => {
testComponent.buttonColor = 'primary';
fixture.detectChanges();
- expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+ expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
testComponent.buttonColor = 'accent';
fixture.detectChanges();
- expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
- expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+ expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(false);
+ expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
});
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
index 192f677d100b..b19460eb6e7b 100644
--- a/src/lib/button/button.ts
+++ b/src/lib/button/button.ts
@@ -7,7 +7,7 @@ import {
ElementRef,
Renderer,
NgModule,
- ModuleWithProviders,
+ ModuleWithProviders, Directive,
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
@@ -16,6 +16,66 @@ import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../cor
// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
// TODO(kara): Convert attribute selectors to classes when attr maps become available
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ */
+@Directive({
+ selector: 'button[md-button], button[mat-button], a[md-button], a[mat-button]',
+ host: {
+ '[class.mat-button]': 'true'
+ }
+})
+export class MdButtonCssMatStyler {}
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ */
+@Directive({
+ selector:
+ 'button[md-raised-button], button[mat-raised-button], ' +
+ 'a[md-raised-button], a[mat-raised-button]',
+ host: {
+ '[class.mat-raised-button]': 'true'
+ }
+})
+export class MdRaisedButtonCssMatStyler {}
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ */
+@Directive({
+ selector:
+ 'button[md-icon-button], button[mat-icon-button], a[md-icon-button], a[mat-icon-button]',
+ host: {
+ '[class.mat-icon-button]': 'true',
+ }
+})
+export class MdIconButtonCssMatStyler {}
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ */
+@Directive({
+ selector: 'button[md-fab], button[mat-fab], a[md-fab], a[mat-fab]',
+ host: {
+ '[class.mat-fab]': 'true'
+ }
+})
+export class MdFabCssMatStyler {}
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ */
+@Directive({
+ selector: 'button[md-mini-fab], button[mat-mini-fab], a[md-mini-fab], a[mat-mini-fab]',
+ host: {
+ '[class.mat-mini-fab]': 'true'
+ }
+})
+export class MdMiniFabCssMatStyler {}
+
+
/**
* Material design button.
*/
@@ -27,7 +87,7 @@ import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../cor
'button[mat-fab], button[mat-mini-fab]',
host: {
'[disabled]': 'disabled',
- '[class.md-button-focus]': '_isKeyboardFocused',
+ '[class.mat-button-focus]': '_isKeyboardFocused',
'(mousedown)': '_setMousedown()',
'(focus)': '_setKeyboardFocus()',
'(blur)': '_removeKeyboardFocus()',
@@ -84,7 +144,7 @@ export class MdButton {
_setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
- this._renderer.setElementClass(this._getHostElement(), `md-${color}`, isAdd);
+ this._renderer.setElementClass(this._getHostElement(), `mat-${color}`, isAdd);
}
}
@@ -128,7 +188,7 @@ export class MdButton {
host: {
'[attr.disabled]': 'disabled',
'[attr.aria-disabled]': '_isAriaDisabled',
- '[class.md-button-focus]': '_isKeyboardFocused',
+ '[class.mat-button-focus]': '_isKeyboardFocused',
'(mousedown)': '_setMousedown()',
'(focus)': '_setKeyboardFocus()',
'(blur)': '_removeKeyboardFocus()',
@@ -165,8 +225,24 @@ export class MdAnchor extends MdButton {
@NgModule({
imports: [CommonModule, MdRippleModule, CompatibilityModule],
- exports: [MdButton, MdAnchor, CompatibilityModule],
- declarations: [MdButton, MdAnchor],
+ exports: [
+ MdButton, MdAnchor,
+ CompatibilityModule,
+ MdButtonCssMatStyler,
+ MdRaisedButtonCssMatStyler,
+ MdIconButtonCssMatStyler,
+ MdFabCssMatStyler,
+ MdMiniFabCssMatStyler
+ ],
+ declarations: [
+ MdButton,
+ MdAnchor,
+ MdButtonCssMatStyler,
+ MdRaisedButtonCssMatStyler,
+ MdIconButtonCssMatStyler,
+ MdFabCssMatStyler,
+ MdMiniFabCssMatStyler
+ ],
})
export class MdButtonModule {
/** @deprecated */
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
index d00e76412edd..f3a9adad7507 100644
--- a/src/lib/card/_card-theme.scss
+++ b/src/lib/card/_card-theme.scss
@@ -2,16 +2,16 @@
@import '../core/theming/theming';
-@mixin md-card-theme($theme) {
+@mixin mat-card-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
- md-card {
- background: md-color($background, card);
- color: md-color($foreground, base);
+ .mat-card {
+ background: mat-color($background, card);
+ color: mat-color($foreground, base);
}
- md-card-subtitle {
- color: md-color($foreground, secondary-text);
+ .mat-card-subtitle {
+ color: mat-color($foreground, secondary-text);
}
}
diff --git a/src/lib/card/card-header.html b/src/lib/card/card-header.html
index 772bf0459360..ddd633c467e5 100644
--- a/src/lib/card/card-header.html
+++ b/src/lib/card/card-header.html
@@ -1,5 +1,5 @@
-