angular · ThomasBurleson · Jan 30, 2016 · Jan 29, 2016 · Jan 30, 2016 · Jan 30, 2016
diff --git a/docs/app/css/layout-demo.css b/docs/app/css/layout-demo.css
@@ -1,5 +1,6 @@
 demo-include {
   display: block;
+  background-color:white;
 }
 
 .colorNested .demo-content > div div  {

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -15,7 +15,7 @@
 <body layout="row" ng-cloak>
 
   <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
-              md-component-id="left"
+              md-component-id="left" hide-print
               md-is-locked-open="$mdMedia('gt-sm')">
 
     <header class="nav-header">

diff --git a/gulp/config.js b/gulp/config.js
@@ -29,15 +29,18 @@ module.exports = {
     'src/core/style/mixins.scss',
     'src/core/style/structure.scss',
     'src/core/style/typography.scss',
-    'src/core/services/layout/layout.scss'
+    'src/core/style/layout.scss'
   ],
-  scssStandaloneFiles: [
-    'src/core/services/layout/layout.attributes.scss'
+  scssLayoutAttributeFiles: [
+      'src/core/style/variables.scss',
+      'src/core/style/mixins.scss',
+      'src/core/services/layout/layout-attributes.scss'
+    ],
+  scssPaths : [
+    'src/components/**/*.scss',
+    'src/core/services/**/*.scss'
   ],
-  scssTestFiles: [
-    'src/core/services/layout/layout.scss'
-  ],
-  paths: 'src/{components,services}/**',
+  paths: 'src/{components, services}/**',
   outputDir: 'dist/',
   demoFolder: 'demo-partials'
 };

diff --git a/gulp/tasks/build-scss.js b/gulp/tasks/build-scss.js
@@ -16,46 +16,50 @@ var args = util.args;
 var IS_DEV = require('../const').IS_DEV;
 
 exports.task = function() {
+  var streams = [];
   var modules   = args['modules'],
       overrides = args['override'],
       dest      = args['output-dir'] || config.outputDir,
       filename  = args['filename'] || 'angular-material',
-      paths     = getPaths();
-  var streams = [];
-  var baseVars = fs.readFileSync('src/core/style/variables.scss', 'utf8').toString();
+      baseFiles = config.scssBaseFiles,
+      scssPipe  = undefined;
+
   gutil.log("Building css files...");
-  
+
   // create SCSS file for distribution
   streams.push(
-    gulp.src(paths)
+    scssPipe = gulp.src(getPaths())
       .pipe(util.filterNonCodeFiles())
       .pipe(filter(['**', '!**/*-theme.scss']))
+      .pipe(filter(['**', '!**/*-print.scss']))
+      .pipe(filter(['**', '!**/*-attributes.scss']))
       .pipe(concat('angular-material.scss'))
-      .pipe(gulp.dest(dest))
+      .pipe(gulp.dest(dest))                            // raw uncompiled SCSSS
   );
-  
+
   streams.push(
-      gulp.src(paths)
-          .pipe(util.filterNonCodeFiles())
-          .pipe(filter(['**', '!**/*-theme.scss']))
-          .pipe(filter(['**', '!**/attributes.scss']))
-          .pipe(concat('angular-material.scss'))
+    scssPipe
           .pipe(sass())
+          .pipe(rename({extname: '.css'}))              // unminified
           .pipe(rename({ basename: filename }))
           .pipe(util.autoprefix())
           .pipe(insert.prepend(config.banner))
           .pipe(gulp.dest(dest))
           .pipe(gulpif(!IS_DEV, minifyCss()))
           .pipe(rename({extname: '.min.css'}))
-          .pipe(gulp.dest(dest))
+          .pipe(gulp.dest(dest))                        // minified
   );
+
+  // Layout API using Attribute Selectors
+  // TO BE Deprecated...
+
   streams.push(
-      gulp.src(config.scssStandaloneFiles)
-          .pipe(insert.prepend(baseVars))
+      gulp.src(config.scssLayoutAttributeFiles)
+          .pipe(concat('layouts.scss'))
           .pipe(sass())
           .pipe(util.autoprefix())
-          .pipe(rename({ basename: "layouts" }))
-          .pipe(rename({ prefix: 'angular-material.'}))
+          .pipe(rename({ extname : '.css'}))
+          .pipe(rename({ prefix  : 'angular-material.'}))
           .pipe(insert.prepend(config.banner))
           .pipe(gulp.dest(dest))
           .pipe(gulpif(!IS_DEV, minifyCss()))
@@ -73,7 +77,8 @@ exports.task = function() {
         return 'src/components/' + module + '/*.scss';
       }));
     } else {
-      paths.push(path.join(config.paths, '*.scss'));
+      paths.push('src/components/**/*.scss');
+      paths.push('src/core/services/layout/**/*.scss');
     }
     overrides && paths.unshift(overrides);
     return paths;

diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss
@@ -121,19 +121,19 @@ md-bottom-sheet {
         }
       }
 
-      @media screen and (max-width: $layout-breakpoint-sm) {
+      @media (max-width: $layout-breakpoint-sm) {
         @include grid-items-per-row(3, true);
       }
 
-      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
+      @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
         @include grid-items-per-row(4);
       }
 
-      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
+      @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
         @include grid-items-per-row(6);
       }
 
-      @media screen and (min-width: $layout-breakpoint-lg) {
+      @media (min-width: $layout-breakpoint-lg) {
         @include grid-items-per-row(7);
       }
 

diff --git a/src/components/chips/demoContactChips/style.scss b/src/components/chips/demoContactChips/style.scss
@@ -34,7 +34,7 @@ md-content.autocomplete {
     }
   }
 
-  @media screen and (min-width: 960px) {
+  @media (min-width: 960px) {
     float: left;
     width: 33%;
   }

diff --git a/src/components/content/content.scss b/src/components/content/content.scss
@@ -22,6 +22,10 @@ md-content {
   &.autoScroll {
     -webkit-overflow-scrolling: auto;
   }
+
+  @media print {
+    overflow: visible !important;
+  }
 }
 
 
diff --git a/src/components/fabSpeedDial/demoMoreOptions/style.scss b/src/components/fabSpeedDial/demoMoreOptions/style.scss
@@ -3,7 +3,7 @@
   top: 16px;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media (max-device-width: 600px) {
   .md-fab-top-right {
     top: 9px;
     right: 9px;

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
@@ -92,13 +92,13 @@ md-sidenav {
   }
 }
 
-@media screen and (min-width: $layout-breakpoint-xs) {
+@media (min-width: $layout-breakpoint-xs) {
   md-sidenav {
     max-width: $sidenav-desktop-width;
   }
 }
 
-@media screen and (max-width: $sidenav-desktop-width + $sidenav-min-space) {
+@media (max-width: $sidenav-desktop-width + $sidenav-min-space) {
   md-sidenav {
     width: calc(100% - #{$sidenav-min-space});
     min-width: calc(100% - #{$sidenav-min-space});

diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
@@ -132,7 +132,7 @@ md-toolbar {
 }
 
 // Handle mobile portrait
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
   md-toolbar {
     min-height: $toolbar-height-mobile-portrait;
   }
@@ -144,7 +144,7 @@ md-toolbar {
 }
 
 // Handle mobile landscape
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
   md-toolbar {
     min-height: $toolbar-height-mobile-landscape;
   }

diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
@@ -17,7 +17,7 @@ md-tooltip {
 
   font-weight: 500;
   font-size: $tooltip-fontsize-sm;
-  @media screen and (min-width: $layout-breakpoint-sm) {
+  @media (min-width: $layout-breakpoint-sm) {
     font-size: $tooltip-fontsize-lg;
   }
 
@@ -33,7 +33,7 @@ md-tooltip {
     line-height: $tooltip-height-sm;
     padding-left: $tooltip-lr-padding-sm;
     padding-right: $tooltip-lr-padding-sm;
-    @media screen and (min-width: $layout-breakpoint-sm) {
+    @media (min-width: $layout-breakpoint-sm) {
       height: $tooltip-height-lg;
       line-height: $tooltip-height-lg;
       padding-left: $tooltip-lr-padding-lg;

diff --git a/src/components/whiteframe/demoBasicClassUsage/style.css b/src/components/whiteframe/demoBasicClassUsage/style.css
@@ -3,7 +3,7 @@ md-whiteframe {
   margin: 30px;
   height: 100px;
 }
-@media screen and (max-width: 599px) {
+@media (max-width: 599px) {
   md-whiteframe {
     margin: 7px;
     height: 50px;
@@ -13,7 +13,7 @@ md-whiteframe {
     font-size: 0.4em;
   }
 }
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+@media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe {
     margin: 20px;
     height: 75px;
@@ -22,7 +22,7 @@ md-whiteframe {
     font-size: 0.6em;
   }
 }
-@media screen and (min-width: 960px ) and (max-width: 1199px) {
+@media (min-width: 960px ) and (max-width: 1199px) {
   md-whiteframe {
     margin: 20px;
     height: 90px;
@@ -33,7 +33,7 @@ md-whiteframe {
   }
 }
 
-@media screen  and (min-width: 1200px) {
+@media (min-width: 1200px) {
   md-whiteframe {
     margin: 25px;
     height: 100px;

diff --git a/src/components/whiteframe/demoDirectiveAttributeUsage/style.css b/src/components/whiteframe/demoDirectiveAttributeUsage/style.css
@@ -5,7 +5,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-xs` */
-@media screen and (max-width: 599px) {
+@media (max-width: 599px) {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
@@ -17,7 +17,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-sm` */
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+@media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 75px;
@@ -28,7 +28,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-md` */
-@media screen and (min-width: 960px ) and (max-width: 1279px) {
+@media (min-width: 960px ) and (max-width: 1279px) {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 90px;
@@ -40,7 +40,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-gt-md` */
-@media screen and (min-width: 1280px) {
+@media (min-width: 1280px) {
   md-whiteframe, div.padded {
     margin: 25px;
     height: 100px;

diff --git a/...re/services/layout/layout.attributes.scss → ...re/services/layout/layout-attributes.scss b/...re/services/layout/layout.attributes.scss → ...re/services/layout/layout-attributes.scss
@@ -141,10 +141,12 @@ $layout-breakpoint-lg:     1920px !default;
   // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
   // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
   // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
-  @media screen\0 {
-      [#{$flexName}] {
-        flex: 1 1 0%;
-      }
+  @if $name != '-print' { 
+    @media screen\0 {
+        [#{$flexName}] {
+          flex: 1 1 0%;
+        }
+    }
   }
 
   [#{$flexName}-grow]        { flex: 1 1 100%;  box-sizing: border-box; }
@@ -503,4 +505,13 @@ $layout-breakpoint-lg:     1920px !default;
   }
 }
 
+@media print {
+  // PRINT
+  @include layouts_for_breakpoint(print);
+
+  [hide-print]:not([show-print]):not([show]) {
+    display: none;
+  }
+}
+
 
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
@@ -3,7 +3,7 @@
 
   var $mdUtil, $interpolate, $log;
 
-  var SUFFIXES = /(-gt)?-(sm|md|lg)/g;
+  var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;
   var WHITESPACE = /\s+/g;
 
   var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
@@ -77,7 +77,7 @@
     var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
 
     // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA
-    var BREAKPOINTS     = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl" ];
+    var BREAKPOINTS     = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl", "print" ];
     var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
     var API_NO_VALUES   = [ "show", "hide", "layout-padding", "layout-margin" ];