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

angular · Jun 22, 2015 · d821d19 · d821d19
1 parent 45005f2
commit d821d19
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 26 deletions.
diff --git a/gulp/util.js b/gulp/util.js
@@ -26,6 +26,8 @@ var IS_DEV = constants.IS_DEV;
 var ROOT = constants.ROOT;
 var utils = require('../scripts/gulp-utils.js');
 
+var print = require('gulp-print');
+
 exports.buildJs = buildJs;
 exports.autoprefix = autoprefix;
 exports.buildModule = buildModule;
@@ -147,11 +149,13 @@ function buildModule(module, isRelease) {
       return fs.readFileSync(fileName, 'utf8').toString();
     }).join('\n');
 
+      console.log(baseStyles);
     return lazypipe()
         .pipe(insert.prepend, baseStyles)
         .pipe(gulpif, /theme.scss/,
         rename(name + '-default-theme.scss'), concat(name + '.scss')
     )
+        .pipe(print)
         .pipe(sass)
         .pipe(autoprefix)
     (); // invoke the returning fn to create our pipe

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;