diff --git a/scss/_config.scss b/scss/_config.scss index 7625e71e33af..204483201fda 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -178,18 +178,6 @@ $position-values: ( $link-decoration: underline !default; $link-underline-offset: .2em !default; -$stretched-link-pseudo-element: after !default; -$stretched-link-z-index: 1 !default; - -// Icon links -// scss-docs-start icon-link-variables -$icon-link-gap: .375rem !default; -$icon-link-underline-offset: .25em !default; -$icon-link-icon-size: 1em !default; -$icon-link-icon-transition: .2s ease-in-out transform !default; -$icon-link-icon-transform: translate3d(.25em, 0, 0) !default; -// scss-docs-end icon-link-variables - // Components // // Define common padding and border radius sizes and more. diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 23f0ad718f9f..96bb3c2d24ad 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -1,21 +1,40 @@ -@use "../config" as *; +@use "../functions" as *; +@use "../mixins/tokens" as *; @use "../mixins/transition" as *; +$icon-link-tokens: () !default; + +// scss-docs-start icon-link-tokens +// stylelint-disable-next-line scss/dollar-variable-default +$icon-link-tokens: defaults( + ( + --icon-link-gap: .375rem, + --icon-link-underline-offset: .25em, + --icon-link-icon-size: 1em, + --icon-link-icon-transition: .2s ease-in-out transform, + --icon-link-icon-transform: translate3d(.25em, 0, 0), + ), + $icon-link-tokens +); +// scss-docs-end icon-link-tokens + @layer helpers { .icon-link { + @include tokens($icon-link-tokens); + display: inline-flex; - gap: $icon-link-gap; + gap: var(--icon-link-gap); align-items: center; - text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, .5)); - text-underline-offset: $icon-link-underline-offset; + text-decoration-color: color-mix(in oklch, var(--link-color) 50%, transparent); + text-underline-offset: var(--icon-link-underline-offset); backface-visibility: hidden; > .bi { flex-shrink: 0; - width: $icon-link-icon-size; - height: $icon-link-icon-size; + width: var(--icon-link-icon-size); + height: var(--icon-link-icon-size); fill: currentcolor; - @include transition($icon-link-icon-transition); + @include transition(var(--icon-link-icon-transition)); } } @@ -23,7 +42,7 @@ &:hover, &:focus-visible { > .bi { - transform: var(--icon-link-transform, $icon-link-icon-transform); + transform: var(--icon-link-transform, var(--icon-link-icon-transform)); } } } diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss index c3a319b636fc..f0bf5bc17f1b 100644 --- a/scss/helpers/_stretched-link.scss +++ b/scss/helpers/_stretched-link.scss @@ -1,11 +1,30 @@ -@use "../config" as *; +@use "../functions" as *; +@use "../mixins/tokens" as *; + +// scss-docs-start stretched-link-pseudo-element +$stretched-link-pseudo-element: after !default; +// scss-docs-end stretched-link-pseudo-element + +$stretched-link-tokens: () !default; + +// scss-docs-start stretched-link-tokens +// stylelint-disable-next-line scss/dollar-variable-default +$stretched-link-tokens: defaults( + ( + --stretched-link-z-index: 1, + ), + $stretched-link-tokens +); +// scss-docs-end stretched-link-tokens @layer helpers { .stretched-link { + @include tokens($stretched-link-tokens); + &::#{$stretched-link-pseudo-element} { position: absolute; inset: 0; - z-index: $stretched-link-z-index; + z-index: var(--stretched-link-z-index); content: ""; } } diff --git a/site/src/content/docs/helpers/icon-link.mdx b/site/src/content/docs/helpers/icon-link.mdx index 17e40e0d632b..95bdf62439fb 100644 --- a/site/src/content/docs/helpers/icon-link.mdx +++ b/site/src/content/docs/helpers/icon-link.mdx @@ -41,13 +41,13 @@ Add `.icon-link-hover` to move the icon to the right on hover. `} /> -## Customize +## CSS -Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. +### Variables -### CSS variables + -Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. + Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: @@ -59,21 +59,15 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS Icon link `} /> -Customize the color by overriding the `--bs-link-*` CSS variable: +The icon link’s underline color is derived from `--bs-link-color`, so overriding it updates both the text and the underline together: - + Icon link `} /> -### Sass variables - -Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. - - - ### Sass utilities API Modify icon links with any of [our link utilities]([[docsref:/utilities/link/]]) for modifying underline color and offset. diff --git a/site/src/content/docs/helpers/stretched-link.mdx b/site/src/content/docs/helpers/stretched-link.mdx index fdb9894b742f..ff3b9ad71bf7 100644 --- a/site/src/content/docs/helpers/stretched-link.mdx +++ b/site/src/content/docs/helpers/stretched-link.mdx @@ -1,6 +1,7 @@ --- title: Stretched link description: Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS. +toc: true --- Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements. @@ -62,3 +63,17 @@ If the stretched link doesn’t seem to work, the [containing block](https://dev

`} /> + +## CSS + +### Variables + + + + + +### Sass variable + +The pseudo-element used to stretch the link defaults to `after` and can be changed via the `$stretched-link-pseudo-element` Sass variable. This can’t be a CSS variable since it’s compiled directly into the generated selector. + +