diff options
| author | Louis-Maxime Piton <[email protected]> | 2023-03-02 19:32:43 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-03-02 10:32:43 -0800 |
| commit | 783213691a5b90d4902fd6d35dd498a0e121eec8 (patch) | |
| tree | c5c75cc4313e40b77c236b5295321b9600ffd092 /scss | |
| parent | 912cfe5823cea6f3ce133898a315f1a7611537f6 (diff) | |
| download | bootstrap-783213691a5b90d4902fd6d35dd498a0e121eec8.tar.xz bootstrap-783213691a5b90d4902fd6d35dd498a0e121eec8.zip | |
Icon link: envariable + enhance the documentation (#38130)
* Envariable the icon-link helper
* Proposal
* .
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 9 | ||||
| -rw-r--r-- | scss/helpers/_icon-link.scss | 13 |
2 files changed, 16 insertions, 6 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index c20af01c5..ec2ff3750 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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. diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 501184e78..3f8bcb335 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -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); } } } |