Boolean$avatar-disable-everything: false !default;Boolean$avatar-disable-icon: false !default;Boolean$avatar-disable-icon-size: false !default;Boolean$avatar-disable-image: false !default;Boolean$avatar-disable-auto-image: false !default;Color $avatar-color: colors.$grey-100 !default;Color $avatar-background-color: colors.$grey-700 !default;Number$avatar-line-height: map.get(typography.$subtitle-1-styles, line-height) !default;Color$avatar-border-color: transparent !default;Number$avatar-border-radius: border-radius.get-var(full) !default;Number$avatar-size: 2.5rem !default;Number$avatar-font-size: 1.5rem !default;Number$avatar-icon-sized-size: icon.get-var(size) !default;Number$avatar-icon-sized-font-size: 0.75rem !default;Map$avatar-default-colors: (
red: colors.$red-a-700 colors.$red-50,
pink: colors.$pink-600 colors.$white,
purple: colors.$purple-700 colors.$purple-100,
deep-purple: colors.$deep-purple-900 colors.$deep-purple-100,
indigo: colors.$indigo-600 colors.$indigo-100,
blue: colors.$blue-a-700 colors.$white,
light-blue: colors.$light-blue-300 colors.$deep-purple-900,
cyan: colors.$cyan-400 colors.$teal-900,
teal: colors.$teal-a-400 colors.$teal-900,
green: colors.$green-800 colors.$green-50,
light-green: colors.$light-green-300 colors.$green-900,
lime: colors.$lime-400 colors.$teal-800,
yellow: colors.$yellow-a-200 colors.$brown-500,
amber: colors.$amber-400 colors.$brown-800,
orange: colors.$orange-600 colors.$grey-900,
deep-orange: colors.$deep-orange-a-400 colors.$grey-900,
brown: colors.$brown-500 colors.$brown-50,
grey: colors.$grey-700 colors.$grey-100,
blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
);Map$avatar-custom-colors: () !default;Map$avatar-colors: map.merge($default-colors, $custom-colors) !default;List$avatar-variables: (
background-color,
color,
border-color,
border-radius,
size,
font-size
);mixin@mixin set-var($name, $value) { … }mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin custom-color($name, $color, $background-color, $disable-prefix: false) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | String | — | |
$color | Color | — | |
$background-color | Color | — | |
$disable-prefix | Boolean | false |
mixin@mixin variables { … }mixin@mixin styles($disable-layer: false) { … }function@function get-var($name, $fallback: null) { … }StringSet to true to disable all the styles
Set to true to disable updating the icon color within avatars to inherit the current color by default.
Set to true to disable allowing the avatar to be sized as an icon.
Set to true to disable the img styling when src or imgProps are provided to the avatar.
Set to true to disable automatically updating all img elements that appear in an avatar to be responsive.
The default text color
The default background color
The default line height
The default border color
The default border radius. If you want to make avatars be more square-like, set this to something like 0.25rem.
The default height and width
The default font size
The default height and width when sized as an icon
The default font size when sized as an avatar
Some reasonable defaults for the avatar colors that ensure contrast ratios are accessible between the background and foreground.
Any custom colors to create. Each key is the class name suffix for the avatar and each value should be an ordered list of: background-color color.
This will automatically be merged with the $default-colors so you can set any value to null to remove it or provide the same key with different values to override.
The default colors that can be created for an avatar. This can be set to an empty Map to create no color styles, a completely custom map, or merge with the existing.
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
NOTE: You will need to enforce an acceptable color contrast yourself between the background and foreground colors.
This will be used for the class name when
$disable-prefix is set to true, otherwise as .rmd-avatar--${Name}.
The text color to use.
The background color to use
Set to true to disable the
.rmd-avatar-- prefix for the class name
Conditionally applies the css variables based on feature flags
Generates all the styles for the Autocomplete components based on feature flags.
Set this to true to disable the layer behavior
Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color.
a var() statement
The supported variable name
An optional fallback value