chore(button): dramatically clean-up button css.

modules/angular2_material/src/components/button/button.ts

@@ -2,7 +2,7 @@ import {Component, View, LifecycleEvent, ViewEncapsulation} from 'angular2/angul
 import {isPresent} from 'angular2/src/facade/lang';
 
 
-@Component({selector: '[md-button]:not([href])'})
+@Component({selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)'})
 @View({
   templateUrl: 'package:angular2_material/src/components/button/button.html',
   encapsulation: ViewEncapsulation.NONE

modules/angular2_material/src/core/style/shadows.scss

@@ -1,9 +1,5 @@
 // Elements can have an "elevation" from 1 to 5, signified by shadows.
 // See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
-.md-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
 
-.md-shadow-bottom-z-2 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
-}
+$md-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+$md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);

modules/angular2_material/src/core/style/theme-functions.scss

@@ -2,6 +2,12 @@
 // md-palette: used for defining your theme in terms of Material hues.
 // md-color: apply colors to components from the palette. Consumes the output of md-palette
 
+// Implement the rem unit with SCSS so we don't have to actually set a font-size on
+// the user's body element.
+@function rem($multiplier) {
+  $font-size: 10px;
+  @return $multiplier * $font-size;
+}
 
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 @function md-contrast($color-map, $hue, $contrast-color-map) {

modules/angular2_material/src/core/style/variables.scss

@@ -1,3 +1,5 @@
+@import 'theme-functions';
+
 // Font
 $font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
 
@@ -9,6 +11,9 @@ $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
+// Typography
+$md-body-font-size-base: rem(1.400) !default;
+
 
 // App bar variables
 $app-bar-height: 64px;

modules/examples/src/material/button/demo_app.html

@@ -7,21 +7,13 @@
     position: relative !important;
     padding-bottom: 10px;
   }
-  section [md-button]:not(.md-fab) {
-    min-width: 10em;
+  .label {
+    position: absolute;
+    bottom: 5px;
+    left: 7px;
+    color: #ccc;
+    font-size: 14px;
   }
-  section [md-button] {
-    display: inline-block;
-    margin: 1em;
-    line-height: 25px;
-  }
-.label {
-  position: absolute;
-  bottom: 5px;
-  left: 7px;
-  color: #ccc;
-  font-size: 14px;
-}
 </style>
 
 <h1>Button demo</h1>
@@ -52,25 +44,25 @@
 
 <section>
   <span class="label">Raised button</span>
-  <button md-button class="md-raised" (^click)="click('raised')">BUTTON</button>
-  <button md-button class="md-raised md-primary" (^click)="click('raised primary')">PRIMARY</button>
-  <button md-button class="md-raised" disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
-  <button md-button class="md-raised md-accent" (^click)="click('raised accent')">ACCENT</button>
-  <button md-button class="md-raised md-warn" (^click)="click('raised warn')">WARN</button>
+  <button md-raised-button (^click)="click('raised')">BUTTON</button>
+  <button md-raised-button class="md-primary" (^click)="click('raised primary')">PRIMARY</button>
+  <button md-raised-button disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
+  <button md-raised-button class="md-accent" (^click)="click('raised accent')">ACCENT</button>
+  <button md-raised-button class="md-warn" (^click)="click('raised warn')">WARN</button>
 </section>
 <section>
   <span class="label">Fab button</span>
-  <button md-button class="md-fab" (^click)="click('fab')">BTN</button>
-  <button md-button class="md-fab md-primary" (^click)="click('fab primary')">PRMY</button>
-  <button md-button class="md-fab" disabled="disabled" (^click)="click('fab disabled')">DIS</button>
-  <button md-button class="md-fab md-accent" (^click)="click('fab accent')">ACC</button>
-  <button md-button class="md-fab md-warn" (^click)="click('fab warn')">WRN</button>
+  <button md-fab (^click)="click('fab')">BTN</button>
+  <button md-fab class="md-primary" (^click)="click('fab primary')">PRMY</button>
+  <button md-fab disabled="disabled" (^click)="click('fab disabled')">DIS</button>
+  <button md-fab class="md-accent" (^click)="click('fab accent')">ACC</button>
+  <button md-fab class="md-warn" (^click)="click('fab warn')">WRN</button>
 </section>
 <section>
   <span class="label">Anchor / hyperlink</span>
   <a md-button href="http://google.com" target="_blank">HREF</a>
   <a md-button href="http://google.com" disabled>DISABLED HREF</a>
-  <a md-button class="md-raised" target="_blank" href="http://google.com">RAISED HREF</a>
+  <a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
 </section>