fix(button): alignment of FAB + mini anchor btns

Also includes .md-mini documentation

Closes #1607, #2009, #1690

docs/app/css/style.css

@@ -496,7 +496,7 @@ md-content.demo-source-container > hljs > pre > code.highlight {
 }
 
 .dashed-bottom {
-  border-bottom: dashed 1px rgb(224, 224, 224);;
+  border-bottom: dashed 1px rgb(224, 224, 224);
   padding-bottom: 10px;
 }
 

src/components/button/button.js

@@ -39,13 +39,22 @@ angular.module('material.components.button', [
  * @usage
  * <hljs lang="html">
  *  <md-button>
- *    Button
+ *    Flat Button
  *  </md-button>
- *  <md-button href="http://google.com" class="md-button-colored">
- *    I'm a link
+ *  <md-button href="http://google.com">
+ *    Flat link
  *  </md-button>
- *  <md-button ng-disabled="true" class="md-colored">
- *    I'm a disabled button
+ *  <md-button class="md-raised">
+ *    Raised Button
+ *  </md-button>
+ *  <md-button ng-disabled="true">
+ *    Disabled Button
+ *  </md-button>
+ *  <md-button class="md-fab" aria-label="FAB">
+ *    <md-icon md-svg-src="your/icon.svg"></md-icon>
+ *  </md-button>
+ *  <md-button class="md-fab md-mini" aria-label="Mini FAB">
+ *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  *  </md-button>
  * </hljs>
  */

src/components/button/button.scss

@@ -1,12 +1,15 @@
-$button-line-height: 25px !default;
-$button-padding: 2px 6px 3px !default;
+$button-line-height: 2.250rem !default;
+$button-padding: 0 0.375rem !default;
+$button-margin: 0.375rem 0.500rem !default;
 
 // Fab buttons
-$button-fab-width: 56px !default;
-$button-fab-height: 56px !default;
-$button-fab-padding: 16px !default;
-$button-fab-mini-width: 40px !default;
-$button-fab-mini-height: 40px !default;
+$button-fab-width: 3.500rem !default;
+$button-fab-height: 3.500rem !default;
+$button-fab-line-height: 3.500rem !default;
+$button-fab-padding: 1rem !default;
+$button-fab-mini-width: 2.500rem !default;
+$button-fab-mini-height: 2.500rem !default;
+$button-fab-mini-line-height: 2.500rem !default;
 
 $button-fab-toast-offset: $button-fab-height * 0.75;
 
@@ -24,15 +27,18 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
 }
 
 .md-button {
+  box-sizing: border-box;
   color: currentColor;
 
   user-select: none;
   position: relative; //for child absolute-positioned <canvas>
 
   outline: none;
   border: 0;
-  padding: 6px;
-  margin: 0;
+  display: inline-block;
+  padding: $button-padding;
+  margin: $button-margin;
+  line-height: $button-line-height;
   background: transparent;
   white-space: nowrap;
 
@@ -45,7 +51,6 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   font-style: inherit;
   font-variant: inherit;
   font-family: inherit;
-  line-height: inherit;
   text-decoration: none;
 
   cursor: pointer;
@@ -54,6 +59,11 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
               background-color $swift-ease-out-duration $swift-ease-out-timing-function;
 
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
   &:focus {
     outline: none;
   }
@@ -94,8 +104,10 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
 
     z-index: $z-index-fab;
 
+    line-height: $button-fab-line-height;
     width: $button-fab-width;
     height: $button-fab-height;
+    vertical-align: middle;
 
     @extend .md-shadow-bottom-z-1;
     border-radius: 50%;
@@ -117,6 +129,7 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     }
 
     &.md-mini {
+      line-height: $button-fab-mini-line-height;
       width: $button-fab-mini-width;
       height: $button-fab-mini-height;
     }

src/components/button/demoBasicUsage/index.html

@@ -18,13 +18,13 @@
     </section>
 
     <section layout="row" layout-sm="column" layout-align="center center">
-        <md-button class="md-fab" aria-label="Eat cake">
+        <md-button class="md-fab" aria-label="Eat cake" ng-href="#">
             <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
         </md-button>
 
-      <md-button class="md-fab md-primary" aria-label="Use Android">
-        <md-icon md-svg-src="img/icons/android.svg"></md-icon>
-      </md-button>
+        <md-button class="md-fab md-primary" aria-label="Use Android">
+          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
+        </md-button>
 
         <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
             <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
@@ -33,6 +33,14 @@
         <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
             <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
         </md-button>
+
+        <md-button class="md-fab md-mini" aria-label="Eat cake" ng-href="#">
+            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
+          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
+        </md-button>
       <div class="label">FAB</div>
     </section>
 

src/components/button/demoBasicUsage/style.css

@@ -10,9 +10,8 @@ md-content {
   margin-right: 7px;
 }
 section .md-button {
-  display: block;
-  margin: 1em;
-  line-height: 25px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 .label {
   position: absolute;

src/components/dialog/dialog.scss

@@ -59,6 +59,7 @@ md-dialog {
 
     > * {
       margin-left: 8px;
+      margin-right: 0;
     }
   }
   &.md-content-overflow .md-actions {

src/core/style/mixins.scss

@@ -31,18 +31,3 @@
   }
   @return $map-str + '}';
 }
-
-@function map-to-string($map) {
-  $map-str: '{';
-  $keys: map-keys($map);
-  $len: length($keys);
-  @for $i from 1 through $len {
-    $key: nth($keys, $i);
-    $value: map-get($map, $key);
-    $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
-    @if $i != $len {
-      $map-str: $map-str + ',';
-    }
-  }
-  @return $map-str + '}';
-}