Boolean
$card-disable-everything: false !default;
Boolean
$card-disable-bordered: false !default;
Boolean
$card-disable-shadowed: false !default;
Boolean
$card-disable-raisable: $disable-shadowed !default;
Boolean
$card-disable-clickable: false !default;
Boolean
$card-disable-content-last-child-padding: false !default;
Number
$card-elevation: 2 !default;
Number
$card-raisable-start-elevation: 1 !default;
Number
$card-raisable-end-elevation: 8 !default;
Color
$card-light-theme-background-color: theme.theme-get-var(surface-color) !default;
Color
$card-dark-theme-background-color: if(
theme.$disable-dark-elevation,
theme.$dark-theme-surface-color,
map.get(theme.$dark-elevation-colors, $elevation)
) !default;
Color
$card-background-color: theme.get-default-color(
$light-theme-background-color,
$dark-theme-background-color
) !default;
Color
$card-color: theme.theme-get-var(text-primary-color) !default;
Color
$card-border-color: divider.get-var(color) !default;
Number
$card-border-width: divider.get-var(size) !default;
Number
$card-border-radius: border-radius.get-var(xs) !default;
Number
$card-header-padding: spacing.get-var(md) !default;
Number
$card-header-padding-top: spacing.get-var(lg) !default;
Number
$card-header-spacing: spacing.get-var(md) !default;
Number
$card-content-padding: spacing.get-var(md) !default;
Number
$card-content-padding-bottom: spacing.get-var(lg) !default;
Number
$card-footer-padding: spacing.get-var(sm) !default;
List
$card-variables: (background-color, color);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin use-light-theme { … }
mixin
@mixin use-dark-theme { … }
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
Set to true
to disable all the styles
Set to true
to disable the bordered styles since cards use box-shadow by default.
Set to true
to disable the box-shadow styles if you want to rely on the border styles instead.
Set to true
to disable the raisable card styles where hovering a card increases the elevation/box-shadow.
Set to true
to disable the clickable card styles
Set to true
to disable the styles for adding additional padding to the last CardContent
that exists
The default card box-shadow elevation
The default card raisable starting box-shadow elevation
The default card raisable ending (hovering) box-shadow elevation
The background color to use when using the global light theme
The background color to use when using the global dark theme
The default card background color
The default card text color
The default border-color for bordered cards
The default border-width for bordered cards
The default border-radius for bordered cards
The default padding to apply to CardHeader
The default padding-top to apply to CardHeader
The default column-gap
to apply to the CardHeader
The default padding to apply to the CardContent
The default padding-bottom to apply to the CardContent
when it is the last child and the $disable-content-last-child-padding
feature flag has not been disabled.
The default padding to apply to the CardFooter
The available configurable css variables and mostly used internally for the
get-var
, set-var
, and use-var
utils.
The supported variable name
The value to set the variable to. Supports null
which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
Applies the light the variables based on feature flags
Applies the dark the variables based on feature flags
Conditionally applies the css variables based on feature flags
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
a var()
statement
The supported variable name
An optional fallback value