[Feature Request] Negative elevation

[sense-it-gmbh]

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)

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[sense-it-gmbh]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

Hi, if you say so, I'm ok with that. Still i don't really understand the Problem. The implementation should be more than simple. If you don't mind I would appreciate, if you could explain why exactly it will not be in vuetify.

Ty, I wish you a good day. Many thanks for the most awesome framework: vuetify!

[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.

[sense-it-gmbh]

@candu that's exactly what im doing. The thing i don't like about it that this is not update-save: if there are changes to shadow (color/dimension/blur) on vuetify my shadow would maybe look awkward compared to the vuetify shadow. Yet this is not very likely to happen, so im ok with missing negative shadows - after your explanation more than ever. thanks

[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.