fix(css): stop using @extend for rules in a different module.

Closes #3400.

Author: jelbourn

src/components/button/button.scss

@@ -97,7 +97,7 @@ $icon-button-margin: rem(0.600) !default;
 
   &.md-raised {
     &:not([disabled]) {
-      @extend .md-shadow-bottom-z-1;
+      @include md-shadow-bottom-z-1();
     }
   }
 
@@ -136,7 +136,7 @@ $icon-button-margin: rem(0.600) !default;
     flex-grow: 0;
     flex-shrink: 0;
 
-    @extend .md-shadow-bottom-z-1;
+    @include md-shadow-bottom-z-1();
     border-radius: 50%;
     background-clip: padding-box;
     overflow: hidden;
@@ -163,10 +163,10 @@ $icon-button-margin: rem(0.600) !default;
     &.md-raised,
     &.md-fab {
       &.md-focused {
-        @extend .md-shadow-bottom-z-1;
+        @include md-shadow-bottom-z-1();
       }
       &:active {
-        @extend .md-shadow-bottom-z-2;
+        @include md-shadow-bottom-z-2();
       }
     }
   }

src/components/list/list.scss

@@ -30,7 +30,7 @@ md-list {
   padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
 
   .md-subheader {
-    @extend .md-body-2;
+    @include md-body-2();
     line-height: $list-header-line-height;
   }
 }
@@ -177,18 +177,18 @@ md-list-item.md-3-line > .md-no-style {
     }
 
     h3 {
-      @extend .md-subhead;
+      @include md-subhead();
       margin: $list-h3-margin;
       line-height: $list-header-line-height;
     }
     h4 {
-      @extend .md-body-2;
+      @include md-body-2();
       font-weight: $list-h4-font-weight;
       margin: $list-h4-margin;
       line-height: $list-header-line-height;
     }
     p {
-      @extend .md-body-2;
+      @include md-body-2();
       margin: $list-p-margin;
       line-height: $list-p-line-height;
     }

src/components/toolbar/toolbar.scss

@@ -64,7 +64,7 @@ md-toolbar {
 }
 
 .md-toolbar-tools {
-  @extend .md-title;
+  @include md-title();
   font-weight: 400;
   display: flex;
   align-items: center;

src/core/style/mixins.scss

@@ -31,6 +31,43 @@
   }
 }
 
+@mixin md-shadow-bottom-z-1() {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+@mixin md-shadow-bottom-z-2() {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+}
+
+// Typography mixins
+
+@mixin md-title() {
+  font-size: $title-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+}
+
+@mixin md-body-1() {
+  font-size: $body-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: rem(2);
+}
+
+@mixin md-body-2() {
+  font-size: $body-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.010em;
+  line-height: rem(2.4);
+}
+
+@mixin md-subhead() {
+  font-size: $subhead-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: rem(2.4);
+}
+
 @function map-to-string($map) {
   $map-str: '{';
   $keys: map-keys($map);

src/core/style/structure.scss

@@ -87,10 +87,10 @@ input {
 }
 
 .md-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  @include md-shadow-bottom-z-1();
 }
 .md-shadow-bottom-z-2 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+  @include md-shadow-bottom-z-2();
 }
 
 .md-shadow-animated.md-shadow {

src/core/style/typography.scss

@@ -41,30 +41,19 @@ ul, ol, p, h1, h2, h3, h4, h5, h6 {
   line-height: rem(3.2);
 }
 .md-title {
-  font-size: $title-font-size-base;
-  font-weight: 500;
-  letter-spacing: 0.005em;
+  @include md-title();
 }
 .md-subhead {
-  font-size: $subhead-font-size-base;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: rem(2.4);
+  @include md-subhead();
 }
 /************
  * Body Copy
  ************/
 .md-body-1 {
-  font-size: $body-font-size-base;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: rem(2);
+  @include md-body-1();
 }
 .md-body-2 {
-  font-size: $body-font-size-base;
-  font-weight: 500;
-  letter-spacing: 0.010em;
-  line-height: rem(2.4);
+  @include md-body-2();
 }
 .md-caption {
   font-size: $caption-font-size-base;