Skip to main content
react-md
Avatar - SassDoc

Variables

rmd-avatar-color

Color

The default text color for the avatar. This will be used until the color prop is provided to the Avatar component.

$rmd-avatar-color: $rmd-grey-100 !default;

rmd-avatar-background-color

Color

The default background color for an avatar. This will be used until the color prop is provided to the Avatar component.

$rmd-avatar-background-color: $rmd-grey-700 !default;
See also

rmd-avatar-border-color

Color

The border color to apply to the avatar.

$rmd-avatar-border-color: rgba(
  if(
    rmd-theme-tone($rmd-theme-background) == light,
    $rmd-black-base,
    $rmd-white-base
  ),
  0.12
) !default;

rmd-avatar-border-radius

Number

The border-radius for the avatar.

$rmd-avatar-border-radius: 50% !default;

rmd-avatar-size

Number

The size for the avatar.

$rmd-avatar-size: 2.5rem !default;

rmd-avatar-font-size

Number

The font size to apply to avatars. This is used when the avatar is a letter.

$rmd-avatar-font-size: 1.5rem !default;

rmd-avatar-line-height

Number

The line height to use for avatars. This is really only useful when the avatar is a letter.

$rmd-avatar-line-height: rmd-typography-value(subtitle-1, line-height) !default;

rmd-avatar-colors

Map

A Map of all the available colors for the avatar. This map can be updated with new values if the defaults are not to your liking, but it is recommended to create your own themes instead.

$rmd-avatar-colors: (
  red: $rmd-red-a-700 $rmd-red-50,
  pink: $rmd-pink-600 $rmd-white-base,
  purple: $rmd-purple-700 $rmd-purple-100,
  deep-purple: $rmd-deep-purple-900 $rmd-deep-purple-100,
  indigo: $rmd-indigo-600 $rmd-indigo-100,
  blue: $rmd-blue-a-700 $rmd-white-base,
  light-blue: $rmd-light-blue-300 $rmd-deep-purple-900,
  cyan: $rmd-cyan-400 $rmd-teal-900,
  teal: $rmd-teal-a-400 $rmd-teal-900,
  green: $rmd-green-800 $rmd-green-50,
  light-green: $rmd-light-green-300 $rmd-green-900,
  lime: $rmd-lime-400 $rmd-teal-800,
  yellow: $rmd-yellow-a-200 $rmd-brown-500,
  amber: $rmd-amber-400 $rmd-brown-800,
  orange: $rmd-orange-600 $rmd-grey-900,
  deep-orange: $rmd-deep-orange-a-400 $rmd-grey-900,
  brown: $rmd-brown-500 $rmd-brown-50,
  grey: $rmd-grey-700 $rmd-grey-100,
  blue-grey: $rmd-blue-grey-700 $rmd-blue-grey-50,
) !default;

rmd-avatar-theme-values

Map

A Map of all the "themeable" parts of the avatar 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-avatar-theme-values: (
  background-color: $rmd-avatar-background-color,
  border-color: $rmd-avatar-border-color,
  border-radius: $rmd-avatar-border-radius,
  color: $rmd-avatar-color,
  font-size: $rmd-avatar-font-size,
  size: $rmd-avatar-size,
) !default;

Mixins

rmd-avatar-theme

mixin

Creates the styles for one of the avatar's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-avatar-theme-values value to.

String
$theme-style

One of the keys of rmd-avatar-theme-values to extract a value from.

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 rmd-avatar-theme-values map when null.

Color|String|Numbernull

rmd-avatar-theme-update-var

mixin

Updates one of the avatar's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The avatar theme style type to update. This should be one of the $rmd-avatar-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-avatar-color

mixin

A mixin for updating the avatar's theme colors.

Parameters
NameDescriptionTypeDefault Value
$background-color

The background color to apply

Color
$color

The text color to apply

Color

Examples

Example Usage SCSS
.my-red-avatar {
  @include rmd-avatar-color($rmd-red-500, $rmd-black-base);
}

.my-orange-avatar {
  @include rmd-avatar-color($rmd-orange-500, $rmd-black-base);
}

rmd-avatar-colors

mixin

A mixin for creating the avatar color suffix class names from a color map. It is not recommended to use this mixin for creating additional colors. Instead use the rmd-avatar-color mixin with custom class names instead.

Parameters
NameDescriptionTypeDefault Value
$color-map

a map of color name suffixes and a list of the background-color and color to apply

Map$rmd-avatar-colors
Throws
  • 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.

react-md-avatar

mixin

Creates all the styles for the avatar package as well as the root css variable theme.

Functions

rmd-avatar-theme

function

This function is used to quickly get one of the avatar's theme values. This is really just for the rmd-avatar-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the avatar's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-avatar-theme-values map keys to get a value for.

String

rmd-avatar-theme-var

function

This function is used to get one of the avatar'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-avatar-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.

Returns — String

one of the avatar's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-avatar-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull