The transition time for links to change color.
$rmd-link-transition-time: $rmd-transition-standard-time !default;
The default color to use for links.
$rmd-link-color: $rmd-blue-500 !default;
The color to use for links that have been visited.
$rmd-link-visited-color: $rmd-blue-600 !default;
The color to use for links that are being hovered.
$rmd-link-hover-color: $rmd-blue-400 !default;
The z-index to apply for the skip to main content link. This should always be the biggest z-index in your app so it can be visible.
$rmd-link-skip-z-index: 10000 !default;
The default styles to apply to the skip to main content link.
$rmd-link-skip-styles: (
color: rmd-theme-var(on-primary),
left: 50%,
padding: 0.25rem 1rem,
top: 0.25rem,
transform: translateX(-50%),
) !default;
The default styles to apply to the skip to main content link when it has become keyboard focused.
$rmd-link-skip-active-styles: (
outline: 0.25rem dashed $rmd-black-base,
) !default;
A Map of all the "themeable" parts of the link package. Every key in this map will be used to create a css variable to dynamically update the values of the link as needed.
$rmd-link-theme-values: (
color: $rmd-link-color,
hover-color: $rmd-link-hover-color,
visited-color: $rmd-link-visited-color,
) !default;
Creates the styles for one of the link'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 | property |
$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 link's theme variables with the new value for the section of your app.
Name | Description | Type | Default Value |
---|---|---|---|
$theme-style | The link theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the styles for links within react-md.
This function is used to quickly get one of the link's theme values. This is really just for the rmd-link-theme
mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Number
one of the link's theme values.
Name | Description | Type | Default Value |
---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the link'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-link-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.
String
one of the link'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 |