Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icon link: envariable + enhance the documentation #38130

Merged
merged 3 commits into from Mar 2, 2023
Merged

Icon link: envariable + enhance the documentation #38130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58f167a
Envariable the icon-link helper
louismaximepiton Feb 28, 2023
3740c19
Proposal
louismaximepiton Feb 28, 2023
b65650f
.
louismaximepiton Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions scss/_variables.scss
View file
Open in desktop
Expand Up @@ -459,6 +459,15 @@ $link-hover-decoration: null !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

// Paragraphs
//
// Style p element.
Expand Down
13 changes: 7 additions & 6 deletions scss/helpers/_icon-link.scss
View file
Open in desktop
@@ -1,24 +1,25 @@
.icon-link {
display: inline-flex;
gap: .375rem;
gap: $icon-link-gap;
align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
text-underline-offset: .25em;
text-underline-offset: $icon-link-underline-offset;
backface-visibility: hidden;

> .bi {
flex-shrink: 0;
width: 1em;
height: 1em;
@include transition(.2s ease-in-out transform);
width: $icon-link-icon-size;
height: $icon-link-icon-size;
fill: currentcolor;
@include transition($icon-link-icon-transition);
}
}

.icon-link-hover {
&:hover,
&:focus-visible {
> .bi {
transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
}
}
}
25 changes: 24 additions & 1 deletion site/content/docs/5.3/helpers/icon-link.md
View file
Open in desktop
Expand Up @@ -45,6 +45,14 @@ Add `.icon-link-hover` to move the icon to the right on hover.
</a>
{{< /example >}}

## Customize

Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.

### 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:

{{< example >}}
Expand All @@ -54,7 +62,22 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
</a>
{{< /example >}}

## Pairs with link utilities
Customize the color by overriding the `--bs-link-*` CSS variable:

{{< example >}}
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
{{< /example >}}

### Sass

Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.

{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}

### Utilities

Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.

Expand Down