diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 8c390c6e0e27fec49ff87933698783a6431aa4fa..a14a0a15a71fca2dc71106f2c2705dbf61ef0ffa 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "29.5 kB" + "maxSize": "29.75 kB" }, { "path": "./dist/css/bootstrap.min.css", diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 8ac790399feed879ab78bd2515347c1191a9eba7..6a3bc62dd0b458252963b3737be221718e972a3c 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -133,15 +133,23 @@ p { // Abbreviations -// -// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari. -// 2. Add explicit cursor to indicate changed behavior. -// 3. Prevent the text-decoration to be skipped. - -abbr[title] { - text-decoration: underline dotted; // 1 - cursor: help; // 2 - text-decoration-skip-ink: none; // 3 + +@media (hover: none) { + abbr[title] { + text-decoration: none; + } +} + +@media (hover: hover) { + // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari. + // 2. Add explicit cursor to indicate changed behavior. + // 3. Prevent the text-decoration to be skipped. + + abbr[title] { + text-decoration: underline dotted; // 1 + cursor: help; // 2 + text-decoration-skip-ink: none; // 3 + } } diff --git a/site/content/docs/5.2/content/typography.md b/site/content/docs/5.2/content/typography.md index 7330132810ef2154e2131a7895591f34e4cc6a3e..deb37644a444685fa646718b6a3ad6c3b11375f1 100644 --- a/site/content/docs/5.2/content/typography.md +++ b/site/content/docs/5.2/content/typography.md @@ -141,6 +141,10 @@ Change text alignment, transform, style, weight, line-height, decoration and col Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. +{{< callout info >}} +This stylized implementation will only be rendered if the primary input mechanism can conveniently hover over elements. +{{< /callout >}} + Add `.initialism` to an abbreviation for a slightly smaller font-size. {{< example >}}