Links
The link base component provides a set of base-styles and classes to style links consistently across your application. It includes various states and modifiers to handle different link types and interactions.
Base element
The base <a> element is styled by default with no need for classes.
Variants
By default, there are no variants available for links.
If you are compiling your own version of Graupl, you can set the $themeable variable to true to enable variants.
States
Links handle the following states by default: visited, focus, hover, active, disabled, selected, and current (though not all will have visual differences out-of-the-box).
You can manually apply these states with the helper classes .visited, .focus, .hover, .active and .disabled, respectively.
Custom Properties
The following custom properties can be used to customize the link element:
| Property | Description | Default Value |
|---|---|---|
--graupl-link-text-decoration | The text decoration for the link component. | underline |
--graupl-link-visited-text-decoration | The text decoration for a visited link component. | var(--graupl-link-text-decoration) |
--graupl-link-focus-text-decoration | The text decoration for a focused link component. | var(--graupl-link-text-decoration) |
--graupl-link-hover-text-decoration | The text decoration for a hovered link component. | underline |
--graupl-link-active-text-decoration | The text decoration for an active link component. | var(--graupl-link-hover-text-decoration) |
--graupl-link-disabled-text-decoration | The text decoration for a disabled link component. | underline |
--graupl-link-text-decoration-thickness | The text decoration thickness for the link component. | var(--graupl-border-width) |
--graupl-link-visited-text-decoration-thickness | The text decoration thickness for a visited link component. | var(--graupl-link-text-decoration-thickness) |
--graupl-link-focus-text-decoration-thickness | The text decoration thickness for a focused link component. | var(--graupl-link-text-decoration-thickness) |
--graupl-link-hover-text-decoration-thickness | The text decoration thickness for a hovered link component. | var(--graupl-border-width) |
--graupl-link-active-text-decoration-thickness | The text decoration thickness for an active link component. | var(--graupl-link-hover-text-decoration-thickness) |
--graupl-link-disabled-text-decoration-thickness | The text decoration thickness for a disabled link component. | var(--graupl-border-width) |
--graupl-link-text-decoration-style | The text decoration style for the link component. | solid |
--graupl-link-visited-text-decoration-style | The text decoration style for a visited link component. | var(--graupl-link-text-decoration-style) |
--graupl-link-focus-text-decoration-style | The text decoration style for a focused link component. | var(--graupl-link-text-decoration-style) |
--graupl-link-hover-text-decoration-style | The text decoration style for a hovered link component. | solid |
--graupl-link-active-text-decoration-style | The text decoration style for an active link component. | var(--graupl-link-hover-text-decoration-style) |
--graupl-link-disabled-text-decoration-style | The text decoration style for a disabled link component. | solid |
--graupl-link-color | The color for the link component. | var(--graupl-theme-active--primary--700) |
--graupl-link-visited-color | The color for a visited link component. | var(--graupl-link-color) |
--graupl-link-focus-color | The color for a focused link component. | var(--graupl-link-color) |
--graupl-link-hover-color | The color for a hovered link component. | var(--graupl-theme-active--tertiary--700) |
--graupl-link-active-color | The color for an active link component. | var(--graupl-link-hover-color) |
--graupl-link-disabled-color | The color for a disabled link component. | var(--graupl-theme-active--primary--200) |
--graupl-link-text-decoration-color | The text decoration color for the link component. | var(--graupl-link-color) |
--graupl-link-visited-text-decoration-color | The text decoration color for a visited link component. | var(--graupl-link-visited-color) |
--graupl-link-focus-text-decoration-color | The text decoration color for a focused link component. | var(--graupl-link-focus-color) |
--graupl-link-hover-text-decoration-color | The text decoration color for a hovered link component. | var(--graupl-link-hover-color) |
--graupl-link-active-text-decoration-color | The text decoration color for an active link component. | var(--graupl-link-active-color) |
--graupl-link-disabled-text-decoration-color | The text decoration color for a disabled link component. | var(--graupl-link-disabled-color) |
--graupl-link-background | The background color for the link component. | transparent |
--graupl-link-visited-background | The background color for a visited link component. | var(--graupl-link-background) |
--graupl-link-focus-background | The background color for a focused link component. | var(--graupl-link-background) |
--graupl-link-hover-background | The background color for a hovered link component. | transparent |
--graupl-link-active-background | The background color for an active link component. | var(--graupl-link-hover-background) |
--graupl-link-disabled-background | The background color for a disabled link component. | transparent |
--graupl-link-padding-x | The horizontal padding for the link component. | var(--graupl-spacer-0) |
--graupl-link-padding-y | The vertical padding for the link component. | var(--graupl-spacer-0) |
--graupl-link-padding | The padding for the link component (combines x and y padding). | var(--graupl-link-padding-y) var(--graupl-link-padding-x) |
--graupl-link-transition | The transition for the link component. | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
--graupl-link-transition-reduced-motion | The transition for the link component when reduced motion is enabled. | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |
--graupl-link-transform | The transform for the link component. | none |
--graupl-link-visited-transform | The transform for a visited link component. | var(--graupl-link-transform) |
--graupl-link-focus-transform | The transform for a focused link component. | var(--graupl-link-transform) |
--graupl-link-hover-transform | The transform for a hovered link component. | none |
--graupl-link-active-transform | The transform for an active link component. | var(--graupl-link-hover-transform) |
--graupl-link-disabled-transform | The transform for a disabled link component. | none |
--graupl-link-border-top-width | The top border width for the link component. | 0 |
--graupl-link-border-right-width | The right border width for the link component. | 0 |
--graupl-link-border-bottom-width | The bottom border width for the link component. | 0 |
--graupl-link-border-left-width | The left border width for the link component. | 0 |
--graupl-link-border-width | The border width for the link component (combines top, right, bottom, and left widths). | var(--graupl-link-border-top-width) var(--graupl-link-border-right-width) var(--graupl-link-border-bottom-width) var(--graupl-link-border-left-width) |
--graupl-link-border-top-style | The top border style for the link component. | var(--graupl-border-top-style) |
--graupl-link-border-right-style | The right border style for the link component. | var(--graupl-border-right-style) |
--graupl-link-border-bottom-style | The bottom border style for the link component. | var(--graupl-border-bottom-style) |
--graupl-link-border-left-style | The left border style for the link component. | var(--graupl-border-left-style) |
--graupl-link-border-style | The border style for the link component (combines top, right, bottom, and left styles). | var(--graupl-link-border-top-style) var(--graupl-link-border-right-style) var(--graupl-link-border-bottom-style) var(--graupl-link-border-left-style) |
--graupl-link-border-top-left-radius | The top left border radius for the link component. | var(--graupl-border-top-left-radius) |
--graupl-link-border-top-right-radius | The top right border radius for the link component. | var(--graupl-border-top-right-radius) |
--graupl-link-border-bottom-right-radius | The bottom right border radius for the link component. | var(--graupl-border-bottom-right-radius) |
--graupl-link-border-bottom-left-radius | The bottom left border radius for the link component. | var(--graupl-border-bottom-left-radius) |
--graupl-link-border-radius | The border radius for the link component (combines top-left, top-right, bottom-right, and bottom-left radii). | var(--graupl-link-border-top-left-radius) var(--graupl-link-border-top-right-radius) var(--graupl-link-border-bottom-right-radius) var(--graupl-link-border-bottom-left-radius) |
--graupl-link-border-color | The border color for the link component. | transparent |
--graupl-link-visited-border-color | The border color for a visited link component. | var(--graupl-link-border-color) |
--graupl-link-focus-border-color | The border color for a focused link component. | var(--graupl-link-border-color) |
--graupl-link-hover-border-color | The border color for a hovered link component. | transparent |
--graupl-link-active-border-color | The border color for an active link component. | var(--graupl-link-hover-border-color) |
--graupl-link-disabled-border-color | The border color for a disabled link component. | transparent |
--graupl-link-min-width | The minimum width for the link component. | auto |
--graupl-link-min-height | The minimum height for the link component. | auto |
--graupl-stretched-link-z-index | The z-index for the stretched link component modifier. | 5 |
Sass variables
The following Sass variables can be used to customize the generation of the link component:
| Variable | Description | Default Value |
|---|---|---|
$selector-base | The selector base for the component. | "" |
$modifier-selector-base | The selector base for component modifiers. | "." |
$generate-base-theme-map | Flag to generate the base theme maps for link variants. | true |
$themeable | Flag to generate theme modifiers. | false |
$link-selector-base | The base selector for the link component. | "" |
$link-selector | The selector for the link component. | "a" |
$link-theme-prefix-selector-base | Selector base used for link theme modifiers. | "." |
$link-theme-prefix-selector | Selector prefix used for link theme modifiers. | "" |
$stretched-link-selector-base | The base selector for the stretched link component modifier. | "." |
$stretched-link-selector | The selector for the stretched link component modifier. | "stretched" |
$stretched-link-pseudo-selector | The pseudo selector for the stretched link component modifier. | "before" |
$link-initial-text-decoration | The initial text decoration for the link component. | underline |
$link-final-text-decoration | The final text decoration for the link component. | underline |
$link-disabled-text-decoration | The disabled text decoration for the link component. | underline |
$link-initial-text-decoration-style | The initial text decoration style for the link component. | solid |
$link-final-text-decoration-style | The final text decoration style for the link component. | solid |
$link-disabled-text-decoration-style | The disabled text decoration style for the link component. | solid |
$link-initial-transform | The initial transform for the link component. | none |
$link-final-transform | The final transform for the link component. | none |
$link-disabled-transform | The disabled transform for the link component. | none |
$link-border-width | The border width for the link component. | 0 |
$link-min-width | The minimum width for the link component. | auto |
$link-min-height | The minimum height for the link component. | auto |
$stretched-link-z-index | The z-index for the stretched link component modifier. | 5 |
$link-theme-mappings | Map of properties and shade values applied to themed links. | map.merge($-link-theme-mappings, $link-theme-mappings) |
$link-theme-map | Fully expanded property map used to generate themed links. | map.deep-merge($-link-theme-map, $link-theme-map) |