fix(progress-circular): add the dark theme background in the demo

Fixes the `progressCircular` demo showing the dark theme colors, but on a light background. Also makes the padding consistent with the other demos.

Closes #7775

Author: crisbeto

src/components/progressCircular/demoBasicUsage/index.html

@@ -1,55 +1,57 @@
-<div ng-controller="AppCtrl as vm" layout="column" layout-margin style="padding:25px;" ng-cloak>
+<div ng-controller="AppCtrl as vm" layout="column" ng-cloak>
 
-  <h4 style="margin-top:10px">Determinate</h4>
+  <md-content layout-padding>
+    <h4>Determinate</h4>
 
-  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
-    give users a quick sense of how long an operation will take.</p>
+    <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
+      give users a quick sense of how long an operation will take.</p>
 
-  <div layout="row" layout-sm="column" layout-align="space-around">
-    <md-progress-circular md-mode="determinate" value="{{vm.determinateValue}}"></md-progress-circular>
-  </div>
+    <div layout="row" layout-sm="column" layout-align="space-around">
+      <md-progress-circular md-mode="determinate" value="{{vm.determinateValue}}"></md-progress-circular>
+    </div>
 
-  <h4>Indeterminate</h4>
+    <h4>Indeterminate</h4>
 
-  <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
-    expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
+    <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
+      expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
 
-  <div layout="row" layout-sm="column" layout-align="space-around">
-    <md-progress-circular md-mode="indeterminate"></md-progress-circular>
-  </div>
+    <div layout="row" layout-sm="column" layout-align="space-around">
+      <md-progress-circular md-mode="indeterminate"></md-progress-circular>
+    </div>
 
-  <h4>Theming</h4>
+    <h4>Theming</h4>
 
-  <p>
-    Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or `md-accent`
-    colors.
-  </p>
+    <p>
+      Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or `md-accent`
+      colors.
+    </p>
 
-  <div ng-show="vm.activated" layout="row" layout-sm="column" layout-align="space-around">
-    <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
-    <md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
-    <md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
-    <md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
-    <md-progress-circular md-diameter="96"></md-progress-circular>
-  </div>
+    <div ng-show="vm.activated" layout="row" layout-sm="column" layout-align="space-around">
+      <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
+      <md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
+      <md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
+      <md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
+      <md-progress-circular md-diameter="96"></md-progress-circular>
+    </div>
+  </md-content>
 
-  <h4>Dark theme</h4>
+  <md-content md-theme="docs-dark" layout-padding>
+    <h4>Dark theme</h4>
 
-  <p>
-    This is an example of the <b>&lt;md-progress-circular&gt;</b> component, with a dark theme.
-  </p>
+    <p>
+      This is an example of the <b>&lt;md-progress-circular&gt;</b> component, with a dark theme.
+    </p>
 
-  <div ng-show="vm.activated" md-theme="docs-dark" layout="row" layout-sm="column" layout-align="space-around">
-    <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
-    <md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
-    <md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
-    <md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
-    <md-progress-circular md-diameter="96"></md-progress-circular>
-  </div>
+    <div ng-show="vm.activated" layout="row" layout-sm="column" layout-align="space-around">
+      <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
+      <md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
+      <md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
+      <md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
+      <md-progress-circular md-diameter="96"></md-progress-circular>
+    </div>
+  </md-content>
 
-  <hr ng-class="{'visible' : vm.activated}">
-
-  <div id="loaders" layout="row" layout-align="start center">
+  <md-content layout="row" layout-align="start center" layout-padding>
     <p>Progress Circular Indicators: </p>
 
     <h5>Off</h5>
@@ -58,6 +60,6 @@ <h5>Off</h5>
         aria-label="Toggle Progress Circular Indicators">
       <h5>On</h5>
     </md-switch>
-  </div>
+  </md-content>
 
 </div>