diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 1191b0862d..75ddce6b93 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "38.75 kB" + "maxSize": "38.5 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "36.0 kB" + "maxSize": "35.5 kB" }, { "path": "./dist/js/boosted.bundle.js", @@ -42,7 +42,7 @@ }, { "path": "./dist/js/boosted.esm.js", - "maxSize": "33.25 kB" + "maxSize": "33.0 kB" }, { "path": "./dist/js/boosted.esm.min.js", diff --git a/js/index.esm.js b/js/index.esm.js index 5c59dff5b1..6a00a94ff7 100644 --- a/js/index.esm.js +++ b/js/index.esm.js @@ -14,7 +14,7 @@ export { default as Collapse } from './src/collapse' export { default as Dropdown } from './src/dropdown' export { default as Modal } from './src/modal' export { default as Offcanvas } from './src/offcanvas' -export { default as OrangeNavbar } from './src/orange-navbar' +export { default as OrangeNavbar } from './src/orange-navbar' // Boosted mod export { default as Popover } from './src/popover' export { default as QuantitySelector } from './src/quantity-selector' // Boosted mod export { default as ScrollSpy } from './src/scrollspy' diff --git a/js/index.umd.js b/js/index.umd.js index b26c316b01..4491bb32c0 100644 --- a/js/index.umd.js +++ b/js/index.umd.js @@ -12,7 +12,7 @@ import Collapse from './src/collapse' import Dropdown from './src/dropdown' import Modal from './src/modal' import Offcanvas from './src/offcanvas' -import OrangeNavbar from './src/orange-navbar' +import OrangeNavbar from './src/orange-navbar' // Boosted mod import Popover from './src/popover' import QuantitySelector from './src/quantity-selector' // Boosted mod import ScrollSpy from './src/scrollspy' @@ -29,7 +29,7 @@ export default { Dropdown, Modal, Offcanvas, - OrangeNavbar, + OrangeNavbar, // Boosted mod Popover, QuantitySelector, // Boosted mod ScrollSpy, diff --git a/scss/_accordion.scss b/scss/_accordion.scss index c3ee4bf17e..ec547575cb 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -74,8 +74,12 @@ } &:focus { - z-index: 3; - outline-offset: calc(-1 * var(--#{$prefix}accordion-border-width)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod + // Boosted mod + &[data-focus-visible-added] { + outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width)); + box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); + } + // End mod } } diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss index 90ab11fce5..1363f981e3 100644 --- a/scss/_back-to-top.scss +++ b/scss/_back-to-top.scss @@ -66,8 +66,7 @@ background-color: var(--#{$prefix}back-to-top-title-bg-color); } - &[data-#{$prefix}label]:hover::before, - &[data-#{$prefix}label]:focus::before { + &[data-#{$prefix}label]:hover::before { text-decoration: var(--#{$prefix}back-to-top-title-active-decoration); } } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a8394d9d6e..1e5bfa7ee7 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -39,7 +39,6 @@ cursor: if($enable-button-pointers, pointer, null); user-select: none; border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); - outline-offset: map-get($spacers, 1); // Boosted mod @include border-radius(var(--#{$prefix}btn-border-radius)); @include gradient-bg(var(--#{$prefix}btn-bg)); @include box-shadow(var(--#{$prefix}btn-box-shadow)); @@ -54,25 +53,11 @@ // Boosted mod: no .btn-check + &:hover - &:focus { // Boosted mod: no &:focus-visible to avoid issue in button tags - color: var(--#{$prefix}btn-hover-color); - @include gradient-bg(var(--#{$prefix}btn-hover-bg)); - border-color: var(--#{$prefix}btn-hover-border-color); - // Boosted mod: no outline: 0; - outline-color: var(--#{$prefix}btn-hover-border-color); // Boosted mod - outline-offset: $outline-width; // Boosted mod - &[data-focus-visible-added] { // Boosted mod: added `&[data-focus-visible-added]` - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } - } - } + // Boosted mod: no &:focus-visible to avoid issue in button tags - // Boosted mod: no `.btn-check:focus-visible + &` rule to remove the outline + // Boosted mod: no .btn-check:focus-visible + & + // Boosted mod: custom styles for .btn-check // Boosted mod: simpler rule &:active, &.active, @@ -82,8 +67,8 @@ // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: var(--#{$prefix}btn-active-border-color); - outline-color: var(--#{$prefix}btn-active-border-color); // Boosted mod // Boosted mod: no box shadow modification for the active state + // Boosted mod: no &:focus-visible } &:disabled, @@ -154,7 +139,7 @@ // Boosted mod: no .btn-outline -// Boosted mod: border-only on :hover, :focus and :active +// Boosted mod: border-only on :hover and :active .btn-no-outline { --#{$prefix}btn-hover-border-color: #{$gray-500}; --#{$prefix}btn-active-color: #{$accessible-orange}; @@ -202,18 +187,9 @@ text-decoration: $link-hover-decoration; } - // Boosted mod - &:focus-visible { - &:not(:hover) { - color: var(--#{$prefix}btn-color); - outline-color: var(--#{$prefix}btn-color); - } - - &:hover { - outline-color: var(--#{$prefix}btn-active-color); - } - } + // Boosted mod: no focus-visible color change + // Boosted mod: btn inverse &.btn-inverse { --#{$prefix}btn-disabled-color: #{$gray-700}; } @@ -257,10 +233,6 @@ @include border-radius(50%, 50%); @include button-icon(var(--#{$boosted-prefix}network-logo)); - &:focus { - outline-color: var(--#{$boosted-prefix}network-color, $black); - } - &.btn-inverse { --#{$prefix}btn-color: #{$white}; --#{$prefix}btn-active-color: #{$black}; diff --git a/scss/_carousel.scss b/scss/_carousel.scss index e093127567..ec85466f3d 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -102,12 +102,12 @@ background: none; border: 0; outline: 0; // Boosted mod + box-shadow: none; // Boosted mod opacity: $carousel-control-opacity; @include transition($carousel-control-transition); - // Hover/focus state - &:hover, - &:focus { + // Hover state - Boosted mod: no focus state + &:hover { --#{$boosted-prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod color: color-contrast($carousel-control-color); text-decoration: none; @@ -126,16 +126,15 @@ color: $carousel-control-color; } + // scss-docs-start focus-visible-carousel &:focus { &[data-focus-visible-added] { - // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector - & > span { - outline: map-get($border-widths, 3) solid $brand-orange; - outline-offset: $outline-offset; - box-shadow: 0 0 0 $outline-offset $white; + > span { + @include focus-visible(); } } } + // scss-docs-end focus-visible-carousel // End mod } @@ -228,9 +227,6 @@ &:focus { &[data-focus-visible-added] { - outline: map-get($border-widths, 3) solid $brand-orange; - outline-offset: $outline-offset; - box-shadow: 0 0 0 $outline-offset $white; transform: none; } } diff --git a/scss/_close.scss b/scss/_close.scss index 8e55326031..7cf7dfda4b 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -20,7 +20,6 @@ color: var(--#{$prefix}btn-close-color); // Boosted mod background-color: var(--#{$prefix}btn-close-bg); // Boosted mod border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-border-color); // Boosted mod - outline-offset: map-get($spacers, 2); // Boosted mod @include border-radius(); @include button-icon($btn-close-bg, $btn-close-width, $btn-close-height, $btn-close-icon-size); // Boosted mod: using mask instead of background @@ -32,20 +31,10 @@ // Boosted mod: matching .btn-no-outline &:hover, - &:focus, &:active { border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-active-border-color); } - &:focus { - outline-offset: $outline-width; - @include transition($transition-focus); - - &[data-focus-visible-added] { - box-shadow: $btn-close-focus-shadow; - } - } - &:active { color: var(--#{$prefix}btn-close-active-color); } @@ -56,6 +45,7 @@ color: var(--#{$prefix}btn-close-disabled-color); // Boosted mod pointer-events: none; user-select: none; + // Boosted mod: no opacity } } @@ -70,11 +60,5 @@ --#{$prefix}btn-close-active-border-color: #{$btn-close-white-active-border-color}; // Boosted mod --#{$prefix}btn-close-disabled-color: #{$btn-close-white-disabled-color}; // Boosted mod // scss-docs-end btn-close-white-css-vars - - &:focus { - &[data-focus-visible-added] { - box-shadow: 0 0 0 $btn-focus-width $black; - } - } } // End mod diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index e10d94127c..6138546ed7 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -194,11 +194,10 @@ background-color: transparent; // For `', ' ', diff --git a/site/assets/scss/_anchor.scss b/site/assets/scss/_anchor.scss index 2955dec8ec..4263643b3b 100644 --- a/site/assets/scss/_anchor.scss +++ b/site/assets/scss/_anchor.scss @@ -18,10 +18,4 @@ text-decoration: none; opacity: 1; } - - // Boosted mod - &:focus { - outline-offset: 0; - } - // End mod } diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index bac85f531e..91f09b040c 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -31,9 +31,7 @@ color: $primary; } - &:focus { - z-index: 3; - } + // Boosted mod: no focus rule // Boosted mod .bi { diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 80029fc9d3..b2b739ba68 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -10,8 +10,7 @@ .nav-link { // Boosted mod: Needed since the dropdowns define their own color (could be removed once they are tackled) // Boosted mod: no display, no padding, no color - &:hover, - &:focus { + &:hover { color: var(--#{$prefix}link-hover-color); // Boosted mod } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index cb8eceef9b..f607ca3b43 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -40,9 +40,9 @@ &:focus { border-radius: 0; // stylelint-disable-line property-disallowed-list - outline: var(--#{$prefix}link-hover-color) solid $outline-width; - outline-offset: .375rem; // replace when focus will be active - box-shadow: unset; + &[data-focus-visible-added] { + @include focus-visible(); + } } .DocSearch-Search-Icon { @@ -75,13 +75,16 @@ .DocSearch-Input:focus { outline: 0; + box-shadow: none; } .DocSearch-Reset { @include border-radius(0, 0); &:focus { - outline: 3px solid $accessible-orange; + &[data-focus-visible-added] { + @include focus-visible(); + } } } @@ -135,13 +138,9 @@ .DocSearch-Hit-action-button { @include border-radius(0, 0); - &:hover { - background: transparent; - } - + &:hover, &:focus { background: transparent; - outline: 3px solid $accessible-orange; } } @@ -155,7 +154,9 @@ } &:focus { - outline: 3px solid $accessible-orange; + &[data-focus-visible-added] { + @include focus-visible(); + } } } // End mod diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md index eb2ec52b2a..180f9cec49 100644 --- a/site/content/docs/5.2/forms/checks-radios.md +++ b/site/content/docs/5.2/forms/checks-radios.md @@ -328,21 +328,21 @@ Drop borders using `.btn-no-outline`, too. {{< example >}}
- + - + - +