Skip to content

Commit 1d4d9f8

Browse files
mdoXhmikosR
authored andcommitted
Drop all hover mixins
Previously deprecated in v4.x, this clears out the now unused Sass option and removes some unused mixins. Arguably we could remove more, but I like the hover-focus mixin and we make extensive use of it across the project.
1 parent a827934 commit 1d4d9f8

20 files changed

+51
-84
lines changed

scss/_button-group.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313

1414
// Bring the hover, focused, and "active" buttons to the front to overlay
1515
// the borders properly
16-
@include hover {
17-
z-index: 1;
18-
}
16+
&:hover,
1917
&:focus,
2018
&:active,
2119
&.active {

scss/_buttons.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
1818
@include transition($btn-transition);
1919

20-
@include hover {
20+
&:hover {
2121
color: $body-color;
2222
text-decoration: none;
2323
}
@@ -79,7 +79,7 @@ fieldset:disabled a.btn {
7979
color: $btn-link-color;
8080
text-decoration: $link-decoration;
8181

82-
@include hover {
82+
&:hover {
8383
color: $btn-link-hover-color;
8484
text-decoration: $link-hover-decoration;
8585
}

scss/_card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
}
5454

5555
.card-link {
56-
@include hover {
56+
&:hover {
5757
text-decoration: none;
5858
}
5959

scss/_carousel.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@
101101
@include transition($carousel-control-transition);
102102

103103
// Hover/focus state
104-
@include hover-focus {
104+
&:hover,
105+
&:focus {
105106
color: $carousel-control-color;
106107
text-decoration: none;
107108
outline: 0;

scss/_close.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
opacity: .5;
99

1010
// Override <a>'s hover style
11-
@include hover {
11+
&:hover {
1212
color: $close-color;
1313
text-decoration: none;
1414
}
1515

1616
&:not(:disabled):not(.disabled) {
17-
@include hover-focus {
17+
&:hover,
18+
&:focus {
1819
opacity: .75;
1920
}
2021
}

scss/_dropdown.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@
143143
}
144144
}
145145

146-
@include hover-focus {
146+
&:hover,
147+
&:focus {
147148
color: $dropdown-link-hover-color;
148149
text-decoration: none;
149150
@include gradient-bg($dropdown-link-hover-bg);

scss/_list-group.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
text-align: inherit; // For `<button>`s (anchors inherit)
2424

2525
// Hover state
26-
@include hover-focus {
26+
&:hover,
27+
&:focus {
2728
z-index: 1; // Place hover/focus items above their siblings for proper border styling
2829
color: $list-group-action-hover-color;
2930
text-decoration: none;

scss/_mixins.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010

1111
// Utilities
1212
@import "mixins/breakpoints";
13-
@import "mixins/hover";
1413
@import "mixins/image";
1514
@import "mixins/resize";
1615
@import "mixins/screen-reader";

scss/_nav.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
display: block;
1616
padding: $nav-link-padding-y $nav-link-padding-x;
1717

18-
@include hover-focus {
18+
&:hover,
19+
&:focus {
1920
text-decoration: none;
2021
}
2122

@@ -42,7 +43,8 @@
4243
border: $nav-tabs-border-width solid transparent;
4344
@include border-top-radius($nav-tabs-border-radius);
4445

45-
@include hover-focus {
46+
&:hover,
47+
&:focus {
4648
border-color: $nav-tabs-link-hover-border-color;
4749
}
4850

scss/_navbar.scss

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
line-height: inherit;
4949
white-space: nowrap;
5050

51-
@include hover-focus {
51+
&:hover,
52+
&:focus {
5253
text-decoration: none;
5354
}
5455
}
@@ -112,7 +113,8 @@
112113
border: $border-width solid transparent; // remove default button style
113114
@include border-radius($navbar-toggler-border-radius);
114115

115-
@include hover-focus {
116+
&:hover,
117+
&:focus {
116118
text-decoration: none;
117119
}
118120
}
@@ -193,7 +195,8 @@
193195
.navbar-brand {
194196
color: $navbar-light-brand-color;
195197

196-
@include hover-focus {
198+
&:hover,
199+
&:focus {
197200
color: $navbar-light-brand-hover-color;
198201
}
199202
}
@@ -202,7 +205,8 @@
202205
.nav-link {
203206
color: $navbar-light-color;
204207

205-
@include hover-focus {
208+
&:hover,
209+
&:focus {
206210
color: $navbar-light-hover-color;
207211
}
208212

@@ -230,12 +234,11 @@
230234

231235
.navbar-text {
232236
color: $navbar-light-color;
233-
a {
234-
color: $navbar-light-active-color;
235237

236-
@include hover-focus {
237-
color: $navbar-light-active-color;
238-
}
238+
a,
239+
a:hover,
240+
a:focus {
241+
color: $navbar-light-active-color;
239242
}
240243
}
241244
}
@@ -245,7 +248,8 @@
245248
.navbar-brand {
246249
color: $navbar-dark-brand-color;
247250

248-
@include hover-focus {
251+
&:hover,
252+
&:focus {
249253
color: $navbar-dark-brand-hover-color;
250254
}
251255
}
@@ -254,7 +258,8 @@
254258
.nav-link {
255259
color: $navbar-dark-color;
256260

257-
@include hover-focus {
261+
&:hover,
262+
&:focus {
258263
color: $navbar-dark-hover-color;
259264
}
260265

@@ -282,12 +287,10 @@
282287

283288
.navbar-text {
284289
color: $navbar-dark-color;
285-
a {
290+
a,
291+
a:hover,
292+
a:focus {
286293
color: $navbar-dark-active-color;
287-
288-
@include hover-focus {
289-
color: $navbar-dark-active-color;
290-
}
291294
}
292295
}
293296
}

scss/_reboot.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ a {
219219
text-decoration: $link-decoration;
220220
background-color: transparent; // Remove the gray background on active links in IE 10.
221221

222-
@include hover {
222+
&:hover {
223223
color: $link-hover-color;
224224
text-decoration: $link-hover-decoration;
225225
}
@@ -232,15 +232,11 @@ a {
232232
// See https://github.com/twbs/bootstrap/issues/19402
233233

234234
a:not([href]):not([tabindex]) {
235-
color: inherit;
236-
text-decoration: none;
237-
238-
@include hover-focus {
235+
&,
236+
&:hover,
237+
&:focus {
239238
color: inherit;
240239
text-decoration: none;
241-
}
242-
243-
&:focus {
244240
outline: 0;
245241
}
246242
}

scss/_tables.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484

8585
.table-hover {
8686
tbody tr {
87-
@include hover {
87+
&:hover {
8888
color: $table-hover-color;
8989
background-color: $table-hover-bg;
9090
}
@@ -149,7 +149,7 @@
149149

150150
&.table-hover {
151151
tbody tr {
152-
@include hover {
152+
&:hover {
153153
color: $table-dark-hover-color;
154154
background-color: $table-dark-hover-bg;
155155
}

scss/_variables.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ $enable-shadows: false !default;
112112
$enable-gradients: false !default;
113113
$enable-transitions: true !default;
114114
$enable-prefers-reduced-motion-media-query: true !default;
115-
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
116115
$enable-grid-classes: true !default;
117116
$enable-pointer-cursor-for-buttons: true !default;
118117
$enable-print-styles: true !default;

scss/mixins/_buttons.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
border-color: $border;
1010
@include box-shadow($btn-box-shadow);
1111

12-
@include hover {
12+
&:hover {
1313
color: color-yiq($hover-background);
1414
@include gradient-bg($hover-background);
1515
border-color: $hover-border;
@@ -65,7 +65,7 @@
6565
color: $color;
6666
border-color: $color;
6767

68-
@include hover {
68+
&:hover {
6969
color: $color-hover;
7070
background-color: $active-background;
7171
border-color: $active-border;

scss/mixins/_hover.scss

Lines changed: 0 additions & 37 deletions
This file was deleted.

scss/mixins/_list-group.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
background-color: $background;
77

88
&.list-group-item-action {
9-
@include hover-focus {
9+
&:hover,
10+
&:focus {
1011
color: $color;
1112
background-color: darken($background, 5%);
1213
}

scss/mixins/_table-row.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
$hover-background: darken($background, 5%);
2727

2828
.table-#{$state} {
29-
@include hover {
29+
&:hover {
3030
background-color: $hover-background;
3131

3232
> td,

scss/mixins/_text-emphasis.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
}
99
@if $emphasized-link-hover-darken-percentage != 0 {
1010
a#{$parent} {
11-
@include hover-focus {
11+
&:hover,
12+
&:focus {
1213
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
1314
}
1415
}

site/content/docs/4.3/migration.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ See the browser and devices page for details on what is currently supported in B
2222

2323
Changes to our source Sass files and compiled CSS.
2424

25+
- 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).
2526
- **Todo:** Remove previously deprecated mixins
2627
- `float()`
2728
- `form-control-mixin()`

site/static/docs/4.3/assets/scss/_skippy.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
background-color: $bd-purple;
77
outline: 0;
88

9-
@include hover {
9+
&:hover {
1010
color: $white;
1111
}
1212
}

0 commit comments

Comments
 (0)