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

Merge pull request #56 from twbs/mobile-hover

Browse Source 
Nuke sticky :hover on mobile
This commit is contained in:
Chris Rebert 2015-02-04 13:32:41 -08:00
commit cff2e21d37
31 changed files with 264 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Gruntfile.js
View File

@ -19,6 +19,7 @@ module.exports = function (grunt) {
var path = require('path'); var path = require('path');
var glob = require('glob'); var glob = require('glob');
var npmShrinkwrap = require('npm-shrinkwrap'); var npmShrinkwrap = require('npm-shrinkwrap');
var mq4HoverShim = require('mq4-hover-hover-shim');
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js'); var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' }); var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
@ -107,6 +108,8 @@ module.exports = function (grunt) {
}, },
bootstrap: { bootstrap: {
src: [ src: [
'js/hover.js',
mq4HoverShim.featureDetector.umdGlobal,
'js/transition.js', 'js/transition.js',
'js/alert.js', 'js/alert.js',
'js/button.js', 'js/button.js',
@ -153,6 +156,16 @@ module.exports = function (grunt) {
} }
}, },
postcss: {
options: {
map: true,
processors: [mq4HoverShim.postprocessorFor({hoverSelectorPrefix: '.bs-true-hover '})]
},
core: {
src: 'dist/css/<%= pkg.name %>.css'
}
},
autoprefixer: { autoprefixer: {
options: { options: {
browsers: [ browsers: [
@ -392,7 +405,7 @@ module.exports = function (grunt) {
})(process.env.TWBS_SASS || 'libsass'); })(process.env.TWBS_SASS || 'libsass');
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']); grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']); grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
// Full distribution task. // Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']); grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);

4
docs/getting-started/support.md
View File

@ -167,7 +167,9 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds. Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
### Sticky `:hover`/`:focus` on mobile ### Sticky `:hover`/`:focus` on mobile
Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's `:hover` states to become unwantedly "stuck" on such browsers. Some mobile browsers also make `:focus` similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely. Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
Bootstrap includes a workaround for this, although it is disabled by default. By setting `$use-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-hover-shim](https://github.com/cvrebert/mq4-hover-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
### Printing ### Printing

4
js/hover.js Normal file
View File

@ -0,0 +1,4 @@
$(document).on('mq4hsChange', function (e) {
'use strict';
$(document.documentElement).toggleClass('bs-true-hover', e.trueHover);
});

2
package.json
View File

@ -54,12 +54,14 @@
"grunt-html-validation": "~0.1.18", "grunt-html-validation": "~0.1.18",
"grunt-jekyll": "~0.4.2", "grunt-jekyll": "~0.4.2",
"grunt-jscs": "~1.2.0", "grunt-jscs": "~1.2.0",
"grunt-postcss": "^0.3.0",
"grunt-sass": "~0.17.0", "grunt-sass": "~0.17.0",
"grunt-saucelabs": "~8.5.0", "grunt-saucelabs": "~8.5.0",
"grunt-scss-lint": "^0.3.4", "grunt-scss-lint": "^0.3.4",
"grunt-sed": "~0.1.1", "grunt-sed": "~0.1.1",
"load-grunt-tasks": "~2.0.0", "load-grunt-tasks": "~2.0.0",
"markdown-it": "^3.0.4", "markdown-it": "^3.0.4",
"mq4-hover-hover-shim": "0.0.4",
"npm-shrinkwrap": "^200.0.0", "npm-shrinkwrap": "^200.0.0",
"time-grunt": "~1.0.0" "time-grunt": "~1.0.0"
}, },

3
scss/_badge.scss
View File

@ -47,8 +47,7 @@
// Hover state, but only for links // Hover state, but only for links
a.badge { a.badge {
&:hover, @include hover-focus {
&:focus {
color: $badge-link-hover-color; color: $badge-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;

4
scss/_button-group.scss
View File

@ -14,12 +14,14 @@
float: left; float: left;
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover,
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
z-index: 2; z-index: 2;
} }
@include hover {
z-index: 2;
}
} }
} }

15
scss/_buttons.scss
View File

@ -29,8 +29,9 @@
} }
} }
&:hover, @include hover-focus {
&:focus, text-decoration: none;
}
&.focus { &.focus {
text-decoration: none; text-decoration: none;
} }
@ -94,21 +95,21 @@
@include box-shadow(none); @include box-shadow(none);
} }
&, &,
&:hover,
&:focus, &:focus,
&:active { &:active {
border-color: transparent; border-color: transparent;
} }
&:hover, @include hover {
&:focus { border-color: transparent;
}
@include hover-focus {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
background-color: transparent; background-color: transparent;
} }
&:disabled, &:disabled,
fieldset[disabled] & { fieldset[disabled] & {
&:hover, @include hover-focus {
&:focus {
color: $btn-link-disabled-color; color: $btn-link-disabled-color;
text-decoration: none; text-decoration: none;
} }

9
scss/_card.scss
View File

@ -20,9 +20,11 @@
margin-left: .75rem; margin-left: .75rem;
} }
} }
.card-link:hover { .card-link {
@include hover {
text-decoration: none; text-decoration: none;
} }
}
// //
@ -89,11 +91,12 @@
.card-blockquote > footer { .card-blockquote > footer {
color: rgba(255,255,255,.65); color: rgba(255,255,255,.65);
} }
.card-link:hover, .card-link {
.card-link:focus { @include hover-focus {
color: #fff; color: #fff;
} }
} }
}
// //

3
scss/_carousel.scss
View File

@ -115,8 +115,7 @@
} }
// Hover/focus state // Hover/focus state
&:hover, @include hover-focus {
&:focus {
color: $carousel-control-color; color: $carousel-control-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;

3
scss/_close.scss
View File

@ -12,8 +12,7 @@
text-shadow: $close-text-shadow; text-shadow: $close-text-shadow;
opacity: .2; opacity: .2;
&:hover, @include hover-focus {
&:focus {
color: $close-color; color: $close-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;

15
scss/_custom-forms.scss
View File

@ -182,10 +182,11 @@
} }
// Hover state // Hover state
// Uncomment if you need it, but be aware of the sticky iOS states. .select select {
// .select select:hover { @include hover {
// background-color: #ddd; background-color: #ddd;
// } }
}
// Media query to target Firefox only // Media query to target Firefox only
@ -223,13 +224,13 @@
content: ""; content: "";
background-color: #eee; background-color: #eee;
} }
.select select:hover, .select select {
.select select:focus, @include hover-focus-active {
.select select:active {
color: #555; color: #555;
background-color: #eee; background-color: #eee;
} }
} }
}
// File // File
// //

14
scss/_dropdown.scss
View File

@ -67,8 +67,7 @@
// Hover/Focus state // Hover/Focus state
.dropdown-menu > li > a { .dropdown-menu > li > a {
&:hover, @include hover-focus {
&:focus {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-hover-bg; background-color: $dropdown-link-hover-bg;
@ -77,9 +76,7 @@
// Active state // Active state
.dropdown-menu > .active > a { .dropdown-menu > .active > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $dropdown-link-active-color; color: $dropdown-link-active-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-active-bg; background-color: $dropdown-link-active-bg;
@ -92,15 +89,12 @@
// Gray out text and ensure the hover/focus state remains gray // Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a { .dropdown-menu > .disabled > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $dropdown-link-disabled-color; color: $dropdown-link-disabled-color;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
&:hover, @include hover-focus {
&:focus {
text-decoration: none; text-decoration: none;
cursor: $cursor-disabled; cursor: $cursor-disabled;
background-color: transparent; background-color: transparent;

4
scss/_input-group.scss
View File

@ -143,9 +143,7 @@
margin-left: -1px; margin-left: -1px;
} }
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover, @include hover-focus-active {
&:focus,
&:active {
z-index: 2; z-index: 2;
} }
} }

3
scss/_labels.scss
View File

@ -28,8 +28,7 @@
// Add hover effects, but only for links // Add hover effects, but only for links
a.label { a.label {
&:hover, @include hover-focus {
&:focus {
color: $label-link-hover-color; color: $label-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;

15
scss/_list-group.scss
View File

@ -51,8 +51,7 @@ a.list-group-item {
} }
// Hover state // Hover state
&:hover, @include hover-focus {
&:focus {
color: $list-group-link-hover-color; color: $list-group-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: $list-group-hover-bg; background-color: $list-group-hover-bg;
@ -61,9 +60,8 @@ a.list-group-item {
.list-group-item { .list-group-item {
// Disabled state // Disabled state
&.disabled, &.disabled {
&.disabled:hover, @include plain-hover-focus {
&.disabled:focus {
color: $list-group-disabled-color; color: $list-group-disabled-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;
background-color: $list-group-disabled-bg; background-color: $list-group-disabled-bg;
@ -76,11 +74,11 @@ a.list-group-item {
color: $list-group-disabled-text-color; color: $list-group-disabled-text-color;
} }
} }
}
// Active class on item itself, not parent // Active class on item itself, not parent
&.active, &.active {
&.active:hover, @include plain-hover-focus {
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color; color: $list-group-active-color;
background-color: $list-group-active-bg; background-color: $list-group-active-bg;
@ -97,6 +95,7 @@ a.list-group-item {
} }
} }
} }
}
// Contextual variants // Contextual variants

1
scss/_mixins.scss
View File

@ -26,6 +26,7 @@
// Utilities // Utilities
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/hide-text"; @import "mixins/hide-text";
@import "mixins/hover";
@import "mixins/image"; @import "mixins/image";
@import "mixins/label"; @import "mixins/label";
@import "mixins/reset-filter"; @import "mixins/reset-filter";

22
scss/_nav.scss
View File

@ -18,8 +18,7 @@
padding: $nav-link-padding; padding: $nav-link-padding;
line-height: $line-height-base; line-height: $line-height-base;
&:hover, @include hover-focus {
&:focus {
text-decoration: none; text-decoration: none;
background-color: $nav-link-hover-bg; background-color: $nav-link-hover-bg;
} }
@ -29,9 +28,7 @@
&.disabled { &.disabled {
color: $nav-disabled-link-color; color: $nav-disabled-link-color;
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $nav-disabled-link-hover-color; color: $nav-disabled-link-hover-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;
background-color: transparent; background-color: transparent;
@ -62,8 +59,7 @@
border: 1px solid transparent; border: 1px solid transparent;
@include border-radius($border-radius-base $border-radius-base 0 0); @include border-radius($border-radius-base $border-radius-base 0 0);
&:hover, @include hover-focus {
&:focus {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
} }
} }
@ -72,9 +68,7 @@
.active > .nav-link, .active > .nav-link,
.nav-link.open, .nav-link.open,
.nav-link.active { .nav-link.active {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color; color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg; background-color: $nav-tabs-active-link-hover-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent; border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
@ -83,9 +77,7 @@
.disabled > .nav-link, .disabled > .nav-link,
.nav-link.disabled { .nav-link.disabled {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $nav-disabled-link-color; color: $nav-disabled-link-color;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
@ -116,9 +108,7 @@
.active > .nav-link, .active > .nav-link,
.nav-link.open, .nav-link.open,
.nav-link.active { .nav-link.active {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $component-active-color; color: $component-active-color;
cursor: default; cursor: default;
background-color: $component-active-bg; background-color: $component-active-bg;

69
scss/_navbar.scss
View File

@ -69,10 +69,11 @@
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-computed; line-height: $line-height-computed;
> a:hover, > a {
> a:focus { @include hover-focus {
text-decoration: none; text-decoration: none;
} }
}
> img { > img {
display: block; display: block;
@ -95,8 +96,7 @@
background: none; background: none;
border: 0; border: 0;
&:hover, @include hover-focus {
&:focus {
text-decoration: none; text-decoration: none;
} }
} }
@ -223,8 +223,7 @@
.navbar-brand { .navbar-brand {
color: $navbar-default-brand-color; color: $navbar-default-brand-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-default-brand-hover-color; color: $navbar-default-brand-hover-color;
background-color: $navbar-default-brand-hover-bg; background-color: $navbar-default-brand-hover-bg;
} }
@ -238,24 +237,19 @@
> li > a { > li > a {
color: $navbar-default-link-color; color: $navbar-default-link-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg; background-color: $navbar-default-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-default-link-active-color; color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg; background-color: $navbar-default-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-default-link-disabled-color; color: $navbar-default-link-disabled-color;
background-color: $navbar-default-link-disabled-bg; background-color: $navbar-default-link-disabled-bg;
} }
@ -264,8 +258,7 @@
.navbar-toggle { .navbar-toggle {
border-color: $navbar-default-toggle-border-color; border-color: $navbar-default-toggle-border-color;
&:hover, @include hover-focus {
&:focus {
background-color: $navbar-default-toggle-hover-bg; background-color: $navbar-default-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
@ -282,9 +275,7 @@
.navbar-nav { .navbar-nav {
// Remove background color from open dropdown // Remove background color from open dropdown
> .open > a { > .open > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-default-link-active-color; color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg; background-color: $navbar-default-link-active-bg;
} }
@ -298,21 +289,19 @@
.navbar-link { .navbar-link {
color: $navbar-default-link-color; color: $navbar-default-link-color;
&:hover { @include hover {
color: $navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
} }
} }
.btn-link { .btn-link {
color: $navbar-default-link-color; color: $navbar-default-link-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
} }
&:disabled, &:disabled,
fieldset[disabled] & { fieldset[disabled] & {
&:hover, @include hover-focus {
&:focus {
color: $navbar-default-link-disabled-color; color: $navbar-default-link-disabled-color;
} }
} }
@ -330,14 +319,12 @@
.nav-pills > .nav-item > .nav-link { .nav-pills > .nav-item > .nav-link {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
} }
.nav-pills > .nav-item > .nav-link { .nav-pills > .nav-item > .nav-link {
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
@ -351,8 +338,7 @@
.navbar-brand { .navbar-brand {
color: $navbar-inverse-brand-color; color: $navbar-inverse-brand-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-brand-hover-color; color: $navbar-inverse-brand-hover-color;
background-color: $navbar-inverse-brand-hover-bg; background-color: $navbar-inverse-brand-hover-bg;
} }
@ -366,24 +352,19 @@
> li > a { > li > a {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg; background-color: $navbar-inverse-link-disabled-bg;
} }
@ -398,9 +379,7 @@
// Dropdowns // Dropdowns
.navbar-nav { .navbar-nav {
> .open > a { > .open > a {
&, @include plain-hover-focus {
&:hover,
&:focus {
color: $navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
@ -409,7 +388,7 @@
.navbar-link { .navbar-link {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover { @include hover {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
} }
@ -417,15 +396,13 @@
.btn-link { .btn-link {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
&:disabled, &:disabled,
fieldset[disabled] & { fieldset[disabled] & {
&:hover, @include hover-focus {
&:focus {
color: $navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
} }
} }

8
scss/_normalize.scss
View File

@ -94,10 +94,14 @@ a {
// Improve readability when focused and also mouse hovered in all browsers. // Improve readability when focused and also mouse hovered in all browsers.
// //
a:active, a {
a:hover { &:active {
outline: 0; outline: 0;
} }
@include hover {
outline: 0;
}
}
// Text-level semantics // Text-level semantics
// ========================================================================== // ==========================================================================

15
scss/_pager.scss
View File

@ -22,17 +22,22 @@
border-radius: $pager-border-radius; border-radius: $pager-border-radius;
} }
> a:hover, > a {
> a:focus { @include hover-focus {
text-decoration: none; text-decoration: none;
background-color: $pager-hover-bg; background-color: $pager-hover-bg;
} }
} }
}
.disabled { .disabled {
> a, > a {
> a:hover, @include plain-hover-focus {
> a:focus, color: $pager-disabled-color;
cursor: $cursor-disabled;
background-color: $pager-bg;
}
}
> span { > span {
color: $pager-disabled-color; color: $pager-disabled-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;

15
scss/_pagination.scss
View File

@ -39,8 +39,7 @@
> li > a, > li > a,
> li > span { > li > span {
&:hover, @include hover-focus {
&:focus {
color: $pagination-hover-color; color: $pagination-hover-color;
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg;
border-color: $pagination-hover-border; border-color: $pagination-hover-border;
@ -49,9 +48,7 @@
> .active > a, > .active > a,
> .active > span { > .active > span {
&, @include plain-hover-focus {
&:hover,
&:focus {
z-index: 2; z-index: 2;
color: $pagination-active-color; color: $pagination-active-color;
cursor: default; cursor: default;
@ -62,11 +59,8 @@
> .disabled { > .disabled {
> span, > span,
> span:hover, > a {
> span:focus, @include plain-hover-focus {
> a,
> a:hover,
> a:focus {
color: $pagination-disabled-color; color: $pagination-disabled-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;
background-color: $pagination-disabled-bg; background-color: $pagination-disabled-bg;
@ -74,6 +68,7 @@
} }
} }
} }
}
// Sizing // Sizing
// -------------------------------------------------- // --------------------------------------------------

3
scss/_scaffolding.scss
View File

@ -72,8 +72,7 @@ a {
color: $link-color; color: $link-color;
text-decoration: none; text-decoration: none;
&:hover, @include hover-focus {
&:focus {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }

4
scss/_tables.scss
View File

@ -99,10 +99,12 @@ th {
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover {
tbody tr:hover { tbody tr {
@include hover {
background-color: $table-bg-hover; background-color: $table-bg-hover;
} }
} }
}
// Table cell sizing // Table cell sizing

2
scss/_variables.scss
View File

@ -50,6 +50,8 @@ $enable-transitions: true !default;
$spacer: 1rem !default; $spacer: 1rem !default;
$border-width: .075rem !default; $border-width: .075rem !default;
$use-hover-media-query: false !default;
//== Typography //== Typography
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.

4
scss/mixins/_background-variant.scss
View File

@ -5,7 +5,9 @@
#{$parent} { #{$parent} {
background-color: $color; background-color: $color;
} }
a#{$parent}:hover { a#{$parent} {
@include hover {
background-color: darken($color, 10%); background-color: darken($color, 10%);
} }
} }
}

18
scss/mixins/_buttons.scss
View File

@ -10,15 +10,22 @@
// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); // $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow($shadow); // .box-shadow($shadow);
&:hover, $active-background: darken($background, 10%);
$active-border: darken($border, 12%);
&:focus, &:focus,
&.focus, &.focus,
&:active, &:active,
&.active, &.active,
.open > &.dropdown-toggle { .open > &.dropdown-toggle {
color: $color; color: $color;
background-color: darken($background, 10%); background-color: $active-background;
border-color: darken($border, 12%); border-color: $active-border;
}
@include hover {
color: $color;
background-color: $active-background;
border-color: $active-border;
} }
&:active, &:active,
&.active, &.active,
@ -31,7 +38,6 @@
&:disabled, &:disabled,
fieldset[disabled] & { fieldset[disabled] & {
&, &,
&:hover,
&:focus, &:focus,
&.focus, &.focus,
&:active, &:active,
@ -39,6 +45,10 @@
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
} }
@include hover {
background-color: $background;
border-color: $border;
}
} }
.badge { .badge {

59
scss/mixins/_hover.scss Normal file
View File

@ -0,0 +1,59 @@
@mixin hover {
@if $use-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim
@media (hover: hover) {
&:hover { @content }
}
}
@else {
&:hover { @content }
}
}
@mixin hover-focus {
@if $use-hover-media-query {
&:focus { @content }
@include hover { @content }
}
@else {
&:focus,
&:hover {
@content
}
}
}
@mixin plain-hover-focus {
@if $use-hover-media-query {
&,
&:focus {
@content
}
@include hover { @content }
}
@else {
&,
&:focus,
&:hover {
@content
}
}
}
@mixin hover-focus-active {
@if $use-hover-media-query {
&:focus,
&:active {
@content
}
@include hover { @content }
}
@else {
&:focus,
&:active,
&:hover {
@content
}
}
}

3
scss/mixins/_label.scss
View File

@ -4,8 +4,7 @@
background-color: $color; background-color: $color;
&[href] { &[href] {
&:hover, @include hover-focus {
&:focus {
background-color: darken($color, 10%); background-color: darken($color, 10%);
} }
} }

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

@ -13,18 +13,17 @@
color: inherit; color: inherit;
} }
&:hover, @include hover-focus {
&:focus {
color: $color; color: $color;
background-color: darken($background, 5%); background-color: darken($background, 5%);
} }
&.active, &.active {
&.active:hover, @include plain-hover-focus {
&.active:focus {
color: #fff; color: #fff;
background-color: $color; background-color: $color;
border-color: $color; border-color: $color;
} }
} }
} }
}

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

@ -17,12 +17,26 @@
// Hover states for `.table-hover` // Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`. // Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr { .table-hover > tbody > tr {
> td.#{$state}:hover, $hover-background: darken($background, 5%);
> th.#{$state}:hover,
&.#{$state}:hover > td, > td.#{$state},
&:hover > .#{$state}, > th.#{$state} {
&.#{$state}:hover > th { @include hover {
background-color: darken($background, 5%); background-color: $hover-background;
}
}
&.#{$state} {
@include hover {
> td,
> th {
background-color: $hover-background;
}
}
}
@include hover {
> .#{$state} {
background-color: $hover-background;
}
} }
} }
} }

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

@ -4,7 +4,9 @@
#{$parent} { #{$parent} {
color: $color; color: $color;
} }
a#{$parent}:hover { a#{$parent} {
@include hover {
color: darken($color, 10%); color: darken($color, 10%);
} }
} }
}