rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +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 // 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;
} }

13
scss/_card.scss
View File

@ -20,8 +20,10 @@
margin-left: .75rem; margin-left: .75rem;
} }
} }
.card-link:hover { .card-link {
text-decoration: none; @include hover {
text-decoration: none;
}
} }
@ -89,9 +91,10 @@
.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;

19
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,11 +224,11 @@
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; }
} }
} }

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;

57
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,39 +60,39 @@ 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;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {
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; border-color: $list-group-active-border;
border-color: $list-group-active-border;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading, .list-group-item-heading,
.list-group-item-heading > small, .list-group-item-heading > small,
.list-group-item-heading > .small { .list-group-item-heading > .small {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {
color: $list-group-active-text-color; color: $list-group-active-text-color;
}
} }
} }
} }

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;

71
scss/_navbar.scss
View File

@ -69,9 +69,10 @@
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 {
@ -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;
} }
} }

10
scss/_normalize.scss
View File

@ -94,9 +94,13 @@ 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

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

23
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,15 +59,13 @@
> .disabled { > .disabled {
> span, > span,
> span:hover, > a {
> span:focus, @include plain-hover-focus {
> a, color: $pagination-disabled-color;
> a:hover, cursor: $cursor-disabled;
> a:focus { background-color: $pagination-disabled-bg;
color: $pagination-disabled-color; border-color: $pagination-disabled-border;
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; 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;
} }

6
scss/_tables.scss
View File

@ -99,8 +99,10 @@ 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 {
background-color: $table-bg-hover; @include hover {
background-color: $table-bg-hover;
}
} }
} }

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

@ -5,7 +5,9 @@
#{$parent} { #{$parent} {
background-color: $color; background-color: $color;
} }
a#{$parent}:hover { a#{$parent} {
background-color: darken($color, 10%); @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); // $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 {

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; background-color: $color;
&[href] { &[href] {
&:hover, @include hover-focus {
&:focus {
background-color: darken($color, 10%); background-color: darken($color, 10%);
} }
} }

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

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

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