angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.36k stars 6.74k forks source link

docs-bug(elevation): No documentation for how to change shadow colour for elevation #29519

Open travissimon opened 3 months ago

travissimon commented 3 months ago

Documentation Feedback

The current documentation does not provide sufficient documentation for how to change the shadow colour (possibly more relevant with dark themes).

I have found the original commits for the feature, so I know it is achievable, but I could not find enough documentation to implement it myself. My attempts can be seen at this Stack Blitz.

I'm selfishly just wanting to know how to implement the feature, but I'm also willing to update the documentation if that would be of assistance.

Thank you all for your work - Angular Material is great.

Affected documentation page

https://material.angular.io/guide/elevation#overridable-elevation

MadunaThabo commented 2 months ago

Hello, I had a loook at the at the stack blitz the problem was that

@mixin my-elevation($zValue) { @include mat-elevation($zValue, $custom-shadow-color, $custom-shadow-opacity); }

changed it to ( changed -, to . ): @mixin my-elevation($zValue) { @include mat.elevation($zValue, $custom-shadow-color, $custom-shadow-opacity); }

then

applied it to the content div: .content { @include my-elevation(5); }

then lastly with the button the issue was that the .mat-mdc-raised-button was overriding the elevation shadow with the "default" shadow of the button that is why it wasn't appearing when I attempted at first

image

travissimon commented 2 months ago

then applied it to the content div: .content { @include my-elevation(5); }

Hi Thabo. The functionality I am trying to figure out is how to change /all/ shadow colours, especially on the default material controls (without having to override each individual style.)

I have seen a screenshot (I think by @benelliott or maybe @mmalerba) where they were able to achieve this, but I haven't been able to replicate it.