Skip to main content
react-md
react-md - Chip - SassDoc

Variables

rmd-chip-disable-focus-background-color

Boolean

Boolean if the chip should disable the background color change when it gains keyboard focus. This is disabled by default since the focus shadow looks a bit nicer than the background color changes due to the colors of the chips.

$rmd-chip-disable-focus-background-color: $rmd-states-use-focus-shadow !default;

rmd-chip-height

Number

The height for chips.

$rmd-chip-height: 2rem !default;

rmd-chip-border-radius

Number

The border radius to use for all chip types.

$rmd-chip-border-radius: 1rem !default;

rmd-chip-small-spacing

Number

The amount of spacing to use when between the left edge and the leading icon/avatar in the chip.

$rmd-chip-small-spacing: 0.25rem !default;

rmd-chip-medium-spacing

Number

The amount of spacing to use between the leading icon/avatar and the chip's text as well as the trailing icon and the chip's edge.

$rmd-chip-medium-spacing: 0.5rem !default;

rmd-chip-large-spacing

Number

The amount of spacing to use for the chip's edge when there are no leading or trailing icons/avatars.

$rmd-chip-large-spacing: 0.75rem !default;

rmd-chip-icon-size

Number

The size to update icons to that appear within a chip.

$rmd-chip-icon-size: 1.125rem !default;

rmd-chip-avatar-size

Number

The size for avatars that appear within a chip.

Note: This will only be generated if the @react-md/avatar package has been installed and imported

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

rmd-chip-progress-size

Number

The size to use for a circular progress that is being rendered as the leftIcon or rightIcon. This should be a number smaller than the height of the chip minus vertical padding.

$rmd-chip-progress-size: $rmd-chip-icon-size !default;

rmd-chip-progress-width

Number

The width to use for the circular progress that is being rendered as the leftIcon or rightIcon.

$rmd-chip-progress-width: 12 !default;

rmd-chip-themed-background-color

Color

The background color to use for the selected themed state of the chip. This is basically a secondary type of selected state.

$rmd-chip-themed-background-color: rmd-theme-get-swatch(
  $rmd-theme-primary,
  300,
  false,
  darken($rmd-theme-primary, 20%),
  rmd-chip-themed-background-color
) !default;

rmd-chip-themed-color

Color

The color to use for the selected themed state of the chip.

$rmd-chip-themed-color: if(
  rmd-theme-tone($rmd-chip-themed-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;

rmd-chip-solid-light-background-color

Color

The background color to use for "solid" themed chips when using the light theme.

$rmd-chip-solid-light-background-color: $rmd-grey-300 !default;

rmd-chip-solid-light-color

Color

The text color to use for "solid" themed chips when using the light theme.

$rmd-chip-solid-light-color: if(
  rmd-theme-tone($rmd-chip-solid-light-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;

rmd-chip-solid-light-disabled-background-color

Color

The background color to use for a solid disabled chip when using the light theme.

$rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;

rmd-chip-solid-dark-background-color

Color

The background color to use for "solid" themed chips when using the dark theme.

$rmd-chip-solid-dark-background-color: if(
  $rmd-theme-dark-elevation,
  map-get($rmd-theme-dark-elevation-colors, 12),
  $rmd-grey-900
) !default;

rmd-chip-solid-dark-color

Color

The text color to use for "solid" themed chips when using the dark theme.

$rmd-chip-solid-dark-color: if(
  rmd-theme-tone($rmd-chip-solid-dark-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;

rmd-chip-solid-dark-disabled-background-color

Color

The background color to use for a solid disabled chip when using the dark theme.

$rmd-chip-solid-dark-disabled-background-color: lighten(
  $rmd-grey-900,
  2%
) !default;

rmd-chip-solid-background-color

Color

The background color to use for "solid" themed chips.

$rmd-chip-solid-background-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-background-color,
  $rmd-chip-solid-dark-background-color
) !default;

rmd-chip-solid-color

Color

The text color to use for "solid" themed chips.

$rmd-chip-solid-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-color,
  $rmd-chip-solid-dark-color
) !default;

rmd-chip-solid-disabled-background-color

Color

The background color to use for "solid" themed chips that are disabled.

$rmd-chip-solid-disabled-background-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-disabled-background-color,
  $rmd-chip-solid-dark-disabled-background-color
) !default;

rmd-chip-outline-light-background-color

Color

The background color to use for "outlined" themed chips when using the light theme.

$rmd-chip-outline-light-background-color: $rmd-theme-light-surface !default;

rmd-chip-outline-light-color

Color

The text color to use for "outlined" themed chips when using the light theme.

$rmd-chip-outline-light-color: if(
  rmd-theme-tone($rmd-chip-outline-light-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;

rmd-chip-outline-dark-background-color

Color

The background color to use for "outlined" themed chips when using the dark theme.

$rmd-chip-outline-dark-background-color: if(
  $rmd-theme-dark-elevation,
  map-get($rmd-theme-dark-elevation-colors, 8),
  $rmd-theme-dark-surface
) !default;

rmd-chip-outline-dark-color

Color

The text color to use for "outlined" themed chips when using the dark theme.

$rmd-chip-outline-dark-color: if(
  rmd-theme-tone($rmd-chip-outline-dark-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;

rmd-chip-outline-background-color

Color

The background color to use for "outlined" themed chips.

$rmd-chip-outline-background-color: if(
  $rmd-theme-light,
  $rmd-chip-outline-light-background-color,
  $rmd-chip-outline-dark-background-color
) !default;

rmd-chip-outline-color

Color

The tect color to use for "outlined" themed chips.

$rmd-chip-outline-color: if(
  $rmd-theme-light,
  $rmd-chip-outline-light-color,
  $rmd-chip-outline-dark-color
) !default;

rmd-chip-outline-border-color

Color

The border color to use for "outline" themed chips.

$rmd-chip-outline-border-color: $rmd-grey-300 !default;

rmd-chip-transition-duration

Number

The transition duration for animating the box-shadow elevation for a chip while being pressed by a keyboard.

$rmd-chip-transition-duration: $rmd-transition-standard-time !default;

rmd-chip-box-shadow

String

The base box-shadow to apply to chips when outlined. This will normally be used along with a color variable to define a box shadow.

$rmd-chip-box-shadow: inset 0 0 0 1px !default;

rmd-chip-theme-values

Map

A Map of all the "themeable" parts of the chip 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-chip-theme-values: (
  height: $rmd-chip-height,
  border-radius: $rmd-chip-border-radius,
  themed-background-color: $rmd-chip-themed-background-color,
  themed-color: $rmd-chip-themed-color,
  solid-background-color: $rmd-chip-solid-background-color,
  solid-color: $rmd-chip-solid-color,
  solid-disabled: $rmd-chip-solid-disabled-background-color,
  outline-background-color: $rmd-chip-outline-background-color,
  outline-color: $rmd-chip-outline-color,
  outline-border-color: $rmd-chip-outline-border-color,
  small-spacing: $rmd-chip-small-spacing,
  medium-spacing: $rmd-chip-medium-spacing,
  large-spacing: $rmd-chip-large-spacing,
) !default;

Mixins

rmd-chip-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

One of the keys of rmd-chip-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-chip-theme-values map when null.

Color|String|Numbernull

rmd-chip-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-chip

mixin

Creates all the styles for the chip button

react-md-chip

mixin

Creates all the styles for this package as well as defining all the theme CSS variables.

Functions

rmd-chip-theme

function

This function is used to quickly get one of the chip's theme values. This is really just for the rmd-chip-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 chip's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-chip-theme-var

function

This function is used to get one of the chip'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-chip-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 chip's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-chip-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