rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Icon link: envariable + enhance the documentation (#38130)

Browse Source 
* Envariable the icon-link helper

* Proposal

* .
This commit is contained in:
Louis-Maxime Piton 2023-03-02 19:32:43 +01:00 committed by GitHub
parent 912cfe5823
commit 783213691a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_variables.scss
View File

@ -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.

13
scss/helpers/_icon-link.scss
View File

@ -1,16 +1,17 @@
.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);
}
}
@ -18,7 +19,7 @@
&: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
site/content/docs/5.3/helpers/icon-link.md
View File

@ -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 >}}
@ -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.