rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Drop all hover mixins

Browse Source 
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.
This commit is contained in:
Mark Otto 2018-09-18 02:10:07 +03:00 committed by XhmikosR
parent a827934f13
commit 1d4d9f8d89
20 changed files with 51 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_button-group.scss
View File

@ -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 {

4
scss/_buttons.scss
View File

@ -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;
}

2
scss/_card.scss
View File

@ -53,7 +53,7 @@
}
.card-link {
@include hover {
&:hover {
text-decoration: none;
}

3
scss/_carousel.scss
View File

@ -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;

5
scss/_close.scss
View File

@ -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;
}
}

3
scss/_dropdown.scss
View File

@ -143,7 +143,8 @@
}
}
@include hover-focus {
&:hover,
&:focus {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);

3
scss/_list-group.scss
View File

@ -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;

1
scss/_mixins.scss
View File

@ -10,7 +10,6 @@
// Utilities
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/screen-reader";

6
scss/_nav.scss
View File

@ -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;
}

35
scss/_navbar.scss
View File

@ -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;
}
}
}
}

12
scss/_reboot.scss
View File

@ -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;
}
}

4
scss/_tables.scss
View File

@ -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;
}

1
scss/_variables.scss
View File

@ -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;

4
scss/mixins/_buttons.scss
View File

@ -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;

37
scss/mixins/_hover.scss
View File

@ -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;
}
}

3
scss/mixins/_list-group.scss
View File

@ -6,7 +6,8 @@
background-color: $background;
&.list-group-item-action {
@include hover-focus {
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
}

2
scss/mixins/_table-row.scss
View File

@ -26,7 +26,7 @@
$hover-background: darken($background, 5%);
.table-#{$state} {
@include hover {
&:hover {
background-color: $hover-background;
> td,

3
scss/mixins/_text-emphasis.scss
View File

@ -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;
}
}

1
site/content/docs/4.3/migration.md
View File

@ -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()`

2
site/static/docs/4.3/assets/scss/_skippy.scss
View File

@ -6,7 +6,7 @@
background-color: $bd-purple;
outline: 0;
@include hover {
&:hover {
color: $white;
}
}