The elevation to use for cards that are not raisable.
$rmd-card-elevation: 2 !default;Since v2.7.0
The background color for a card in light themes.
$rmd-card-light-background-color: rmd-theme-var(surface) !default;Since v2.7.0
The background color for a card in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.
$rmd-card-dark-elevation-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-card-elevation
);Since v2.7.0
The background color for a card in dark themes.
$rmd-card-dark-background-color: if(
$rmd-theme-dark-elevation and $rmd-card-dark-elevation-background-color,
$rmd-card-dark-elevation-background-color,
rmd-theme-var(surface)
) !default;The base background color to apply to cards.
$rmd-card-background-color: if(
$rmd-theme-light,
$rmd-card-light-background-color,
$rmd-card-dark-background-color
) !default;The base primary text color to apply to cards.
$rmd-card-color: rmd-theme-var(on-surface) !default;The base secondary text color to apply to cards. The CardSubtitle and CardContent components will use this color by default unless the disableSecondaryColor prop is enabled.
$rmd-card-secondary-color: if(
rmd-theme-tone($rmd-theme-surface) == light,
rmd-theme-var(text-primary-on-light),
rmd-theme-var(text-primary-on-dark)
) !default;The starting elevation for a raisable card.
$rmd-card-base-elevation: 1 !default;The ending elevation for a raisable card.
$rmd-card-raised-elevation: 8 !default;The border radius to apply to cards.
$rmd-card-border-radius: 0.25rem !default;The amount of padding to apply to the CardHeader component.
$rmd-card-header-padding: 1rem !default;Any extra amount of padding to apply to the top of the CardHeader component. This is really just added since it looks a bit nicer to have extra padding top.
$rmd-card-header-padding-top: 1.5rem !default;The amount of spacing to use between the main content in the header and the beforeChildren and afterChildren props. This really gets used with the TextIconSpacing component from the @react-md/icon package
$rmd-card-header-spacing: 1rem !default;The amount of padding to apply to the CardContent component.
$rmd-card-content-padding: 1rem !default;When the CardContent component is the last child in the Card, it normally looks a bit nicer to apply a bit more padding to it. So this is the extra padding-bottom that will be applied in that case.
$rmd-card-content-padding-extra: 1.5rem !default;The amount of padding to apply to the CardActions component.
$rmd-card-actions-padding: 0.5rem !default;The border color for a bordered card.
$rmd-card-border-color: rmd-divider-theme-var(background-color) !default;The width for a bordered card.
$rmd-card-border-width: $rmd-divider-size !default;A Map of all the "themeable" parts of the card package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-card-theme-values: (
background-color: $rmd-card-background-color,
color: $rmd-card-color,
secondary-color: $rmd-card-secondary-color,
) !default;Creates the styles for one of the card's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the card's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The card theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates all the styles for the Card component only. You'll need to use this within a selector.
Creates all the styles for the CardHeader component. You'll need to use this within a selector.
Creates all the styles for the CardTitle component. You'll need to use this within a selector.
Creates all the styles for the CardSubtitle component. You'll need to use this within a selector.
Creates all the styles for the CardContent component. You'll need to use this within a selector.
Creates all the styles for the CardActions component. You'll need to use this within a selector.
Creates all the styles for the @react-md/card package.
This function is used to quickly get one of the card's theme values. This is really just for the rmd-card-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the card's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the card's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-card-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the card's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |