Boolean$icon-disable-font: false !default;Set to true to disable the font icon styles. You normally want to only have one icon type enabled.
@use "@react-md/core" with (
$disable-svg: true,
$disable-symbol: true
);Boolean$icon-disable-svg: false !default;Set to true to disable the svg icon styles. You normally want to only have one icon type enabled.
@use "@react-md/core" with (
$disable-font: true,
$disable-symbol: true
);Boolean$icon-disable-symbol: false !default;Set to true to disable the symbol icon styles. You normally want to only have one icon type enabled.
@use "@react-md/core" with (
$disable-font: true,
$disable-svg: true
);Boolean$icon-disable-dense: false !default;Set to true to disable the dense icon sizes
Boolean$icon-disable-inline: false !default;Set to true to disable the styles for aligning icons within inline text blocks (like paragraphs).
Boolean$icon-disable-current-color: false !default;Set to true to disable the styles for inheriting the current color.
Boolean$icon-disable-spacing-before: false !default;Set to true to disable the .rmd-icon--before styles with the
TextIconSpacing component.
Boolean$icon-disable-spacing-after: false !default;Set to true to disable the .rmd-icon--after styles with the
TextIconSpacing component.
Boolean$icon-disable-spacing-above: false !default;Set to true to disable the .rmd-icon--above styles with the
TextIconSpacing component.
Boolean$icon-disable-spacing-below: false !default;Set to true to disable the .rmd-icon--below styles with the
TextIconSpacing component.
Boolean$icon-disable-rotator: false !default;Set to true to disable the icon rotator styles
Color$icon-light-theme-color: color.adjust(#000, $lightness: 46%) !default;The default icon color when using the global light theme
Color$icon-dark-theme-color: color.adjust(#fff, $lightness: -30%) !default;The default icon color when using the global dark theme
Color$icon-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;The default icon color
Number$icon-size: 1.5rem !default;The default icon size
Number$icon-dense-size: 1.25rem !default;The default icon dense size
Number$icon-symbol-fill: 0 !default;This is the default material symbol fill value. It should be one of:
01Number$icon-symbol-weight: 400 !default;This is the default material symbol weight value. It should be one of:
100200300400500600700Number$icon-symbol-grade: 0 !default;This is the default material symbol grade value. It should be one of:
-250200Number$icon-symbol-optical-size: 48 !default;This is the default material symbol fill value. It should be one of:
20244048Number$icon-spacing: spacing.get-var(sm) !default;The default spacing for the TextIconSpacing component or anytime icons should be separated from other content.
String$icon-rotate-from: 0deg !default;The default IconRotator starting position
String$icon-rotate-to: 180deg !default;The default IconRotator ending position
Number$icon-rotate-duration: transition.$linear-duration !default;The default IconRotator transition duration
List$icon-variables: (
color,
size,
dense-size,
spacing,
rotate-from,
rotate-to,
symbol-fill,
symbol-grade,
symbol-weight,
symbol-optical-size
);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 |