Avatars

Variables

md-avatar-size
$md-avatar-size: 40px !default;
Sass (Scss)

Description

The default size for an avatar

Type

Number

Used by

md-avatar-border-radius
$md-avatar-border-radius: 50% !default;
Sass (Scss)

Description

The border radius for an avatar.

Type

Number

Used by

md-avatar-border-color
$md-avatar-border-color: null !default;
Sass (Scss)

Description

The border color to use for an avatar. If this value is null, the border color will be the current theme's divider color.

Type

Color

Used by

md-avatar-default-background
$md-avatar-default-background: $md-grey-700 !default;
Sass (Scss)

Description

The default background color for an avatar.

Type

Color

Used by

md-avatar-default-color
$md-avatar-default-color: $md-grey-100 !default;
Sass (Scss)

Description

The default text color for an avatar.

Type

Color

Used by

md-avatar-include-suffixes
$md-avatar-include-suffixes: true !default;
Sass (Scss)

Description

Boolean if the avatar color suffixes should be included by default.

Type

Boolean
md-avatar-include-icon-sized
$md-avatar-include-icon-sized: true !default;
Sass (Scss)

Description

Boolean if the md-avatar--icon-sized class name should also be included. This will force an avatar to be the same size as an icon.

Type

Boolean
md-avatar-colors
$md-avatar-colors: ()
Sass (Scss)
Click to expand

Description

A map of avatar color suffixes to use. Each key will be used as an avatar suffix name, and the value will be a list of two colors where the first item is the background color and the second item is the text color.

The default colors where chosen to pass the WebAIM for large text only. If these values are changed, it should pass them as well.

Type

Map

Used by

Mixins

react-md-avatars
@mixin react-md-avatars($light-theme: $md-light-theme, $include-media: $md-media-included, $include-suffixes: $md-avatar-include-suffixes, $include-icon-sized: $md-avatar-include-icon-sized, $include-dense: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the Avatars.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries for avatars should also be included. This will really only create additional styles if $include-dense is true as well.

Boolean
$md-media-included
$include-suffixes

Boolean if the avatar color suffixes should be included.

Boolean
$md-avatar-include-suffixes
$include-icon-sized

Boolean if icon sized avatars should be included.

Boolean
$md-avatar-include-icon-sized
$include-dense

Boolean if the dense spec of icons should be included.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-avatar-media
@mixin react-md-avatar-media($include-icon-sized: $md-avatar-include-icon-sized, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries with styles for avatars. This really only generates any new styles if icon sized avatars are included, the dense spec for icons are included, and the font-icon size is different for default and the dense spec.

Parameters

NameDescriptionTypeDefault value
$include-icon-sized

Boolean if icon sized avatars should be included.

Boolean
$md-avatar-include-icon-sized
$include-dense-icons

Boolean if the dense spec for icons should be included.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-theme-avatars
@mixin react-md-theme-avatars($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

This will only update the base avatar's border color if the $light-theme is different than $md-light-theme. If you want to add different colors, you should use the react-md-theme-avatar mixin.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Requires

Used by

See

react-md-theme-avatar
@mixin react-md-theme-avatar($bg-color, $text-color, $suffix) {}
Sass (Scss)
Click to expand

Description

Creates a single theme for the Avatar. It simply creates a class name with the new background and text color with the given suffix.

Parameters

NameDescriptionTypeDefault value
$bg-color

The background color to use.

Color
$text-color

The text color to use.

Color
$suffix

The class name suffix to use.

String

Examples

Simple Example SCSS

@include react-md-theme-avatar(#000, #fff, black);
Sass (Scss)

Simple Example CSS Output

.md-avatar--black {
  background: #000;
  color: #fff;
}
Sass (Scss)

Used by