From 340f5fa79eaa0d9508596042a904df376563db95 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 10 Dec 2016 13:11:31 +0100
Subject: [PATCH 1/2] update(toolbar): add responsive heights as per spec

* Adds media queries to dynamically adjust the height of the toolbar according to the specifications.
  https://material.google.com/layout/structure.html#structure-app-bar

Closes #2085.
---
 src/lib/core/style/_variables.scss |  3 +++
 src/lib/toolbar/toolbar.scss       | 29 ++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss
index 130aa10e0ccd..22567e9c34d1 100644
--- a/src/lib/core/style/_variables.scss
+++ b/src/lib/core/style/_variables.scss
@@ -6,7 +6,10 @@ $md-body-font-size-base: rem(1.4) !default;
 $md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
 
 // Media queries
+// TODO: Find a way to respect media query ranges.
+// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
 $md-xsmall: 'max-width: 600px';
+$md-small: 'max-width: 960px';
 
 // TODO: Revisit all z-indices before beta
 // z-index master list
diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss
index 82e981b1f0d0..8576e4ebbc84 100644
--- a/src/lib/toolbar/toolbar.scss
+++ b/src/lib/toolbar/toolbar.scss
@@ -1,17 +1,28 @@
 @import '../core/style/variables';
 
+$md-toolbar-height-desktop: 64px !default;
+$md-toolbar-height-mobile-portrait: 56px !default;
+$md-toolbar-height-mobile-landscape: 48px !default;
 
-$md-toolbar-min-height: 64px !default;
 $md-toolbar-font-size: 20px !default;
 $md-toolbar-padding: 16px !default;
 
 
+@mixin md-toolbar-height($height) {
+  md-toolbar {
+    min-height: $height;
+  }
+  md-toolbar-row {
+    height: $height;
+  }
+}
+
+
 md-toolbar {
   display: flex;
   box-sizing: border-box;
 
   width: 100%;
-  min-height: $md-toolbar-min-height;
 
   // Font Styling
   font-size: $md-toolbar-font-size;
@@ -27,10 +38,22 @@ md-toolbar {
     box-sizing: border-box;
 
     width: 100%;
-    height: $md-toolbar-min-height;
 
     // Flexbox Vertical Alignment
     flex-direction: row;
     align-items: center;
   }
 }
+
+// Set the default height for the toolbar.
+@include md-toolbar-height($md-toolbar-height-desktop);
+
+// Specific height for mobile devices in portrait mode.
+@media ($md-xsmall) and (orientation: portrait) {
+  @include md-toolbar-height($md-toolbar-height-mobile-portrait);
+}
+
+// Specific height for mobile devices in landscape mode.
+@media ($md-small) and (orientation: landscape) {
+  @include md-toolbar-height($md-toolbar-height-mobile-landscape);
+}

From 2bcc28ae238c7b27bac496edc235dc809d4986b9 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 10 Dec 2016 13:12:39 +0100
Subject: [PATCH 2/2] Remove extra blank line

---
 src/lib/toolbar/toolbar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss
index 8576e4ebbc84..80b31dec4757 100644
--- a/src/lib/toolbar/toolbar.scss
+++ b/src/lib/toolbar/toolbar.scss
@@ -17,7 +17,6 @@ $md-toolbar-padding: 16px !default;
   }
 }
 
-
 md-toolbar {
   display: flex;
   box-sizing: border-box;