1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00

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

* 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

View File

@@ -4,16 +4,6 @@
border-radius: .75rem;
}
.icon-link > .bi {
margin-top: .125rem;
margin-left: .125rem;
fill: currentcolor;
transition: transform .25s ease-in-out;
}
.icon-link:hover > .bi {
transform: translate(.25rem);
}
.icon-square {
width: 3rem;
height: 3rem;

View File

@@ -76,9 +76,9 @@ body_class: ""
</div>
<h3 class="fs-2">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link d-inline-flex align-items-center">
<a href="#" class="icon-link">
Call to action
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
@@ -87,9 +87,9 @@ body_class: ""
</div>
<h3 class="fs-2">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link d-inline-flex align-items-center">
<a href="#" class="icon-link">
Call to action
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
@@ -98,9 +98,9 @@ body_class: ""
</div>
<h3 class="fs-2">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link d-inline-flex align-items-center">
<a href="#" class="icon-link">
Call to action
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div>