Link Sass API

Variables

link-disable-everything

$link-disable-everything: false !default;

link-disable-skip-to-main

$link-disable-skip-to-main: false !default;

Used By

• @mixin link-styles

link-disable-flex

$link-disable-flex: false !default;

Used By

• @mixin link-styles

link-transition-duration

$link-transition-duration: transition.$linear-duration !default;

Used By

• @mixin link-styles
• @mixin overlay-styles
• @mixin slider-styles
• @mixin tabs-indicator-styles
• @mixin tabs-tab-styles

link-color

$link-color: colors.$blue-500 !default;

link-visited-color

$link-visited-color: colors.$blue-600 !default;

Used By

• @mixin link-variables

link-hover-color

$link-hover-color: colors.$blue-400 !default;

Used By

• @mixin link-variables

link-skip-to-main-z-index

$link-skip-to-main-z-index: 10000 !default;

link-skip-to-main-styles

$link-skip-to-main-styles: (
  color: theme.theme-get-var(on-primary-color),
  left: 50%,
  padding: spacing.get-var(xs) spacing.get-var(md),
  top: spacing.get-var(xs),
  transform: translateX(-50%),
  z-index: $skip-to-main-z-index,
) !default;

Used By

• @mixin link-styles

link-skip-to-main-active-styles

$link-skip-to-main-active-styles: (
  outline: 0.25rem dashed currentcolor,
) !default;

See Also

• $link-skip-to-main-styles

Used By

• @mixin link-styles

link-variables

$link-variables: (color, visited-color, hover-color);

Mixins

link-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

link-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

link-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $divider-light-theme-color

link-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $divider-dark-theme-color

link-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $avatar-color
• $link-visited-color
• $link-hover-color

link-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• $app-bar-disable-everything
• $link-transition-duration
• $disable-focus-visible
• $link-disable-flex
• $link-disable-skip-to-main
• $headline-6-styles
• $link-skip-to-main-styles
• $link-skip-to-main-active-styles

Functions

link-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true to disable the SkipToMainContent component styles.

Set to true to disable the display: inline-flex styles for the link.

The transition duration for changing the link's color while hovered or visited.

The link's default text color

The link's default visited text color

The link's default hover text color

The z-index for the SkipToMainContent component.

A custom map of styles to apply to the SkipToMainContent component.

A custom map of styles to apply to the SkipToMainContent component while it is focused. This will be applied on top of the $skip-to-main-styles.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value