Boolean$progress-disable-everything: false !default;Set to true to disable all the styles.
Boolean$progress-disable-linear: $disable-everything !default;Set to true to disable the LinearProgress styles.
Boolean$progress-disable-linear-vertical: false !default;Set to true to disable the LinearProgress vertical styles.
Boolean$progress-disable-linear-horizontal: false !default;Set to true to disable the LinearProgress horizontal styles.
Boolean$progress-disable-linear-reverse: false !default;Set to true to disable the LinearProgress reversed styles.
Boolean$progress-disable-circular: $disable-everything !default;Set to true to only disable the CircularProgress styles.
Boolean$progress-disable-circular-centered-styles: false !default;Set to true to disable the CircularProgress centered styles.
Boolean$progress-disable-circular-rotate-only: false !default;Set this to true if the rotate-only animation is not needed for the
CircularProgress.
Boolean$progress-disable-determinate: false !default;Set to true to disable only the determinate progress styles.
Boolean$progress-disable-indeterminate: false !default;Set to true to disable only the indeterminate progress styles.
Color$progress-color: theme.theme-get-var(primary-color) !default;This is the default prominent color for the LinearProgress component that helps indicate the current progress. This covers the
$background-color.
Color$progress-background-color: color-mix(in srgb, currentcolor 66%, colors.$white) !default;This is the default background-color/secondary color for the
LinearProgress component that is used as the full track color. This is covered by the $color.
Number$progress-circular-size: 3rem !default;The default CircularProgress size.
Number$progress-circular-dense-size: 1.5rem !default;The default dense CircularProgress size.
Number$progress-circular-stroke-width: 6 !default;The default svg stroke-width for the CircularProgress.
Number$progress-circular-dasharray: 187 !default;The default svg stroke-dasharray for the CircularProgress.
Number$progress-circular-transition-duration: transition.$enter-duration !default;The default transition duration for the determinate CircularProgress to animate to new values.
Number$progress-circular-indeterminate-transition-duration: 2.4s !default;The default transition duration for the indeterminate CircularProgress.
Number$progress-circular-rotate-only-transition-duration: 1.2s !default;The default transition duration for the indeterminate CircularProgress
that only rotates to improve performance.
Number$progress-circular-rotate-only-dashoffset: $circular-dasharray * 0.4 !default;The default svg stroke-dashoffset for the indeterminate
CircularProgress that only rotates to improve performance.
Number$progress-circular-start-offset: $circular-dasharray !default;The default starting stroke-dashoffset for the CircularProgress
animation.
Number$progress-circular-end-offset: $circular-dasharray * 0.25 !default;The default ending stroke-dashoffset for the CircularProgress
animation.
Map$progress-circular-rotate-styles: (
0%: (
transform: rotate(0deg),
),
50%: (
transform: rotate(135deg),
),
75%: (
transform: rotate(450deg),
),
100%: (
transform: rotate(720deg),
),
) !default;Used to generate the @keyframes rmd-progress-rotate for the indeterminate
CircularProgress.
Map$progress-circular-dash-styles: (
0%: (
stroke-dashoffset: $circular-start-offset,
),
50%: (
stroke-dashoffset: $circular-end-offset,
),
100%: (
stroke-dashoffset: $circular-start-offset,
),
) !default;Used to generate the @keyframes rmd-circular-progress-size for the indeterminate CircularProgress.
Number$progress-linear-size: 0.25rem !default;The default height/width for the LinearProgress.
Number$progress-linear-transition-duration: 2.4s !default;The default transition duration for the LinearProgress keyframes animation.
Number$progress-linear-short-animation-delay: 0.75s !default;The default transition duration for the LinearProgress keyframes animation that is a bit quicker.
Map$progress-linear-styles: (
0%: (
left: -35%,
right: 100%,
),
60%: (
left: 100%,
right: -90%,
),
100%: (
left: 100%,
right: -90%,
),
) !default;Used to generate the @keyframes rmd-progress-bar for the indeterminate LinearProgress.
Map$progress-linear-short-styles: (
0%: (
left: -200%,
right: 100%,
),
40%: (
left: 107%,
right: -8%,
),
100%: (
left: 107%,
right: -8%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-short for the indeterminate LinearProgress.
Map$progress-linear-reverse-styles: (
0%: (
left: 100%,
right: -35%,
),
60%: (
left: -90%,
right: 100%,
),
100%: (
left: -90%,
right: 100%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-reverse for the reversed indeterminate LinearProgress.
Map$progress-linear-reverse-short-styles: (
0%: (
left: 100%,
right: -200%,
),
40%: (
left: -8%,
right: 107%,
),
100%: (
left: -8%,
right: 107%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-reverse-short for the reversed indeterminate LinearProgress that is a bit quicker.
Map$progress-linear-vertical-styles: (
0%: (
bottom: -35%,
top: 100%,
),
60%: (
bottom: 100%,
top: -90%,
),
100%: (
bottom: 100%,
top: -90%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-vertical for the vertical indeterminate LinearProgress.
Map$progress-linear-vertical-short-styles: (
0%: (
bottom: -200%,
top: 100%,
),
40%: (
bottom: 107%,
top: -8%,
),
100%: (
bottom: 107%,
top: -8%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-vertical-short for the vertical indeterminate LinearProgress that is a bit quicker.
Map$progress-linear-vertical-reverse-styles: (
0%: (
bottom: 100%,
top: -35%,
),
60%: (
bottom: -90%,
top: 100%,
),
100%: (
bottom: -90%,
top: 100%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-vertical-reversed for the vertical reversed indeterminate LinearProgress.
Map$progress-linear-vertical-reverse-short-styles: (
0%: (
bottom: 100%,
top: -200%,
),
40%: (
bottom: -8%,
top: 107%,
),
100%: (
bottom: -8%,
top: 107%,
),
) !default;Used to generate the @keyframes rmd-progress-bar-vertical-reversed-short
for the vertical reversed indeterminate LinearProgress that is a bit quicker.
List$progress-variables: (
background-color,
color,
circular-size,
circular-stroke-width,
linear-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 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 |