diff --git a/resources/sass/fo/utilities/_bootstrap-custom.scss b/resources/sass/fo/utilities/_bootstrap-custom.scss index fa611ec..d01e158 100644 --- a/resources/sass/fo/utilities/_bootstrap-custom.scss +++ b/resources/sass/fo/utilities/_bootstrap-custom.scss @@ -1,5 +1,6 @@ @use "sass:list"; @import "mixins"; +@import "./bs-polyfills/buttons"; // SET SOME CLASSES WITH BOOTSTRAP BREAKPOINTS // * Reponsive borders diff --git a/resources/sass/fo/utilities/bs-polyfills/_buttons.scss b/resources/sass/fo/utilities/bs-polyfills/_buttons.scss new file mode 100644 index 0000000..18c7f96 --- /dev/null +++ b/resources/sass/fo/utilities/bs-polyfills/_buttons.scss @@ -0,0 +1,57 @@ +// Fixes https://trungvose.com/experience/focus-and-focus-visible/ +.btn { + &:focus-visible,&:focus:not(:focus-visible) { + border-color: var(--#{$prefix}btn-hover-border-color); + color: var(--#{$prefix}btn-hover-color); + outline: 0; + + @include gradient-bg(var(--#{$prefix}btn-hover-bg)); + // 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); + } + } + + .btn-check:focus-visible + &,, .btn-check:focus:not(:focus-visible) + & { + border-color: var(--#{$prefix}btn-hover-border-color); + outline: 0; + // 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); + } + } + + /* stylelint-disable-next-line no-descending-specificity */ + .btn-check:checked + &, + :not(.btn-check) + &:active, + &:first-child:active, + &.active, + &.show { + &:focus-visible,&:focus:not(:focus-visible) { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + } +} + +// Make a button look and behave like a link +.btn-link { + &:hover, + &:focus-visible, + &:focus:not(:focus-visible) { + text-decoration: $link-hover-decoration; + } + + /* stylelint-disable-next-line no-descending-specificity */ + &:focus-visible, &:focus:not(:focus-visible) { + color: var(--#{$prefix}btn-color); + } +} diff --git a/resources/views/fo/layouts/main-menu-toggle.blade.php b/resources/views/fo/layouts/main-menu-toggle.blade.php index f4a7d97..bd1e2cf 100644 --- a/resources/views/fo/layouts/main-menu-toggle.blade.php +++ b/resources/views/fo/layouts/main-menu-toggle.blade.php @@ -2,6 +2,6 @@ - + diff --git a/resources/views/fo/layouts/nav-menu.blade.php b/resources/views/fo/layouts/nav-menu.blade.php index 693f448..c4b18a8 100644 --- a/resources/views/fo/layouts/nav-menu.blade.php +++ b/resources/views/fo/layouts/nav-menu.blade.php @@ -1,4 +1,5 @@ -