Boolean$badge-disable-everything: false !default;Set to true to disable all the styles
Boolean$badge-disable-greyscale-theme: false !default;Set to true to disable the styles for the greyscale theme only
Boolean$badge-disable-primary-theme: false !default;Set to true to disable the styles for the primary theme only
Boolean$badge-disable-secondary-theme: false !default;Set to true to disable the styles for the secondary theme only
Number$badge-size: 1.5rem !default;The default height and width
Number$badge-font-size: 0.625rem !default;The default font size which is merged into the $typography map.
Number$badge-offset: 0 !default;The default top and right offset applied to badges that are positioned absolutely in a relative container.
The styles are setup like:
right: var(--rmd-badge-offset-right, var(--rmd-badge-offset))
Number$badge-offset-top: $offset !default;An optional top offset override. When this is null or equal to the
offset, it will not be set and fallback to the offset
instead.
Number$badge-offset-right: $offset !default;An optional right offset override. When this is null or equal to the
offset, it will not be set and fallback to the offset
instead.
Number$badge-border-radius: border-radius.get-var(full) !default;The default border radius
Map$badge-typography: map.merge(
map.remove(typography.$body-1-styles, line-height, font-size),
(
font-size: $font-size,
)
) !default;The default typography to use
Color $badge-light-theme-greyscale-background-color: #ccc !default;The background color for the greyscale theme when using the global light theme
Color $badge-light-theme-greyscale-color: a11y.contrast-color(
$light-theme-greyscale-background-color
) !default;The text color for the greyscale theme when using the global light theme
Color $badge-dark-theme-greyscale-background-color: colors.$grey-700 !default;The background color for the greyscale theme when using the global dark theme
Color $badge-dark-theme-greyscale-color: a11y.contrast-color(
$dark-theme-greyscale-background-color
) !default;The text color for the greyscale theme when using the global dark theme
Color $badge-greyscale-background-color: theme.get-default-color(
$light-theme-greyscale-background-color,
$dark-theme-greyscale-background-color
) !default;The default greyscale background color
Color $badge-greyscale-color: theme.get-default-color(
$light-theme-greyscale-color,
$dark-theme-greyscale-color
) !default;The default greyscale text color
List$badge-variables: (
border-radius,
greyscale-background-color,
greyscale-color,
size,
offset,
offset-top,
offset-right
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin use-light-theme { … }Applies the light the variables based on feature flags
mixin@mixin use-dark-theme { … }Applies the dark the variables based on feature flags
mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |