Fix margin around mini FAB without touch target.

Author: joyzhong

packages/mdc-fab/README.md

@@ -150,7 +150,7 @@ While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following
 
 ```html
 <div class="mdc-touch-target-wrapper">
-  <button class="mdc-fab mdc-fab--mini">
+  <button class="mdc-fab mdc-fab--mini mdc-fab--touch">
     <div class="mdc-fab__ripple"></div>
     <span class="material-icons mdc-fab__icon">add</span>
     <span class="mdc-fab__label">Create</span>

packages/mdc-fab/_mixins.scss

@@ -55,14 +55,10 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
 
   .mdc-fab--mini {
     @include mdc-fab--mini_($query: $query);
-    @include mdc-touch-target-component(
-      $component-height: $mdc-fab-mini-height,
-      $component-width: $mdc-fab-mini-height,
-      $query: $query);
+  }
 
-    .mdc-fab__touch {
-      @include mdc-touch-target($set-width: true, $query: $query);
-    }
+  .mdc-fab--touch {
+    @include mdc-fab--touch_($query: $query);
   }
 
   .mdc-fab--extended {
@@ -316,6 +312,17 @@ $mdc-fab-icon-enter-duration_: 180ms;
   }
 }
 
+@mixin mdc-fab--touch_($query: mdc-feature-all()) {
+  @include mdc-touch-target-component(
+    $component-height: $mdc-fab-mini-height,
+    $component-width: $mdc-fab-mini-height,
+    $query: $query);
+
+  .mdc-fab__touch {
+    @include mdc-touch-target($set-width: true, $query: $query);
+  }
+}
+
 @mixin mdc-fab--extended_($query: mdc-feature-all()) {
   @include mdc-typography(button, $query: $query);
   @include mdc-fab-extended-shape-radius(50%, $query: $query);