Drop all hover mixins

mdo · XhmikosR · commit 1d4d9f8d8941 · 2019-05-08T20:58:07.000+03:00
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.
diff --git 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
@@ -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
@@ -53,7 +53,7 @@
 }
 
 .card-link {
-  @include hover {
+  &:hover {
     text-decoration: none;
   }
 
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -6,7 +6,7 @@
   background-color: $bd-purple;
   outline: 0;
 
-  @include hover {
+  &:hover {
     color: $white;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.card-link {`
`56`		`- @include hover {`
	`56`	`+ &:hover {`
`57`	`57`	`text-decoration: none;`
`58`	`58`	`}`
`59`	`59`
Original file line number	Diff line number	Diff line change
`@@ -8,13 +8,14 @@`
`8`	`8`	`opacity: .5;`
`9`	`9`
`10`	`10`	`// Override <a>'s hover style`
`11`		`- @include hover {`
	`11`	`+ &:hover {`
`12`	`12`	`color: $close-color;`
`13`	`13`	`text-decoration: none;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`&:not(:disabled):not(.disabled) {`
`17`		`- @include hover-focus {`
	`17`	`+ &:hover,`
	`18`	`+ &:focus {`
`18`	`19`	`opacity: .75;`
`19`	`20`	`}`
`20`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,8 @@`
`143`	`143`	`}`
`144`	`144`	`}`
`145`	`145`
`146`		`- @include hover-focus {`
	`146`	`+ &:hover,`
	`147`	`+ &:focus {`
`147`	`148`	`color: $dropdown-link-hover-color;`
`148`	`149`	`text-decoration: none;`
`149`	`150`	`@include gradient-bg($dropdown-link-hover-bg);`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,8 @@`
`48`	`48`	`line-height: inherit;`
`49`	`49`	`white-space: nowrap;`
`50`	`50`
`51`		`- @include hover-focus {`
	`51`	`+ &:hover,`
	`52`	`+ &:focus {`
`52`	`53`	`text-decoration: none;`
`53`	`54`	`}`
`54`	`55`	`}`
`@@ -112,7 +113,8 @@`
`112`	`113`	`border: $border-width solid transparent; // remove default button style`
`113`	`114`	`@include border-radius($navbar-toggler-border-radius);`
`114`	`115`
`115`		`- @include hover-focus {`
	`116`	`+ &:hover,`
	`117`	`+ &:focus {`
`116`	`118`	`text-decoration: none;`
`117`	`119`	`}`
`118`	`120`	`}`
`@@ -193,7 +195,8 @@`
`193`	`195`	`.navbar-brand {`
`194`	`196`	`color: $navbar-light-brand-color;`
`195`	`197`
`196`		`- @include hover-focus {`
	`198`	`+ &:hover,`
	`199`	`+ &:focus {`
`197`	`200`	`color: $navbar-light-brand-hover-color;`
`198`	`201`	`}`
`199`	`202`	`}`
`@@ -202,7 +205,8 @@`
`202`	`205`	`.nav-link {`
`203`	`206`	`color: $navbar-light-color;`
`204`	`207`
`205`		`- @include hover-focus {`
	`208`	`+ &:hover,`
	`209`	`+ &:focus {`
`206`	`210`	`color: $navbar-light-hover-color;`
`207`	`211`	`}`
`208`	`212`
`@@ -230,12 +234,11 @@`
`230`	`234`
`231`	`235`	`.navbar-text {`
`232`	`236`	`color: $navbar-light-color;`
`233`		`- a {`
`234`		`- color: $navbar-light-active-color;`
`235`	`237`
`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;`
`239`	`242`	`}`
`240`	`243`	`}`
`241`	`244`	`}`
`@@ -245,7 +248,8 @@`
`245`	`248`	`.navbar-brand {`
`246`	`249`	`color: $navbar-dark-brand-color;`
`247`	`250`
`248`		`- @include hover-focus {`
	`251`	`+ &:hover,`
	`252`	`+ &:focus {`
`249`	`253`	`color: $navbar-dark-brand-hover-color;`
`250`	`254`	`}`
`251`	`255`	`}`
`@@ -254,7 +258,8 @@`
`254`	`258`	`.nav-link {`
`255`	`259`	`color: $navbar-dark-color;`
`256`	`260`
`257`		`- @include hover-focus {`
	`261`	`+ &:hover,`
	`262`	`+ &:focus {`
`258`	`263`	`color: $navbar-dark-hover-color;`
`259`	`264`	`}`
`260`	`265`
`@@ -282,12 +287,10 @@`
`282`	`287`
`283`	`288`	`.navbar-text {`
`284`	`289`	`color: $navbar-dark-color;`
`285`		`- a {`
	`290`	`+ a,`
	`291`	`+ a:hover,`
	`292`	`+ a:focus {`
`286`	`293`	`color: $navbar-dark-active-color;`
`287`		`-`
`288`		`- @include hover-focus {`
`289`		`- color: $navbar-dark-active-color;`
`290`		`- }`
`291`	`294`	`}`
`292`	`295`	`}`
`293`	`296`	`}`