diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml index a8994b6cc3..10d6da3305 100644 --- a/.github/workflows/js.yml +++ b/.github/workflows/js.yml @@ -45,7 +45,7 @@ jobs: run: npm run js-test - name: Run Coveralls - uses: coverallsapp/github-action@1.1.3 + uses: coverallsapp/github-action@v1.2.2 with: github-token: "${{ secrets.GITHUB_TOKEN }}" path-to-lcov: "./js/coverage/lcov.info" diff --git a/scss/_buttons.scss b/scss/_buttons.scss index bb1ae3d840..cbc0784a4d 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -10,7 +10,7 @@ @include rfs($btn-font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; - --#{$prefix}btn-color: #{$body-color}; + --#{$prefix}btn-color: #{$btn-color}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index a360d2a059..76ac085c10 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -100,9 +100,11 @@ margin-bottom: 0; list-style: none; - .show > .nav-link, - .nav-link.active { - color: var(--#{$prefix}navbar-active-color); + .nav-link { + &.active, + &.show { + color: var(--#{$prefix}navbar-active-color); + } } .dropdown-menu { diff --git a/scss/_variables.scss b/scss/_variables.scss index c20af01c51..315b2bb779 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. @@ -801,6 +810,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default; // For each of Bootstrap's buttons, define text, background, and border color. // scss-docs-start btn-variables +$btn-color: var(--#{$prefix}body-color) !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 501184e78f..3f8bcb335c 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); } } } diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index 77a69ff034..1a6a5cc00d 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -214,7 +214,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | | `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `''` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. | -| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | +| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to. | | `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | {{< /bs-table >}} diff --git a/site/content/docs/5.3/examples/headers/headers.css b/site/content/docs/5.3/examples/headers/headers.css index 8230c9a5f5..f887573feb 100644 --- a/site/content/docs/5.3/examples/headers/headers.css +++ b/site/content/docs/5.3/examples/headers/headers.css @@ -10,6 +10,6 @@ font-size: 85%; } -.dropdown-toggle { +.dropdown-toggle:not(:focus) { outline: 0; } diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index ac36dcb3f0..18bef9ae49 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -45,6 +45,14 @@ Add `.icon-link-hover` to move the icon to the right on hover. {{< /example >}} +## Customize + +Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. + Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: {{< example >}} @@ -54,7 +62,22 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS {{< /example >}} -## Pairs with link utilities +Customize the color by overriding the `--bs-link-*` CSS variable: + +{{< example >}} + + Icon link + + +{{< /example >}} + +### Sass + +Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. + +{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} + +### Utilities Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index e13391e148..3cf60aaf28 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -214,9 +214,9 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu ### Utilities -- Deprecated `.text-body-secondary` will be be replaced by `.text-body-secondary` in v6. +- Deprecated `.text-muted` will be be replaced by `.text-body-secondary` in v6. - With the addition of the expanded theme colors and variables, the `.text-body-secondary` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. + With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. - Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `` or `