feat(elevation): Elevation to support negative values to show box-shadow up oriented

Feature Description

Elevation helper only supports values between 0 and 24, and with those values the box shadow shows below.

I see the value of supporting negative values too (-24 to 24) where the negative values apply the same logic/style but above the component. Changing the box-shadow Y offset of the already provided values is working fine.

Use Case

Tabs component supports headerPosition whether is above|below (https://material.angular.io/components/tabs/api#MatTabHeaderPosition)

So If I want to build a top tab navigation menu and I want to have elevation working on top with the headerPosition="below" I can have a good looking component as here:

The only problem is that elevation does not support the shadow on top but rather only on bottom.

Usage Proposal

For using the mat-elevation mix, it would be:

@import '~@angular/material/theming';

mat-tab-group {
  @include mat-elevation(-8);
}

For using the class selector, it would be:

<mat-tab-group class="mat-elevation-z-8">....</mat-tab-group>

The values for the negative elevations would be the same as for the positive but just adding a negative mark (-) for the Y offset, so no changes in terms of design/elevation/values are being suggested here.

I already know where to make the changes in the source code, but instead of pushing a PR, I thought it was worth to first suggest the change here and see if you agree or see the point of this feature.

Note: I can work-around this just using plain css, but I think the elevation helper is very clean and powerful and it would be great if it would support this use case too, imo.

[BH4NG]

mat-excavation-z would seem the most logical to me. +1 on the feature request

[angular-automatic-lock-bot[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.}