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

put all :hover styles within @media (hover: hover)

Browse Source
This commit is contained in:
Chris Rebert 2015-01-01 01:05:01 -08:00
parent c0f4dcd38e
commit 8e374bd010
26 changed files with 208 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/_badge.scss
View File

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

4
scss/_button-group.scss
View File

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

15
scss/_buttons.scss
View File

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

13
scss/_card.scss
View File

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

3
scss/_carousel.scss
View File

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

3
scss/_close.scss
View File

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

19
scss/_custom-forms.scss
View File

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

14
scss/_dropdown.scss
View File

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

4
scss/_input-group.scss
View File

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

3
scss/_labels.scss
View File

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

57
scss/_list-group.scss
View File

@ -51,8 +51,7 @@ a.list-group-item {
}
// Hover state
&:hover,
&:focus {
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
@ -61,39 +60,39 @@ a.list-group-item {
.list-group-item {
// Disabled state
&.disabled,
&.disabled:hover,
&.disabled:focus {
color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg;
&.disabled {
@include plain-hover-focus {
color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: $list-group-disabled-text-color;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: $list-group-disabled-text-color;
}
}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
&.active {
@include plain-hover-focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: $list-group-active-text-color;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: $list-group-active-text-color;
}
}
}
}

1
scss/_mixins.scss
View File

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

22
scss/_nav.scss
View File

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

71
scss/_navbar.scss
View File

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

10
scss/_normalize.scss
View File

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

19
scss/_pager.scss
View File

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

23
scss/_pagination.scss
View File

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

3
scss/_scaffolding.scss
View File

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

6
scss/_tables.scss
View File

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

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

@ -5,7 +5,9 @@
#{$parent} {
background-color: $color;
}
a#{$parent}:hover {
background-color: darken($color, 10%);
a#{$parent} {
@include hover {
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);
// .box-shadow($shadow);
&:hover,
$active-background: darken($background, 10%);
$active-border: darken($border, 12%);
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
background-color: $active-background;
border-color: $active-border;
}
@include hover {
color: $color;
background-color: $active-background;
border-color: $active-border;
}
&:active,
&.active,
@ -31,7 +38,6 @@
&:disabled,
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
@ -39,6 +45,10 @@
background-color: $background;
border-color: $border;
}
@include hover {
background-color: $background;
border-color: $border;
}
}
.badge {

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

@ -0,0 +1,28 @@
@mixin hover {
// 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 }
}
}
@mixin hover-focus {
&:focus { @content }
@include hover { @content }
}
@mixin plain-hover-focus {
&,
&:focus {
@content
}
@include hover { @content }
}
@mixin hover-focus-active {
&:focus,
&:active {
@content
}
@include hover { @content }
}

3
scss/mixins/_label.scss
View File

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

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

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

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

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

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

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