mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 16:19:53 +02:00
Code Issues Releases Wiki Activity

Add new link utilities, icon link helper, and update colored link helpers (#37762)

Browse Source 
* Add new link utilities, update colored link helpers

* Remove commented out code

* Fixes

* Remove examples changes

* Fixes and copy

* Fix icon-link instances on homepage

* Bump bundlewatch

* Fix node-sass issue for rgba() function bug

* More bundlewatch

* One more time after merge

* Add callout for a11y

* Hover and focus-visible

* Add a11y callouts

* Remove duplicate for now

* More code review feedback
This commit is contained in:
Mark Otto
2023-01-03 22:23:46 -08:00
committed by GitHub
parent 89f9ffc212
commit d70b5db2e0
21 changed files with 305 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scss/helpers/_colored-links.scss
View File

@@ -1,11 +1,17 @@
// stylelint-disable function-name-case
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.link-#{$color} {
color: $value if($enable-important-utilities, !important, null);
--#{$prefix}link-color-rgb: #{to-rgb($value)};
text-decoration-color: RGBA(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
--#{$prefix}link-color-rgb: #{to-rgb($hover-color)};
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
}
}
}

24
scss/helpers/_icon-link.scss Normal file
View File

@@ -0,0 +1,24 @@
.icon-link {
display: inline-flex;
gap: .375rem;
align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
text-underline-offset: .5rem;
backface-visibility: hidden;
> .bi {
flex-shrink: 0;
width: 1em;
height: 1em;
@include transition(.2s ease-in-out transform);
}
}
.icon-link-hover {
&:hover,
&:focus-visible {
> .bi {
transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
}
}
}