mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 09:05:47 +02:00
Code Issues Releases Wiki Activity

Deprecate hover media query shim and mixins (#25270)

Browse Source 
* Deprecate hover media query shim and mixins

Fixes #25195.

This never was completed or fully implemented, and the docs are inaccurate as to what browsers are currently affected by this stickied hover problem. This PR aims to update the docs and deprecate the shim from our mixins and only return the pseudo-classes. To reflect the order of these states used elsewhere (e.g., our button styles), I've also updated the order of each within the mixin.

* Mention in docs and variables that it's deprecated
This commit is contained in:
Mark Otto
2018-01-11 02:12:15 -08:00
committed by Patrick H. Lauke
parent 2e15b94888
commit 92cc0aba7b
4 changed files with 36 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_variables.scss
View File

@@ -103,7 +103,7 @@ $enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-print-styles: true !default;

70
scss/mixins/_hover.scss
View File

@@ -1,61 +1,39 @@
// stylelint-disable indentation
// Hover mixin and `$enable-hover-media-query` are deprecated.
//
// Origally 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 psuedo-classes instead of a shimmed media query.
//
// Issue: https://github.com/twbs/bootstrap/issues/25195
@mixin hover {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
// @media (hover: hover) {
// &:hover { @content }
// }
// }
// @else {
&:hover { @content; }
// }
&:hover { @content; }
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus {
@content;
}
@include hover { @content; }
} @else {
&:focus,
&:hover {
@content;
}
&:hover,
&:focus {
@content;
}
}
@mixin plain-hover-focus {
@if $enable-hover-media-query {
&,
&:focus {
@content;
}
@include hover { @content; }
} @else {
&,
&:focus,
&:hover {
@content;
}
&,
&:hover,
&:focus {
@content;
}
}
@mixin hover-focus-active {
@if $enable-hover-media-query {
&:focus,
&:active {
@content;
}
@include hover { @content; }
} @else {
&:focus,
&:active,
&:hover {
@content;
}
&:hover,
&:focus,
&:active {
@content;
}
}