Add css styling to emoji
This commit is contained in:
parent
dfbfce53f1
commit
8a693e0d32
7 changed files with 57 additions and 2 deletions
|
@ -1,5 +1,8 @@
|
|||
# Changelog
|
||||
|
||||
## Version {next}
|
||||
- Add css for emoji labels
|
||||
|
||||
## Version 0.2 (2017-02-03)
|
||||
- Update `syndicate-to` property to `mp-syndicate-to`
|
||||
- Add my emoji-a11y dependency
|
||||
|
|
2
public/assets/css/app.css
vendored
2
public/assets/css/app.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../../../resources/assets/sass/app.scss","../../../resources/assets/sass/layout.scss","../../../resources/assets/sass/styles.scss","../../../resources/assets/sass/pagination.scss","../../../resources/assets/sass/note-form.scss","../../../resources/assets/sass/mapbox.scss","../../../resources/assets/sass/contacts.scss"],"names":[],"mappings":"AAIA,KACI,sBACA,cAAe,CAClB,qBAKG,kBAAmB,CACtB,KCVG,eACA,cACA,iBACA,kBACA,oBAAqB,CACxB,WAGG,iBAAkB,CACrB,SAGG,gBAAiB,CACpB,MAGG,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,qBAAsB,CACzB,eAGG,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,yBACA,AADA,8BACA,gBAAiB,CACpB,cAGG,oBACA,AADA,aACA,yBAAmB,AAAnB,kBAAmB,CACtB,kBAGG,gBAAiB,CACpB,iBAGG,qBACA,WAAY,CACf,aAGG,eACA,yBAA0B,CAC7B,OAGG,eAAgB,CACnB,cAGG,eAAgB,CACnB,WAGG,eACA,cACA,iBAAkB,CACrB,sBAGG,cAAe,CAClB,sBAGG,iBACA,cAAe,CAClB,KClEG,6JAWc,CACjB,EAGG,qBACA,wBACA,UAAW,CACd,gBAGG,kBAAmB,CACtB,MAGG,WACA,UAAW,CACd,OAGG,iBACA,iBAAkB,CACrB,WAGG,kBAAmB,CACtB,UAGG,YACA,WAAY,CACf,YC1CG,WACA,YACA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,yBACA,AADA,8BACA,yBAAmB,AAAnB,kBAAmB,CACtB,eAGG,oBAAqB,CACxB,SCVG,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,qBAAsB,CACzB,0BAGG,aACI,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,cAAe,CAClB,CAGL,0BACI,sBACI,UAAW,CACd,CAGL,eACI,UACA,oBACA,gBAAiB,CACpB,oDAIG,mBAAO,AAAP,MAAO,CACV,kBAGG,qBAAsB,CACzB,QAGG,mBAAoB,CACvB,KCnCG,eACA,YAAa,CAChB,QAGG,y4HACA,wBACA,WACA,WAAY,CACf,UAGG,kBACA,MACA,OACA,iBACA,cAAe,CAClB,gBAGG,gBACA,gBAAiB,CACpB,SCtBG,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,eACA,6BAA8B,CACjC,aAGG,oBACA,YACA,YAAa,CAChB","file":"app.css"}
|
||||
{"version":3,"sources":["../../../resources/assets/sass/app.scss","../../../resources/assets/sass/layout.scss","../../../resources/assets/sass/styles.scss","../../../resources/assets/sass/pagination.scss","../../../resources/assets/sass/note-form.scss","../../../resources/assets/sass/mapbox.scss","../../../resources/assets/sass/contacts.scss","../../../resources/assets/sass/emoji.scss"],"names":[],"mappings":"AAIA,KACI,sBACA,cAAe,CAClB,qBAKG,kBAAmB,CACtB,KCVG,eACA,cACA,iBACA,kBACA,oBAAqB,CACxB,WAGG,iBAAkB,CACrB,SAGG,gBAAiB,CACpB,MAGG,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,qBAAsB,CACzB,eAGG,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,yBACA,AADA,8BACA,gBAAiB,CACpB,cAGG,oBACA,AADA,aACA,yBAAmB,AAAnB,kBAAmB,CACtB,kBAGG,gBAAiB,CACpB,iBAGG,qBACA,WAAY,CACf,aAGG,eACA,yBAA0B,CAC7B,OAGG,eAAgB,CACnB,cAGG,eAAgB,CACnB,WAGG,eACA,cACA,iBAAkB,CACrB,sBAGG,cAAe,CAClB,sBAGG,iBACA,cAAe,CAClB,KClEG,6JAWc,CACjB,EAGG,qBACA,wBACA,UAAW,CACd,gBAGG,kBAAmB,CACtB,MAGG,WACA,UAAW,CACd,OAGG,iBACA,iBAAkB,CACrB,WAGG,kBAAmB,CACtB,UAGG,YACA,WAAY,CACf,YC1CG,WACA,YACA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,yBACA,AADA,8BACA,yBAAmB,AAAnB,kBAAmB,CACtB,eAGG,oBAAqB,CACxB,SCVG,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,qBAAsB,CACzB,0BAGG,aACI,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,cAAe,CAClB,CAGL,0BACI,sBACI,UAAW,CACd,CAGL,eACI,UACA,oBACA,gBAAiB,CACpB,oDAIG,mBAAO,AAAP,MAAO,CACV,kBAGG,qBAAsB,CACzB,QAGG,mBAAoB,CACvB,KCnCG,eACA,YAAa,CAChB,QAGG,y4HACA,wBACA,WACA,WAAY,CACf,UAGG,kBACA,MACA,OACA,iBACA,cAAe,CAClB,gBAGG,gBACA,gBAAiB,CACpB,SCtBG,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,mBACA,eACA,6BAA8B,CACjC,aAGG,oBACA,YACA,YAAa,CAChB,sDCPG,iBAAkB,CACrB,gFAIG,kBACA,cACA,UACA,aACA,OACA,cACA,qBACA,yBACA,oBACA,oCACA,yBACA,kCACA,WACA,cACA,0CAAkC,AAAlC,iCAAkC,CACrC,2BAGG,KACI,aACA,6BACA,wCACA,0BACA,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,mCAAgD,CAAA,CAIxD,AApBC,mBAGG,KACI,aACA,6BACA,wCACA,0BACA,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,mCAAgD,CAAA,CAIxD,aACI,kCACI,kCAAmC,CACtC,CAAA","file":"app.css"}
|
1
resources/assets/sass/app.scss
vendored
1
resources/assets/sass/app.scss
vendored
|
@ -19,3 +19,4 @@ html {
|
|||
@import "note-form";
|
||||
@import "mapbox";
|
||||
@import "contacts";
|
||||
@import "emoji";
|
||||
|
|
51
resources/assets/sass/emoji.scss
vendored
Normal file
51
resources/assets/sass/emoji.scss
vendored
Normal 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) ") ";
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue