jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Add css styling to emoji

Browse source
This commit is contained in:
Jonny Barnes 2017-02-03 22:51:49 +00:00
parent dfbfce53f1
commit 8a693e0d32
7 changed files with 57 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
resources/assets/sass/app.scss vendored
View file

@ -19,3 +19,4 @@ html {
@import "note-form";
@import "mapbox";
@import "contacts";
@import "emoji";

51
resources/assets/sass/emoji.scss vendored Normal file
View file

@ -0,0 +1,51 @@
//emoji.scss
//thanks to http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
span[role=img][aria-label],
span[role=img][aria-label] {
position: relative;
}
span[role=img][aria-label]:focus::after,
span[role=img][aria-label]:hover::after {
position: absolute;
display: block;
z-index: 1;
bottom: 1.5em;
left: 0;
max-width: 5em;
padding: 0.5em 0.75em;
border: 0.05em solid rgba(255, 255, 255, 1);
border-radius: 0.2em;
box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
content: attr(aria-label);
background-color: rgba(0, 0, 0, 0.85);
color: rgba(255, 255, 255, 1);
font-size: 80%;
animation: TOOLTIP 0.1s ease-out 1;
}
@keyframes TOOLTIP {
from {
bottom: 0.5em;
background-color: rgba(0, 0, 0, 0);
border: 0.05em solid rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 1);
}
to {
bottom: 1.5em;
background-color: rgba(0, 0, 0, 0.85);
border: 0.05em solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
}
}
@media print {
span[role=img][aria-label]::after {
content: " (" attr(aria-label) ") ";
}
}