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

Closes #3400.
angular · Jun 22, 2015 · fb7b9b3 · fb7b9b3
1 parent 45005f2
commit fb7b9b3
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 26 deletions.
diff --git a/src/components/button/button.scss b/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();
  }
  }
  }

diff --git a/src/components/list/list.scss b/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;
  }

diff --git a/src/components/toolbar/toolbar.scss b/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;

diff --git a/src/core/style/mixins.scss b/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);

diff --git a/src/core/style/structure.scss b/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 {

diff --git a/src/core/style/typography.scss b/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;