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..80b31dec4757 100644 --- a/src/lib/toolbar/toolbar.scss +++ b/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); +}