skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Paul Gschwendtner
2016-12-14 23:27:45 +01:00
committed by Jeremy Elbourn
parent 2269a464d2
commit 78d54fc084
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/style/_variables.scss
+3
View File
@@ -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
+25 -3
View File
@@ -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);
}