update(demo, dialog):moved padding to class and removed padding from …

…element

Content padding was forced on the user and caused other components as tabs not to work as wanted.
Moved the padding to a class that the user can specify on his content.

closes #3963. closes #4983.

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -10,7 +10,8 @@ <h2>Mango (Fruit)</h2>
     </div>
   </md-toolbar>
   <md-dialog-content style="max-width:800px;max-height:810px; ">
-    <div>
+    <div class="md-dialog-content">
+      <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
       <p>
         The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
       </p>

src/components/dialog/dialog.js

@@ -66,6 +66,9 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  * - Complex dialogs can be sized with `flex="percentage"`, i.e. `flex="66"`.
  * - Default max-width is 80% of the `rootElement` or `parent`.
  *
+ * ## Css
+ * - `.md-dialog-content` - class that sets the padding on the content as the spec file
+ *
  * @usage
  * <hljs lang="html">
  * <div  ng-app="demoApp" ng-controller="EmployeeController">
@@ -417,7 +420,7 @@ function MdDialogProvider($$interimElementProvider) {
     return {
       template: [
         '<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
-        ' <md-dialog-content role="document" tabIndex="-1">',
+        ' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
         '   <h2 class="md-title">{{ dialog.title }}</h2>',
         '   <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
         ' </md-dialog-content>',

src/components/dialog/dialog.scss

@@ -46,10 +46,14 @@ md-dialog {
     flex-direction: column;
     overflow: auto;
   }
+
+  .md-dialog-content {
+    padding: $dialog-padding;
+  }
+
   md-dialog-content {
     order: 1;
     flex-direction: column;
-    padding: $dialog-padding;
     overflow: auto;
     -webkit-overflow-scrolling: touch;