Start of ripple effects

ionic/components/app/test/material/index.ts

@@ -14,7 +14,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
     '</ion-nav-items>' +
   '</ion-navbar>' +
   '<ion-content>' +
-    `<ion-list>
+    `
+    <button primary md-ripple>Cleeek</button>
+    <ion-list>
       <ion-item>
         <h3>All Genres</h3>
         <h4>Jan 17 2015</h4>

ionic/components/button/extensions/material.scss

@@ -8,7 +8,7 @@ $button-material-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !defa
 $button-material-border-radius:            3px !default;
 
 
-.button.button-md {
+.mode-md button {
   border: 0;
   border-radius: $button-material-border-radius;
 

ionic/components/material/ripple.ts

@@ -0,0 +1,17 @@
+import {Directive, ElementRef} from 'angular2/angular2';
+
+@Directive({
+  selector: '[md-ripple]',
+  host: {
+    '(click)': 'elementClicked($event)'
+  }
+})
+export class MaterialRipple {
+  constructor(elementRef: ElementRef) {
+    this.elementRef = elementRef;
+    console.log('Ripple', elementRef);
+  }
+
+  elementClicked(event) {
+  }
+}