feat(layout): add -print breakpoint alias

ThomasBurleson · ThomasBurleson · commit eb1249da5c4d · 2016-01-29T15:03:02.000-06:00
support layout and flex attributes

* remove superfluous use of `screen and` in mediaQueries
* also support `hide-print` to hide elements when printing
* update docs to hide sideNav when printing
* update docs to use white background colors for demos
* support Layout API usages with print-xx suffices; which enabled component printing at the specified breakpoint range.
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,14 +29,13 @@ module.exports = {
     'src/core/style/mixins.scss',
     'src/core/style/structure.scss',
     'src/core/style/typography.scss',
+    'src/core/style/layout.scss',
     'src/core/services/layout/layout.scss'
   ],
-  scssStandaloneFiles: [
-    'src/core/services/layout/layout.attributes.scss'
-  ],
-  scssTestFiles: [
-    'src/core/services/layout/layout.scss'
-  ],
+  scssPrintFiles: [
+      'src/core/style/layout.scss',
+      'src/core/services/layout/layout.print.scss'
+    ],
   paths: 'src/{components,services}/**',
   outputDir: 'dist/',
   demoFolder: 'demo-partials'
diff --git a/gulp/tasks/build-scss.js b/gulp/tasks/build-scss.js
@@ -30,31 +30,28 @@ exports.task = function() {
     gulp.src(paths)
       .pipe(util.filterNonCodeFiles())
       .pipe(filter(['**', '!**/*-theme.scss']))
+      .pipe(filter(['**', '!**/*.attributes.scss']))    // no layout attribute selectors
+      .pipe(filter(['**', '!**/*.print.scss']))         // no print styles
       .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'))
+      gulp.src(dest)
           .pipe(sass())
           .pipe(rename({ basename: filename }))
           .pipe(util.autoprefix())
           .pipe(insert.prepend(config.banner))
-          .pipe(gulp.dest(dest))
+          .pipe(gulp.dest(dest))                        // unminified
           .pipe(gulpif(!IS_DEV, minifyCss()))
           .pipe(rename({extname: '.min.css'}))
-          .pipe(gulp.dest(dest))
+          .pipe(gulp.dest(dest))                        // minified
   );
   streams.push(
-      gulp.src(config.scssStandaloneFiles)
-          .pipe(insert.prepend(baseVars))
+      gulp.src(config.scssPrintFiles.slice())           // Layout API for Printing
           .pipe(sass())
           .pipe(util.autoprefix())
-          .pipe(rename({ basename: "layouts" }))
+          .pipe(rename({ basename: "print" }))
           .pipe(rename({ prefix: 'angular-material.'}))
           .pipe(insert.prepend(config.banner))
           .pipe(gulp.dest(dest))
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/src/core/services/layout/layout.attributes.scss b/src/core/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" ];
 
diff --git a/src/core/services/layout/layout.print.scss b/src/core/services/layout/layout.print.scss
diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
diff --git a/src/core/services/layout/layout.spec.js b/src/core/services/layout/layout.spec.js
diff --git a/src/core/style/layout.scss b/src/core/style/layout.scss
diff --git a/src/core/util/constant.js b/src/core/util/constant.js
diff --git a/src/core/util/media.js b/src/core/util/media.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`demo-include {`
`2`	`2`	`display: block;`
	`3`	`+ background-color:white;`
`3`	`4`	`}`
`4`	`5`
`5`	`6`	`.colorNested .demo-content > div div {`
Original file line number	Diff line number	Diff line change
`@@ -121,19 +121,19 @@ md-bottom-sheet {`
`121`	`121`	`}`
`122`	`122`	`}`
`123`	`123`
`124`		`- @media screen and (max-width: $layout-breakpoint-sm) {`
	`124`	`+ @media (max-width: $layout-breakpoint-sm) {`
`125`	`125`	`@include grid-items-per-row(3, true);`
`126`	`126`	`}`
`127`	`127`
`128`		`- @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {`
	`128`	`+ @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {`
`129`	`129`	`@include grid-items-per-row(4);`
`130`	`130`	`}`
`131`	`131`
`132`		`- @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {`
	`132`	`+ @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {`
`133`	`133`	`@include grid-items-per-row(6);`
`134`	`134`	`}`
`135`	`135`
`136`		`- @media screen and (min-width: $layout-breakpoint-lg) {`
	`136`	`+ @media (min-width: $layout-breakpoint-lg) {`
`137`	`137`	`@include grid-items-per-row(7);`
`138`	`138`	`}`
`139`	`139`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ md-content.autocomplete {`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`
`37`		`- @media screen and (min-width: 960px) {`
	`37`	`+ @media (min-width: 960px) {`
`38`	`38`	`float: left;`
`39`	`39`	`width: 33%;`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,10 @@ md-content {`
`22`	`22`	`&.autoScroll {`
`23`	`23`	`-webkit-overflow-scrolling: auto;`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+ @media print {`
	`27`	`+ overflow: visible !important;`
	`28`	`+ }`
`25`	`29`	`}`
`26`	`30`
`27`	`31`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`top: 16px;`
`4`	`4`	`}`
`5`	`5`
`6`		`-@media only screen and (max-device-width: 600px) {`
	`6`	`+@media (max-device-width: 600px) {`
`7`	`7`	`.md-fab-top-right {`
`8`	`8`	`top: 9px;`
`9`	`9`	`right: 9px;`
Original file line number	Diff line number	Diff line change
`@@ -92,13 +92,13 @@ md-sidenav {`
`92`	`92`	`}`
`93`	`93`	`}`
`94`	`94`
`95`		`-@media screen and (min-width: $layout-breakpoint-xs) {`
	`95`	`+@media (min-width: $layout-breakpoint-xs) {`
`96`	`96`	`md-sidenav {`
`97`	`97`	`max-width: $sidenav-desktop-width;`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`
`101`		`-@media screen and (max-width: $sidenav-desktop-width + $sidenav-min-space) {`
	`101`	`+@media (max-width: $sidenav-desktop-width + $sidenav-min-space) {`
`102`	`102`	`md-sidenav {`
`103`	`103`	`width: calc(100% - #{$sidenav-min-space});`
`104`	`104`	`min-width: calc(100% - #{$sidenav-min-space});`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ md-toolbar {`
`132`	`132`	`}`
`133`	`133`
`134`	`134`	`// Handle mobile portrait`
`135`		`-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {`
	`135`	`+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {`
`136`	`136`	`md-toolbar {`
`137`	`137`	`min-height: $toolbar-height-mobile-portrait;`
`138`	`138`	`}`
`@@ -144,7 +144,7 @@ md-toolbar {`
`144`	`144`	`}`
`145`	`145`
`146`	`146`	`// Handle mobile landscape`
`147`		`-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {`
	`147`	`+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {`
`148`	`148`	`md-toolbar {`
`149`	`149`	`min-height: $toolbar-height-mobile-landscape;`
`150`	`150`	`}`