social-likes-next
Version:
[](https://travis-ci.org/sapegin/social-likes-next) [](https://www.npmjs.com/package/social-likes-next)
265 lines (264 loc) • 5.92 kB
CSS
.social-likes,
.social-likes__widget,
.social-likes__button {
animation: none 0s ease 0s 1 normal none running;
backface-visibility: visible;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
border: medium none currentColor;
border-collapse: separate;
border-image: none;
border-radius: 0;
border-spacing: 0;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
caption-side: top;
clear: none;
clip: auto;
color: #000;
columns: auto;
column-count: auto;
column-fill: balance;
column-gap: normal;
column-rule: medium none currentColor;
column-span: 1;
column-width: auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: inline;
empty-cells: show;
float: none;
font-family: serif;
font-size: medium;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
height: auto;
hyphens: none;
left: auto;
letter-spacing: normal;
list-style: disc outside none;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
orphans: 2;
outline: medium none invert;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
perspective: none;
perspective-origin: 50% 50%;
position: static;
right: auto;
tab-size: 8;
table-layout: auto;
text-align: left;
text-align-last: auto;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-origin: 50% 50% 0;
transform-style: flat;
transition: none 0s ease 0s;
unicode-bidi: normal;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: auto;
word-spacing: normal;
z-index: auto;
all: initial;
box-sizing: border-box;
}
.social-likes::before,
.social-likes::after,
.social-likes__widget::before,
.social-likes__widget::after,
.social-likes__button::before,
.social-likes__button::after {
display: none;
}
.social-likes {
opacity: 0;
}
.social-likes_visible {
opacity: 1;
transition: opacity 0.25s ease-in;
}
.social-likes > * {
display: block;
visibility: hidden;
}
.social-likes_visible > * {
visibility: inherit;
}
.social-likes {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 16px;
}
.social-likes__widget {
display: block;
position: relative;
white-space: nowrap;
cursor: pointer;
font-size: inherit;
line-height: inherit;
}
.social-likes__button {
display: block;
text-rendering: optimizeLegibility;
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: inherit;
color: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.social-likes__invisible-button {
display: block;
width: 100%;
height: 100%;
}
.social-likes__icon {
position: absolute;
fill: currentColor;
width: 1em;
height: 1em;
}
.social-likes__widget_notext .social-likes__icon {
position: static;
display: block;
margin: 0.3125em;
}
.social-likes_vertical {
-webkit-flex-direction: column;
flex-direction: column;
}
.social-likes {
min-height: 36px;
margin: -0.3em;
line-height: 1.35;
}
.social-likes__widget {
margin: 0.3em;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-radius: 0.1875em;
}
.social-likes__widget:hover,
.social-likes__widget:active,
.social-likes__widget:focus,
.social-likes__widget:hover .social-likes__icon,
.social-likes__widget:active .social-likes__icon,
.social-likes__widget:focus .social-likes__icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
.social-likes__button {
padding: 0.1875em 0.4em 0.25em 1.7em;
vertical-align: middle;
font-size: 0.875em;
font-weight: normal;
}
.social-likes__icon {
top: 0.25em;
left: 0.25em;
}
.social-likes_vertical .social-likes__widget {
width: 10em;
}
.social-likes__widget_facebook:hover,
.social-likes__widget_facebook:active,
.social-likes__widget_facebook:focus {
background: #425497;
border-color: #425497;
}
.social-likes__icon_facebook {
color: #425497;
}
.social-likes__widget_twitter:hover,
.social-likes__widget_twitter:active,
.social-likes__widget_twitter:focus {
background: #00b7ec;
border-color: #00b7ec;
}
.social-likes__icon_twitter {
color: #00b7ec;
}
.social-likes__widget_plusone:hover,
.social-likes__widget_plusone:active,
.social-likes__widget_plusone:focus {
background: #dd4241;
border-color: #dd4241;
}
.social-likes__icon_plusone {
color: #dd4241;
}
.social-likes__widget_vkontakte:hover,
.social-likes__widget_vkontakte:active,
.social-likes__widget_vkontakte:focus {
background: #526e8f;
border-color: #526e8f;
}
.social-likes__icon_vkontakte {
color: #526e8f;
}
.social-likes__widget_odnoklassniki:hover,
.social-likes__widget_odnoklassniki:active,
.social-likes__widget_odnoklassniki:focus {
background: #f6903b;
border-color: #f6903b;
}
.social-likes__icon_odnoklassniki {
color: #f6903b;
}
.social-likes__widget_pinterest:hover,
.social-likes__widget_pinterest:active,
.social-likes__widget_pinterest:focus {
background: #cc002b;
border-color: #cc002b;
}
.social-likes__icon_pinterest {
color: #cc002b;
}
.social-likes__widget_telegram:hover,
.social-likes__widget_telegram:active,
.social-likes__widget_telegram:focus {
background: #34abde;
border-color: #34abde;
}
.social-likes__icon_telegram {
color: #34abde;
}
.social-likes__widget_linkedin:hover,
.social-likes__widget_linkedin:active,
.social-likes__widget_linkedin:focus {
background: #0077b5;
border-color: #0077b5;
}
.social-likes__icon_linkedin {
color: #0077b5;
}