JSFiddle - React, Tailwind, and code Playground
by DenimTornado
HTML
<div class="yashare-auto-init" data-yashareLink="<% $data_url %>" data-yashareTitle="<% $data_name %>" data-yashareDescription="<% $data_text %>" data-yashareQuickServices="facebook,twitter,odnoklassniki,gplus,vkontakte,moimir" data-yashareTheme="counter" data-yashareType="big"></div>
CSS
.b-share-form-button {
background: url("//yandex.st/share/static/b-share-form-button.png") 0px -20px repeat-x;
border: none;
color: #000!important;
cursor: default;
display: inline-block;
font: 86% / 17px Verdana, Arial, sans-serif;
height: 19px;
margin: 0px 3px;
outline: none;
padding: 0px 4px;
position: relative;
text-decoration: none!important;
white-space: nowrap;
}
.b-share-form-button:link:hover,
.b-share-form-button:visited:hover {
color: #000!important;
}
.b-share-form-button__before,
.b-share-form-button__after {
background: url("//yandex.st/share/static/b-share-form-button.png");
height: 19px;
position: absolute;
width: 3px;
}
.b-share-form-button__before {
margin-left: -7px;
}
.b-share-form-button__after {
background-position: -3px 0px;
margin-left: 4px;
}
.b-share-form-button::-moz-focus-inner {
border: none;
}
button.b-share-form-button .b-share-form-button__before,
button.b-share-form-button .b-share-form-button__after {
margin-top: -1px;
}
@-moz-document url-prefix() {
button.b-share-form-button .b-share-form-button__after {
margin-left: 6px;
margin-top: -2px;
}
button.b-share-form-button .b-share-form-button__before {
margin-left: -9px;
margin-top: -2px;
}
}
SPAN.b-share-form-button:hover,
.b-share-form-button_state_hover {
background-position: 0px -60px;
}
SPAN.b-share-form-button:hover .b-share-form-button__before,
.b-share-form-button_state_hover .b-share-form-button__before {
background-position: 0px -40px;
}
SPAN.b-share-form-button:hover .b-share-form-button__after,
.b-share-form-button_state_hover .b-share-form-button__after {
background-position: -3px -40px;
}
.b-share-form-button_state_pressed,
.b-share-form-button_state_pressed .b-share-form-button_share {
background-position: 0px -100px!important;
}
.b-share-form-button_state_pressed .b-share-form-button__before {
...
JavaScript
(function (W, aD) {
var aE = aD.documentElement;
var ap = {};
function aa(a) {
if (!(a in ap)) {
ap[a] = new RegExp("(^|\\s+)" + a + "(\\s+|$)", "")
}
return ap[a]
}
function Z(a, b) {
return aa(b).test(a.className || "")
}
function am(a, b) {
if (!Z(a, b)) {
a.className += " " + b
}
}
function ar(a, b) {
if (a) {
a.className = a.className.replace(new RegExp("((?:^|\\s+)" + b + "|" + b + "(?:\\s+|$))", "g"), "")
}
}
function aF(a, b) {
if (Z(a, b)) {
ar(a, b)
} else {
am(a, b)
}
}
var V,
ac,
U = V = function (a, f) {
a = a || aD;
var d = a[al] && a[al]("*"),
e = [],
b = 0,
c = d.length;
for (; b < c; b++) {
if (Z(d[b], f)) {
e.push(d[b])
}
}
return e
};
if (aD.querySelectorAll) {
V = function (b, a) {
return b.querySelectorAll("." + a)
}
} else {
if (aD.getElementsByClassName) {
V = function (b, a) {
if (b.getElementsByClassName) {
return b.getElementsByClassName(a)
}
return U(b, a)
}
}
}
function ao(c, a) {
var b = c;
do {
if (Z(b, a)) {
return b
}
} while (b = b.parentNode);
return null
}
if (W.innerHeight) {
ac = function () {
return {
width: W.innerWidth,
height: W.innerHeight
}
}
} else {
if (aE && aE.clientHeight) {
ac = function () {
return {
width: aE.clientWidth,
height: aE.clientHeight
...