update(toolbar): add responsive heights as per spec (#2157)

* 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.

* Remove extra blank line

Author: devversion

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

src/lib/toolbar/toolbar.scss

@@ -1,17 +1,27 @@
 @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 +37,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);
+}