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:
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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
28
scss/mixins/_hover.scss
Normal 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 }
|
||||
}
|
@@ -4,8 +4,7 @@
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -4,7 +4,9 @@
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
}
|
||||
a#{$parent}:hover {
|
||||
color: darken($color, 10%);
|
||||
a#{$parent} {
|
||||
@include hover {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user