aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--scss/_button-group.scss4
-rw-r--r--scss/_buttons.scss4
-rw-r--r--scss/_card.scss2
-rw-r--r--scss/_carousel.scss3
-rw-r--r--scss/_close.scss5
-rw-r--r--scss/_dropdown.scss3
-rw-r--r--scss/_list-group.scss3
-rw-r--r--scss/_mixins.scss1
-rw-r--r--scss/_nav.scss6
-rw-r--r--scss/_navbar.scss35
-rw-r--r--scss/_reboot.scss12
-rw-r--r--scss/_tables.scss4
-rw-r--r--scss/_variables.scss1
-rw-r--r--scss/mixins/_buttons.scss4
-rw-r--r--scss/mixins/_hover.scss37
-rw-r--r--scss/mixins/_list-group.scss3
-rw-r--r--scss/mixins/_table-row.scss2
-rw-r--r--scss/mixins/_text-emphasis.scss3
-rw-r--r--site/content/docs/4.3/migration.md1
-rw-r--r--site/static/docs/4.3/assets/scss/_skippy.scss2
20 files changed, 51 insertions, 84 deletions
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index d7220029a..e486d469d 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -13,9 +13,7 @@
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
- @include hover {
- z-index: 1;
- }
+ &:hover,
&:focus,
&:active,
&.active {
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 5a684a3ff..2adce28b4 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -17,7 +17,7 @@
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
- @include hover {
+ &:hover {
color: $body-color;
text-decoration: none;
}
@@ -79,7 +79,7 @@ fieldset:disabled a.btn {
color: $btn-link-color;
text-decoration: $link-decoration;
- @include hover {
+ &:hover {
color: $btn-link-hover-color;
text-decoration: $link-hover-decoration;
}
diff --git a/scss/_card.scss b/scss/_card.scss
index c0b2078c1..5deefeeed 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -53,7 +53,7 @@
}
.card-link {
- @include hover {
+ &:hover {
text-decoration: none;
}
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 20ea04baf..0635a4acd 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -101,7 +101,8 @@
@include transition($carousel-control-transition);
// Hover/focus state
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
diff --git a/scss/_close.scss b/scss/_close.scss
index 5cc96f573..4f92022c8 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -8,13 +8,14 @@
opacity: .5;
// Override <a>'s hover style
- @include hover {
+ &:hover {
color: $close-color;
text-decoration: none;
}
&:not(:disabled):not(.disabled) {
- @include hover-focus {
+ &:hover,
+ &:focus {
opacity: .75;
}
}
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index ba8674e92..3f4664154 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -143,7 +143,8 @@
}
}
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 3f80687ab..71edfb2d3 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -23,7 +23,8 @@
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
- @include hover-focus {
+ &:hover,
+ &:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color;
text-decoration: none;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index afbdd6ff5..a8be12063 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -10,7 +10,6 @@
// Utilities
@import "mixins/breakpoints";
-@import "mixins/hover";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/screen-reader";
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 2085d06f6..6d77aeba8 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -15,7 +15,8 @@
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
- @include hover-focus {
+ &:hover,
+ &:focus {
text-decoration: none;
}
@@ -42,7 +43,8 @@
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
- @include hover-focus {
+ &:hover,
+ &:focus {
border-color: $nav-tabs-link-hover-border-color;
}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 8f52bdd17..b1efa0c04 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -48,7 +48,8 @@
line-height: inherit;
white-space: nowrap;
- @include hover-focus {
+ &:hover,
+ &:focus {
text-decoration: none;
}
}
@@ -112,7 +113,8 @@
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
- @include hover-focus {
+ &:hover,
+ &:focus {
text-decoration: none;
}
}
@@ -193,7 +195,8 @@
.navbar-brand {
color: $navbar-light-brand-color;
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $navbar-light-brand-hover-color;
}
}
@@ -202,7 +205,8 @@
.nav-link {
color: $navbar-light-color;
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $navbar-light-hover-color;
}
@@ -230,12 +234,11 @@
.navbar-text {
color: $navbar-light-color;
- a {
- color: $navbar-light-active-color;
- @include hover-focus {
- color: $navbar-light-active-color;
- }
+ a,
+ a:hover,
+ a:focus {
+ color: $navbar-light-active-color;
}
}
}
@@ -245,7 +248,8 @@
.navbar-brand {
color: $navbar-dark-brand-color;
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $navbar-dark-brand-hover-color;
}
}
@@ -254,7 +258,8 @@
.nav-link {
color: $navbar-dark-color;
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $navbar-dark-hover-color;
}
@@ -282,12 +287,10 @@
.navbar-text {
color: $navbar-dark-color;
- a {
+ a,
+ a:hover,
+ a:focus {
color: $navbar-dark-active-color;
-
- @include hover-focus {
- color: $navbar-dark-active-color;
- }
}
}
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 67ecd9e27..df3eacbff 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -219,7 +219,7 @@ a {
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
- @include hover {
+ &:hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
@@ -232,15 +232,11 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
- color: inherit;
- text-decoration: none;
-
- @include hover-focus {
+ &,
+ &:hover,
+ &:focus {
color: inherit;
text-decoration: none;
- }
-
- &:focus {
outline: 0;
}
}
diff --git a/scss/_tables.scss b/scss/_tables.scss
index b7ab3d506..756c071a7 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -84,7 +84,7 @@
.table-hover {
tbody tr {
- @include hover {
+ &:hover {
color: $table-hover-color;
background-color: $table-hover-bg;
}
@@ -149,7 +149,7 @@
&.table-hover {
tbody tr {
- @include hover {
+ &:hover {
color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e2271491d..9d3f69c15 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -112,7 +112,6 @@ $enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-prefers-reduced-motion-media-query: true !default;
-$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 874f552d0..1c51765d2 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -9,7 +9,7 @@
border-color: $border;
@include box-shadow($btn-box-shadow);
- @include hover {
+ &:hover {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
@@ -65,7 +65,7 @@
color: $color;
border-color: $color;
- @include hover {
+ &:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
deleted file mode 100644
index 192f847e1..000000000
--- a/scss/mixins/_hover.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-// Hover mixin and `$enable-hover-media-query` are deprecated.
-//
-// Originally added during our alphas and maintained during betas, this mixin was
-// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
-// would persist after initial touch.
-//
-// For backward compatibility, we've kept these mixins and updated them to
-// always return their regular pseudo-classes instead of a shimmed media query.
-//
-// Issue: https://github.com/twbs/bootstrap/issues/25195
-
-@mixin hover {
- &:hover { @content; }
-}
-
-@mixin hover-focus {
- &:hover,
- &:focus {
- @content;
- }
-}
-
-@mixin plain-hover-focus {
- &,
- &:hover,
- &:focus {
- @content;
- }
-}
-
-@mixin hover-focus-active {
- &:hover,
- &:focus,
- &:active {
- @content;
- }
-}
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index cd47a4e9f..965fc4bd8 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -6,7 +6,8 @@
background-color: $background;
&.list-group-item-action {
- @include hover-focus {
+ &:hover,
+ &:focus {
color: $color;
background-color: darken($background, 5%);
}
diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss
index f8d61869a..517229e1a 100644
--- a/scss/mixins/_table-row.scss
+++ b/scss/mixins/_table-row.scss
@@ -26,7 +26,7 @@
$hover-background: darken($background, 5%);
.table-#{$state} {
- @include hover {
+ &:hover {
background-color: $hover-background;
> td,
diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
index 155d6ca8c..4c68bae89 100644
--- a/scss/mixins/_text-emphasis.scss
+++ b/scss/mixins/_text-emphasis.scss
@@ -8,7 +8,8 @@
}
@if $emphasized-link-hover-darken-percentage != 0 {
a#{$parent} {
- @include hover-focus {
+ &:hover,
+ &:focus {
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
}
}
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 278abd6cf..d06c3f703 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -22,6 +22,7 @@ See the browser and devices page for details on what is currently supported in B
Changes to our source Sass files and compiled CSS.
+- Removed `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` mixins. Use regular CSS syntax for these moving forward. [See #28267](https://github.com/twbs/bootstrap/pull/28267).
- **Todo:** Remove previously deprecated mixins
- `float()`
- `form-control-mixin()`
diff --git a/site/static/docs/4.3/assets/scss/_skippy.scss b/site/static/docs/4.3/assets/scss/_skippy.scss
index db971d114..ab59339d0 100644
--- a/site/static/docs/4.3/assets/scss/_skippy.scss
+++ b/site/static/docs/4.3/assets/scss/_skippy.scss
@@ -6,7 +6,7 @@
background-color: $bd-purple;
outline: 0;
- @include hover {
+ &:hover {
color: $white;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 03:24:04 +0000