fix(button): horizontal padding should match the spec

- left and right padding changed from `6px` to `8px`
- add a demo for dense buttons

Fixes #10535

BREAKING CHANGE: `md-button`'s internal horizontal padding has changed from `6px` to `8px` to match the Material Design spec. This may affect the layout of portions of your application where `md-button`, `md-datepicker`, or `md-toast` with actions are used.

If you are using our SCSS files, you can override this back to the default, or another value, in your app's SCSS files:
```scss
$button-left-right-padding: rem(0.600); // For 6px horizontal padding
```

fix(button): horizontal padding should match the spec

- left and right padding changed from `6px` to `8px`

Fixes #10535

BREAKING CHANGE: `md-button`'s internal horizontal padding has changed from `6px` to `8px` to match the Material Design spec. This may affect the layout of portions of your application where `md-button`, `md-datepicker`, or `md-toast` with actions are used.

If you are using our SCSS files, you can override this back to the default, or another value, in your app's SCSS files:
```scss
$button-left-right-padding: rem(0.600); // For 6px horizontal padding
```

Author: Splaktar

src/components/button/button.scss

@@ -1,5 +1,4 @@
-// Material Design Button
-// https://material.google.com/components/buttons.html
+// Material Design Button: https://material.io/archive/guidelines/components/buttons.html
 
 $button-border-radius: 2px !default;
 $button-fab-border-radius: 50% !default;

src/components/button/demoBasicUsage/index.html

@@ -81,7 +81,7 @@
                  target="_blank"
                  ng-disabled="true"
                  aria-label="Google.com"
-                 class="md-icon-button launch" >
+                 class="md-icon-button launch">
         <md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
       </md-button>
       <div class="label">Icon Button</div>

src/components/button/demoDense/index.html

@@ -0,0 +1,39 @@
+<div ng-controller="AppCtrl" ng-cloak>
+  <md-content class="md-dense">
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <md-button>Button</md-button>
+      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
+      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
+      <md-button class="md-warn">Warn</md-button>
+      <div class="label">Flat</div>
+    </section>
+    <md-divider></md-divider>
+
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <md-button class="md-raised">Button</md-button>
+      <md-button class="md-raised md-primary">Primary</md-button>
+      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
+      <md-button class="md-raised md-accent">Accent</md-button>
+      <div class="label">Raised</div>
+    </section>
+    <md-divider></md-divider>
+
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
+        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">
+          Primary Link
+        </md-button>
+        <md-button>Default Button</md-button>
+      <div class="label">Link vs. Button</div>
+    </section>
+    <md-divider></md-divider>
+
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <md-button class="md-primary md-hue-2">Primary Hue 2</md-button>
+      <md-button class="md-warn md-raised md-hue-1">Warn Hue 1</md-button>
+      <md-button class="md-accent md-raised md-hue-2">Accent Hue 2</md-button>
+      <md-button class="md-accent md-hue-3">Accent Hue 3</md-button>
+      <div class="label">Themed</div>
+    </section>
+  </md-content>
+</div>

src/components/button/demoDense/script.js

@@ -0,0 +1,5 @@
+angular.module('buttonsDemoDense', ['ngMaterial'])
+.controller('AppCtrl', function($scope) {
+  $scope.isDisabled = true;
+  $scope.googleUrl = 'http://google.com';
+});

src/components/button/demoDense/style.css

@@ -0,0 +1,11 @@
+section {
+  text-align: center;
+  margin: 8px;
+  position: relative !important;
+}
+.label {
+  position: absolute;
+  bottom: 5px;
+  left: 7px;
+  font-size: 12px;
+}

src/core/style/_variables.scss

@@ -31,7 +31,7 @@ $layout-breakpoint-md:     1280px !default;
 $layout-breakpoint-lg:     1920px !default;
 
 // Button
-$button-left-right-padding: rem(0.600) !default;
+$button-left-right-padding: rem(0.800) !default;
 
 // Icon
 $icon-size: rem(2.400) !default;