The height and width to use for a circular badge.
$rmd-badge-size: 1.5rem !default;The border radius to use for a circular badge.
$rmd-badge-border-radius: 50% !default;The "default" background color.
$rmd-badge-default-background-color: rgba($rmd-black-base, 0.2) !default;The "default" themed text color.
$rmd-badge-default-color: if(
rmd-theme-tone($rmd-badge-default-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The badge's font size.
$rmd-badge-font-size: 0.625rem !default;The top position for the badge.
$rmd-badge-offset-top: 0 !default;The right position for the badge. This will be swapped to be left for rtl languages.
$rmd-badge-offset-right: 0 !default;A Map of all the "themeable" parts of the badge 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-badge-theme-values: (
background-color: $rmd-badge-default-background-color,
color: $rmd-badge-default-color,
border-radius: $rmd-badge-border-radius,
font-size: $rmd-badge-font-size,
size: $rmd-badge-size,
top: $rmd-badge-offset-top,
right: $rmd-badge-offset-right,
) !default;Creates the styles for one of the badge's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | 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 | Color|String|Number | null |
Updates one of the badge's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The badge theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the minimal styles for a badge container.
Creates all the styles for the badge component.
Creates all the styles for this package as well as defining all the theme CSS variables.
This function is used to quickly get one of the badge's theme values. This is really just for the rmd-badge-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the badge's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the badge'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-badge-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.
Stringone of the badge's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |