style(demo): prefix css w/ demo- & use roboto

src/demo-app/button/button-demo.html

@@ -1,60 +1,61 @@
-<section>
+<div class="demo-button">
+  <section>
     <button md-button>flat</button>
     <button md-raised-button>raised</button>
     <button md-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
     <button md-mini-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
-</section>
+  </section>
 
-<section>
+  <section>
     <a href="http://www.google.com" md-button color="primary">link</a>
     <a href="http://www.google.com" md-raised-button>link</a>
     <a href="http://www.google.com" md-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </a>
     <a href="http://www.google.com" md-mini-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </a>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-button color="primary">primary</button>
     <button md-button color="accent">accent</button>
     <button md-button color="warn">warn</button>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-raised-button color="primary">primary</button>
     <button md-raised-button color="accent">accent</button>
     <button md-raised-button color="warn">warn</button>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-fab color="primary">
-        <i class="material-icons md-24">home</i>
+      <i class="material-icons md-24">home</i>
     </button>
     <button md-fab color="accent">
-        <i class="material-icons md-24">favorite</i>
+      <i class="material-icons md-24">favorite</i>
     </button>
     <button md-fab color="warn">
-        <i class="material-icons md-24">feedback</i>
+      <i class="material-icons md-24">feedback</i>
     </button>
-</section>
+  </section>
 
-<section>
+  <section>
     <div>
-        <span>isDisabled: {{isDisabled}}</span>
-        <button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
+      <span>isDisabled: {{isDisabled}}</span>
+      <button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
     </div>
     <button md-button [disabled]="isDisabled">off</button>
     <button md-button color="primary" [disabled]="isDisabled">off</button>
     <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
     <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
-</section>
-
+  </section>
+</div>

src/demo-app/button/button-demo.scss

@@ -1,19 +1,13 @@
 
-// Helps fonts on OSX looks more consistent with other systems
-// Isn't currently in button styles due to performance concerns
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-button, a, {
-  margin: 8px;
-  text-transform: uppercase;
-}
-
-
-section {
-  background-color: #f7f7f7;
-  margin: 8px;
+.demo-button {
+  button, a {
+    margin: 8px;
+    text-transform: uppercase;
+  }
+
+  section {
+    background-color: #f7f7f7;
+    margin: 8px;
+  }
 }
 

src/demo-app/card/card-demo.html

@@ -1,4 +1,4 @@
-<div class="card-container">
+<div class="demo-card-container">
   <md-card>
     <md-card-title-group>
         <md-card-title>Card with title</md-card-title>
@@ -40,11 +40,11 @@
     </md-card-content>
   </md-card>
 
-  <md-card class="blue md-card-flat">
+  <md-card class="demo-card-blue md-card-flat">
     <md-card-title>Easily customizable</md-card-title>
     <md-card-actions>
       <button md-button>First</button>
       <button md-button>Second</button>
     </md-card-actions>
   </md-card>
-</div>
+</div>

src/demo-app/card/card-demo.scss

@@ -1,22 +1,22 @@
-md-card {
-  margin: 0 16px 16px 0;
-  width: 350px;
-}
-
-.card-container {
+.demo-card-container {
   display: flex;
   flex-flow: column nowrap;
+
+  md-card {
+    margin: 0 16px 16px 0;
+    width: 350px;
+  }
+
+  img {
+    background-color: gray;
+  }
 }
 
-.blue {
+.demo-card-blue {
   background-color: #B0BECC;
-}
 
-.blue md-card-actions {
-  display: flex;
-  flex-direction: column;
-}
-
-img {
-  background-color: gray;
+  md-card-actions {
+    display: flex;
+    flex-direction: column;
+  }
 }

src/demo-app/demo-app.html

@@ -1,15 +1,17 @@
-<h1 class="title">Angular Material2 Demos</h1>
-<ul>
-  <li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
-  <li><a [routerLink]="['CardDemo']">Card demo</a></li>
-  <li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
-  <li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
-  <li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
-  <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
-</ul>
-<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
-  {{root.dir.toUpperCase()}}
-</button>
-<div #root="$implicit" dir="ltr">
-  <router-outlet></router-outlet>
+<div class="demo-root">
+  <h1>Angular Material2 Demos</h1>
+  <ul>
+    <li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
+    <li><a [routerLink]="['CardDemo']">Card demo</a></li>
+    <li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
+    <li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
+    <li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
+    <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
+  </ul>
+  <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
+    {{root.dir.toUpperCase()}}
+  </button>
+  <div #root="$implicit" dir="ltr" class="demo-content">
+    <router-outlet></router-outlet>
+  </div>
 </div>

src/demo-app/demo-app.scss

@@ -1,3 +1,14 @@
+.demo-root {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  padding: 20px;
+
+  // Helps fonts on OSX looks more consistent with other systems
+  // Isn't currently in button styles due to performance concerns
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
 
 .demo-content {
   padding: 15px;

src/demo-app/progress-circle/progress-circle-demo.html

@@ -1,5 +1,5 @@
 <h1>Determinate</h1>
-<div class="demo-progress-circle-container">
+<div class="demo-progress-circle">
     <md-progress-circle mode="determinate"
                         [value]="progressValue"
                         class="md-primary"></md-progress-circle>
@@ -13,7 +13,7 @@
 
 
 <h1>Indeterminate</h1>
-<div class="demo-progress-circle-container">
+<div class="demo-progress-circle">
     <md-progress-circle mode="indeterminate"></md-progress-circle>
     <md-progress-circle mode="indeterminate"
                         class="md-accent"></md-progress-circle>

src/demo-app/progress-circle/progress-circle-demo.scss

@@ -1,4 +1,4 @@
-.demo-progress-circle-container {
+.demo-progress-circle {
   width: 100%;
 
   md-progress-circle,
@@ -6,4 +6,4 @@
     display: inline-block;
   }
 
-}
+}

src/demo-app/sidenav/sidenav-demo.html

@@ -1,4 +1,4 @@
-<md-sidenav-layout>
+<md-sidenav-layout class="demo-sidenav-layout">
   <md-sidenav #start (open)="myinput.focus()" mode="side">
     Start Side Drawer
     <br>
@@ -19,7 +19,7 @@
     <button md-button (click)="end.close()">Close</button>
   </md-sidenav>
 
-  <div class="content">
+  <div class="demo-sidenav-content">
     <h1>My Content</h1>
 
     <div>

src/demo-app/sidenav/sidenav-demo.scss

@@ -1,8 +1,11 @@
-
-md-sidenav-layout {
+.demo-sidenav-layout {
   border: 3px solid black;
 
   md-sidenav {
     padding: 10px;
   }
 }
+
+.demo-sidenav-content {
+  padding: 15px;
+}