mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Apply button hover effect on focus as well

Browse source 
// 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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
stylesheets/_variables.scss
View file

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

8
stylesheets/manifest.css
View file

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