Skip to main content
react-md
Link - SassDoc

Variables

Number

The transition time for links to change color.

$rmd-link-transition-time: $rmd-transition-standard-time !default;
Color

The default color to use for links.

$rmd-link-color: $rmd-blue-500 !default;
Color

The color to use for links that have been visited.

$rmd-link-visited-color: $rmd-blue-600 !default;
Color

The color to use for links that are being hovered.

$rmd-link-hover-color: $rmd-blue-400 !default;
Number

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;
Map

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;
Map

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;
Map

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;

Mixins

mixin

Creates the styles for one of the link's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-link-theme-values value to.

String
$theme-style

One of the keys of rmd-link-theme-values to extract a value from.

Stringproperty
$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 rmd-link-theme-values map when null.

Color|String|Numbernull
mixin

Updates one of the link's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The link theme style type to update. This should be one of the $rmd-link-theme-values keys.

String
$value

The new value to use.

Color|String|Number
mixin

Creates the styles for links within react-md.

Functions

function

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.

Returns — Color|String|Number

one of the link's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-link-theme-values map keys to get a value for.

String
function

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.

Returns — String

one of the link's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-link-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull