1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00

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

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

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%);
}
}
}

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

View File

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

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

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

View File

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