Skip to content

fix(material/card): allow for elevation to be overridden #26098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix(material/card): allow for elevation to be overridden #26098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions src/material/card/_card-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use '../core/theming/theming';
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/style/private';
@use '../core/typography/typography';
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
Expand All @@ -15,18 +14,12 @@

@include mdc-helpers.using-mdc-theme($config) {
.mat-mdc-card {
// MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't
// use them because they output under a `.mdc-card` selector whereas the rest of the theme
// isn't under any selector. Even if the mixin is pulled out of the selector, it throws a
// different error.
@include private.private-theme-elevation(1, $config);
@include mdc-elevated-card-theme.theme((
container-color: mdc-theme-color.prop-value(surface),
));
}

.mat-mdc-card-outlined {
@include private.private-theme-elevation(0, $config);
@include mdc-outlined-card-theme.theme((
outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
mdc-theme-color.prop-value(surface), 12%)
Expand Down
13 changes: 12 additions & 1 deletion src/material/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/style/elevation';

// TODO(jelbourn): move header and title-group styles to their own files.

Expand All @@ -17,7 +18,15 @@ $mat-card-default-padding: 16px !default;
@include mdc-card.static-styles($query: mdc-helpers.$mdc-base-styles-query);
}

.mat-mdc-card {
// It's very common for users to override the elevation of a card. We output under an element
// selector to make it as easy as possible. We can't use the `overridable-elevation` mixin,
// because it increases the specificity too much.
mat-card {
// MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't
// use them because they output under a `.mdc-card` selector whereas the rest of the theme
// isn't under any selector. Even if the mixin is pulled out of the selector, it throws a
// different error.
@include elevation.elevation(1);
position: relative;

@include mdc-helpers.disable-mdc-fallback-declarations {
Expand All @@ -29,6 +38,8 @@ $mat-card-default-padding: 16px !default;
}

.mat-mdc-card-outlined {
box-shadow: none;

@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-outlined-card-theme.theme-styles((
outline-color: transparent,
Expand Down