Apply button hover effect on focus as well

// FREEBIE
This commit is contained in:
lilia 2016-04-07 12:23:12 -07:00
parent 21cb6e0945
commit 4bd266521a
2 changed files with 6 additions and 6 deletions

View file

@ -49,13 +49,13 @@ $border-radius: 5px;
}
@mixin header-icon-white($svg) {
@include color-svg($svg, rgba(255,255,255, 0.8));
&:hover {
&:focus, &:hover {
@include color-svg($svg, white);
}
}
@mixin header-icon-black($svg) {
@include color-svg($svg, rgba(0,0,0, 0.5));
&:hover {
&:focus, &:hover {
@include color-svg($svg, black);
}
}

View file

@ -70,7 +70,7 @@ a {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.inactive button.back:hover {
.inactive button.back:focus, .inactive button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
@ -79,7 +79,7 @@ button.back {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
button.back:hover {
button.back:focus, button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
@ -108,7 +108,7 @@ button.back {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.inactive .menu .hamburger:hover {
.inactive .menu .hamburger:focus, .inactive .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
@ -123,7 +123,7 @@ button.back {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.menu .hamburger:hover {
.menu .hamburger:focus, .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }