L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-84618 theme_boost: Fix buttons .btn hover styles

Browse Source
This commit is contained in:
Mikel Martín
2025-03-05 09:54:10 +01:00
parent 5670447ece
commit bba4b46a3b
4 changed files with 299 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/templates/search_input_navbar.mustache
+1 -1
View File
@@ -68,7 +68,7 @@
</form>
</div>
<a
class="btn btn-open rounded-0 nav-link"
class="rounded-0 nav-link icon-no-margin"
data-bs-toggle="collapse"
data-action="opensearch"
href="#searchform-navbar"
theme/boost/scss/moodle/buttons.scss
+58 -38
View File
@@ -1,3 +1,8 @@
/**
* File buttons.scss.
* Contains styles for buttons.
*/
.singlebutton {
display: inline-block;
@@ -38,47 +43,28 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
.btn.btn-icon {
height: ($icon-height + 20px);
width: ($icon-width + 16px);
font-size: $icon-height;
line-height: $icon-height;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
&:hover,
&:focus {
background-color: $gray-200;
}
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
font-size: $length !important; /* stylelint-disable-line declaration-no-important */
line-height: $length !important; /* stylelint-disable-line declaration-no-important */
}
}
/* Small buttons should have the same border-radius as the normal buttons. */
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--#{$prefix}border-radius);
}
// Specific styles for the collapse/expand buttons.
.btn.btn-icon.icons-collapse-expand {
color: $primary;
background-color: $primary-light-background;
&:hover {
outline: 2px solid $primary;
}
}
/**
* Focus styles to improve Bootstrap default contrast.
*/
@mixin button-focus($background, $innershadow) {
&:focus,
&:focus-visible,
&.focus {
outline: $btn-focus-width solid darken($background, 40%);
box-shadow: inset 0 0 0 2px $innershadow;
}
}
.btn {
@include button-focus($secondary, $white);
}
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-focus($value, $white);
@@ -91,15 +77,49 @@ p.arrow_button {
}
}
// Small buttons should have the same border-radius as the normal buttons.
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--#{$prefix}border-radius);
/**
* Icon buttons.
*/
.btn.btn-icon {
height: ($icon-height + 20px);
width: ($icon-width + 16px);
font-size: $icon-height;
line-height: $icon-height;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
&:hover,
&:focus {
background-color: $gray-200;
}
@include button-focus($secondary, $white);
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
font-size: $length !important; /* stylelint-disable-line declaration-no-important */
line-height: $length !important; /* stylelint-disable-line declaration-no-important */
}
}
}
//
// Subtle buttons.
//
/* Specific styles for the collapse/expand buttons. */
.btn.btn-icon.icons-collapse-expand {
color: $primary;
background-color: $primary-light-background;
&:hover {
outline: 2px solid $primary;
}
@include button-focus($primary-bg-subtle, $white);
}
/**
* Subtle buttons.
*/
@each $color, $value in $theme-colors {
.btn-subtle-#{$color} {
theme/boost/style/moodle.css
+120 -92
View File
@@ -37151,6 +37151,10 @@ table .sticky-column {
font-size: 3rem;
}
/**
* File buttons.scss.
* Contains styles for buttons.
*/
.singlebutton {
display: inline-block;
}
@@ -37186,6 +37190,103 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
/* Small buttons should have the same border-radius as the normal buttons. */
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--bs-border-radius);
}
/**
* Focus styles to improve Bootstrap default contrast.
*/
.btn:focus-visible, .btn.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-primary:focus-visible, .btn-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-secondary:focus-visible, .btn-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-success:focus-visible, .btn-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-info:focus-visible, .btn-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-warning:focus-visible, .btn-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-danger:focus-visible, .btn-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-light:focus-visible, .btn-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-dark:focus-visible, .btn-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-outline-primary:focus-visible, .btn-outline-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-secondary:focus-visible, .btn-outline-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-success:focus-visible, .btn-outline-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-info:focus-visible, .btn-outline-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-warning:focus-visible, .btn-outline-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-danger:focus-visible, .btn-outline-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-light:focus-visible, .btn-outline-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-dark:focus-visible, .btn-outline-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
/**
* Icon buttons.
*/
.btn.btn-icon {
height: 36px;
width: 36px;
@@ -37198,6 +37299,10 @@ p.arrow_button {
.btn.btn-icon:hover, .btn.btn-icon:focus {
background-color: #e9ecef;
}
.btn.btn-icon:focus-visible, .btn.btn-icon.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
@@ -37247,6 +37352,7 @@ p.arrow_button {
line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
}
/* Specific styles for the collapse/expand buttons. */
.btn.btn-icon.icons-collapse-expand {
color: #0f6cbf;
background-color: #e7f0f9;
@@ -37254,92 +37360,14 @@ p.arrow_button {
.btn.btn-icon.icons-collapse-expand:hover {
outline: 2px solid #0f6cbf;
}
.btn-primary:focus, .btn-primary.focus {
outline: 0.25rem solid #000102;
.btn.btn-icon.icons-collapse-expand:focus-visible, .btn.btn-icon.icons-collapse-expand.focus {
outline: 0.25rem solid #3481c1;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-secondary:focus, .btn-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-success:focus, .btn-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-info:focus, .btn-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-warning:focus, .btn-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-danger:focus, .btn-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-light:focus, .btn-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-dark:focus, .btn-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-success:focus, .btn-outline-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-info:focus, .btn-outline-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-warning:focus, .btn-outline-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-danger:focus, .btn-outline-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-light:focus, .btn-outline-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-dark:focus, .btn-outline-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--bs-border-radius);
}
/**
* Subtle buttons.
*/
.btn-subtle-primary {
--bs-btn-font-weight: 700;
--bs-btn-color: var(--bs-primary-text-emphasis);
@@ -37350,7 +37378,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-focus-shadow-rgb: 15, 108, 191;
}
.btn-subtle-primary:focus, .btn-subtle-primary.focus {
.btn-subtle-primary:focus-visible, .btn-subtle-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37365,7 +37393,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-focus-shadow-rgb: 206, 212, 218;
}
.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
.btn-subtle-secondary:focus-visible, .btn-subtle-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37380,7 +37408,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-success);
--bs-btn-focus-shadow-rgb: 53, 122, 50;
}
.btn-subtle-success:focus, .btn-subtle-success.focus {
.btn-subtle-success:focus-visible, .btn-subtle-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37395,7 +37423,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-info);
--bs-btn-focus-shadow-rgb: 0, 129, 150;
}
.btn-subtle-info:focus, .btn-subtle-info.focus {
.btn-subtle-info:focus-visible, .btn-subtle-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37410,7 +37438,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-warning);
--bs-btn-focus-shadow-rgb: 240, 173, 78;
}
.btn-subtle-warning:focus, .btn-subtle-warning.focus {
.btn-subtle-warning:focus-visible, .btn-subtle-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37425,7 +37453,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-danger);
--bs-btn-focus-shadow-rgb: 202, 49, 32;
}
.btn-subtle-danger:focus, .btn-subtle-danger.focus {
.btn-subtle-danger:focus-visible, .btn-subtle-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37440,7 +37468,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-light);
--bs-btn-focus-shadow-rgb: 248, 249, 250;
}
.btn-subtle-light:focus, .btn-subtle-light.focus {
.btn-subtle-light:focus-visible, .btn-subtle-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37455,7 +37483,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-dark);
--bs-btn-focus-shadow-rgb: 29, 33, 37;
}
.btn-subtle-dark:focus, .btn-subtle-dark.focus {
.btn-subtle-dark:focus-visible, .btn-subtle-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37469,7 +37497,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-gray-600);
--bs-btn-focus-shadow-rgb: 106, 115, 123;
}
.btn-subtle-body:focus, .btn-subtle-body.focus {
.btn-subtle-body:focus-visible, .btn-subtle-body.focus {
outline: 0.25rem solid #0c0d0d;
box-shadow: inset 0 0 0 2px #fff;
}
theme/classic/style/moodle.css
+120 -92
View File
@@ -37151,6 +37151,10 @@ table .sticky-column {
font-size: 3rem;
}
/**
* File buttons.scss.
* Contains styles for buttons.
*/
.singlebutton {
display: inline-block;
}
@@ -37186,6 +37190,103 @@ p.arrow_button {
margin: 0 0 10px 5px;
}
/* Small buttons should have the same border-radius as the normal buttons. */
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--bs-border-radius);
}
/**
* Focus styles to improve Bootstrap default contrast.
*/
.btn:focus-visible, .btn.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-primary:focus-visible, .btn-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-secondary:focus-visible, .btn-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-success:focus-visible, .btn-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-info:focus-visible, .btn-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-warning:focus-visible, .btn-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-danger:focus-visible, .btn-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-light:focus-visible, .btn-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-dark:focus-visible, .btn-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-outline-primary:focus-visible, .btn-outline-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-secondary:focus-visible, .btn-outline-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-success:focus-visible, .btn-outline-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-info:focus-visible, .btn-outline-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-warning:focus-visible, .btn-outline-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-danger:focus-visible, .btn-outline-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-light:focus-visible, .btn-outline-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-dark:focus-visible, .btn-outline-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
/**
* Icon buttons.
*/
.btn.btn-icon {
height: 36px;
width: 36px;
@@ -37198,6 +37299,10 @@ p.arrow_button {
.btn.btn-icon:hover, .btn.btn-icon:focus {
background-color: #e9ecef;
}
.btn.btn-icon:focus-visible, .btn.btn-icon.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn.btn-icon.icon-size-0 {
height: 20px !important; /* stylelint-disable-line declaration-no-important */
width: 20px !important; /* stylelint-disable-line declaration-no-important */
@@ -37247,6 +37352,7 @@ p.arrow_button {
line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
}
/* Specific styles for the collapse/expand buttons. */
.btn.btn-icon.icons-collapse-expand {
color: #0f6cbf;
background-color: #e7f0f9;
@@ -37254,92 +37360,14 @@ p.arrow_button {
.btn.btn-icon.icons-collapse-expand:hover {
outline: 2px solid #0f6cbf;
}
.btn-primary:focus, .btn-primary.focus {
outline: 0.25rem solid #000102;
.btn.btn-icon.icons-collapse-expand:focus-visible, .btn.btn-icon.icons-collapse-expand.focus {
outline: 0.25rem solid #3481c1;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-secondary:focus, .btn-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-success:focus, .btn-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-info:focus, .btn-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-warning:focus, .btn-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-danger:focus, .btn-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-light:focus, .btn-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-dark:focus, .btn-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-success:focus, .btn-outline-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-info:focus, .btn-outline-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-warning:focus, .btn-outline-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-danger:focus, .btn-outline-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-light:focus, .btn-outline-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-outline-dark:focus, .btn-outline-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #343a40;
}
.btn-sm,
.btn-group-sm > .btn {
--bs-btn-border-radius: var(--bs-border-radius);
}
/**
* Subtle buttons.
*/
.btn-subtle-primary {
--bs-btn-font-weight: 700;
--bs-btn-color: var(--bs-primary-text-emphasis);
@@ -37350,7 +37378,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-focus-shadow-rgb: 15, 108, 191;
}
.btn-subtle-primary:focus, .btn-subtle-primary.focus {
.btn-subtle-primary:focus-visible, .btn-subtle-primary.focus {
outline: 0.25rem solid #000102;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37365,7 +37393,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-focus-shadow-rgb: 206, 212, 218;
}
.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
.btn-subtle-secondary:focus-visible, .btn-subtle-secondary.focus {
outline: 0.25rem solid #5f6e7d;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37380,7 +37408,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-success);
--bs-btn-focus-shadow-rgb: 53, 122, 50;
}
.btn-subtle-success:focus, .btn-subtle-success.focus {
.btn-subtle-success:focus-visible, .btn-subtle-success.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37395,7 +37423,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-info);
--bs-btn-focus-shadow-rgb: 0, 129, 150;
}
.btn-subtle-info:focus, .btn-subtle-info.focus {
.btn-subtle-info:focus-visible, .btn-subtle-info.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37410,7 +37438,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-warning);
--bs-btn-focus-shadow-rgb: 240, 173, 78;
}
.btn-subtle-warning:focus, .btn-subtle-warning.focus {
.btn-subtle-warning:focus-visible, .btn-subtle-warning.focus {
outline: 0.25rem solid #694109;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37425,7 +37453,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-danger);
--bs-btn-focus-shadow-rgb: 202, 49, 32;
}
.btn-subtle-danger:focus, .btn-subtle-danger.focus {
.btn-subtle-danger:focus-visible, .btn-subtle-danger.focus {
outline: 0.25rem solid #1a0604;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37440,7 +37468,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-light);
--bs-btn-focus-shadow-rgb: 248, 249, 250;
}
.btn-subtle-light:focus, .btn-subtle-light.focus {
.btn-subtle-light:focus-visible, .btn-subtle-light.focus {
outline: 0.25rem solid #8193a5;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37455,7 +37483,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-dark);
--bs-btn-focus-shadow-rgb: 29, 33, 37;
}
.btn-subtle-dark:focus, .btn-subtle-dark.focus {
.btn-subtle-dark:focus-visible, .btn-subtle-dark.focus {
outline: 0.25rem solid black;
box-shadow: inset 0 0 0 2px #fff;
}
@@ -37469,7 +37497,7 @@ p.arrow_button {
--bs-btn-hover-bg: var(--bs-gray-600);
--bs-btn-focus-shadow-rgb: 106, 115, 123;
}
.btn-subtle-body:focus, .btn-subtle-body.focus {
.btn-subtle-body:focus-visible, .btn-subtle-body.focus {
outline: 0.25rem solid #0c0d0d;
box-shadow: inset 0 0 0 2px #fff;
}