mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki 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
3 changed files with 40 additions and 7 deletions
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);
}
}
}