[Feature Request] Negative elevation

Problem to solve

The elevation-classes are an excellent helper. However in some cases, it would be useful to create an ‘negative’ elevation (lets call it depression).

My use-case is a container for search-results, that has limited height and is scrolling on overflow. I want the container to behave like elevated but with shadow set to inset instead.

Proposed solution

Create new Classes for ‘negative’ elevation, mirroring the behavior of already present elevetion-classes but with box-shadow set to inset instead of outset.

Example Naming pattern:

• positive elevation (unchanged): elevation-{n} (n: 0-24)
• negative elevation: elevation--{n} (n: 0-24)
• negative elevation (alternative): depression-{n} (n: 0-24)

[candu]

@sense-it-gmbh I’m not a maintainer of this excellent library, but I’d guess the reasoning is as follows:

• the Material Design spec doesn’t really specify negative elevations;
• not many users want this, and CSS tree-shaking isn’t really a thing, so for most Vuetify users this would be added CSS weight for no benefit.

That said: you can use inset as described here to make inset box shadows. For example:

.elevation-n1 {
  box-shadow:
    inset 0 2px 1px -1px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    inset 0 1px 3px 0 rgba(0, 0, 0, 0.12) !important;
}

Here I’ve taken the .elevation-1 style and just added inset to the beginning of each shadow in the box-shadow value.

[frederikheld]

I’d like to have this feature as well but I understand that this is not a priority.

@sense-it-gmbh You say that you already have the solution. Why don’t you just submit a PR that adds the feature? Your name says that you’re a company, so you profit from using this free stuff. Would be a nice to give some thing back every once in a while.