feat(toolbar): add elevation styling

[code-tree]

Elevation styling appears to have been implemented in most components, but toolbar was missed. This adds it for toolbar.

[code-tree]

I think this probably needs a z-index, but not sure what rules this project applies to setting that number.

[code-tree]

Also, I think tabs' z-index will need to be raised so that the toolbar's shadow doesn't appear when placed above tabs.

[devversion]

I don't think it would be necessary to add the elevation to the md-toolbar by default.

To be more flexible the developers should just apply the given md-elevation-z4 class on the toolbar.

Not sure we discussed this already when implementing the toolbar @jelbourn ?

[jelbourn]

Agreed with @devversion, I would rather compose the re-usable elevation classes (e.g., .md-elevation-z4) and toolbar rather than baking it in.

[code-tree]

Oh good, I didn't know those elevation classes existed.

The main motivation to me is that the toolbar is barely visible without elevation, when it is plain without primary or accent theme. Dark theme is ok, but light theme it is hard to recognise it from the background.

Maybe an example of using that class should be added to the toolbar readme?

[cedvdb]

@jelbourn How do you use those elevation classes ? adding the classes doesn't add any shadow

<md-toolbar color="primary" class="md-elevation-z4">
  <close-icon-app (click)="menuOpened =  !menuOpened" [open]="menuOpened">
  </close-icon-app>
</md-toolbar>

[ghd8]

@cedvdb - try "mat-elevation-z4"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}