Flat skin draft.
Artem Sapegin
parent
788d20bf97
commit
39e6b8bc3d
|
|
@ -0,0 +1,255 @@
|
|||
.social-likes,
|
||||
.social-likes__widget {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-indent: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
word-spacing: 0;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.social-likes {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.social-likes li {
|
||||
display: inline-block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.social-likes_vertical li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.social-likes__widget {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.social-likes__widget:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-likes__button,
|
||||
.social-likes__counter {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.social-likes__button,
|
||||
.social-likes__counter {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*float: left;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.social-likes__button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.social-likes__button:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.social-likes__icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.social-likes__counter {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.social-likes__close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.social-likes__close:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-likes_vertical .social-likes__widget {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.social-likes_notext .social-likes__button {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.social-likes_single-w {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.social-likes_single {
|
||||
position: absolute;
|
||||
display: none;
|
||||
text-align: left;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.social-likes__button_single {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-likes,
|
||||
.social-likes__widget {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.social-likes {
|
||||
margin: -6px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.social-likes__widget {
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.social-likes__button,
|
||||
.social-likes__counter {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Trebuchet MS", "Helvetica Neue", Tahoma, sans-serif;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.social-likes__button {
|
||||
padding: 1px 10px 1px 28px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.social-likes__icon {
|
||||
top: 2px;
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.social-likes__counter {
|
||||
padding: 1px 4px;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.social-likes__close {
|
||||
padding: 2px 4px;
|
||||
font: 16px Verdana, Geneva, Tahoma, sans-serif;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.social-likes__close:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.social-likes_vertical {
|
||||
margin: -12px -6px;
|
||||
}
|
||||
|
||||
.social-likes_vertical .social-likes__widget {
|
||||
margin: 12px 6px;
|
||||
}
|
||||
|
||||
.social-likes_vertical .social-likes__button {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.social-likes_vertical .social-likes__counter {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.social-likes_notext .social-likes__button {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.social-likes_single {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
padding: 6px 6px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.social-likes_single .social-likes__widget:first-of-type {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.social-likes__button_single {
|
||||
background: #87c44d;
|
||||
}
|
||||
|
||||
.social-likes__icon_single {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PGNpcmNsZSBmaWxsPSIjZmZmIiBjeD0iMTIuNSIgY3k9IjExIiByPSIyIi8+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTEyLjUgMTljLTIuMTM3IDAtNC4xNDYtLjgzMy01LjY1Ni0yLjM0NWwyLjEyMi0yLjEyMWMuOTQ0Ljk0NSAyLjIgMS40NjYgMy41MzQgMS40NjYgMi4wMjUgMCAzLjgzNi0xLjIwOCA0LjYxNi0zLjA3N2wuMzg1LS45MjNoNS40OTl2M2gtMy41N2MtMS40MTYgMi40NTktNC4wMzcgNC02LjkzIDR6TTcuNSAxMGgtNS41di0zaDMuNTcyYzEuNDE1LTIuNDU5IDQuMDM2LTQgNi45MjgtNCAyLjEzNyAwIDQuMTQ2LjgzMyA1LjY1NyAyLjM0NWwtMi4xMjIgMi4xMjFjLS45NDQtLjk0NS0yLjE5OS0xLjQ2Ni0zLjUzNS0xLjQ2Ni0yLjAyMyAwLTMuODM2IDEuMjA4LTQuNjE1IDMuMDc3bC0uMzg1LjkyM3oiLz48L2c+PC9zdmc+");
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.social-likes__button_facebook {
|
||||
background: #3d5b95;
|
||||
}
|
||||
|
||||
.social-likes__icon_facebook {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE1Ljg0MiAyMi4wNDF2LTcuOTA1aDIuNjUzbC4zOTctMy4wODFoLTMuMDUxdi0xLjk2OGMwLS44OTIuMjQ4LTEuNSAxLjUyNi0xLjVoMS42MzN2LTIuNzU2Yy0uMjgyLS4wMzctMS4yNTEtLjEyMS0yLjM3Ny0uMTIxLTIuMzUzIDAtMy45NjMgMS40MzYtMy45NjMgNC4wNzJ2Mi4yNzJoLTIuNjZ2My4wODFoMi42NnY3LjkwNWgzLjE4MnoiLz48L3N2Zz4=");
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.social-likes__button_twitter {
|
||||
background: #24aadd;
|
||||
}
|
||||
|
||||
.social-likes__icon_twitter {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxLjUxNyA1LjdjLS42NDkuMjg4LTEuMzQ4LjQ4My0yLjA4MS41Ny43NDgtLjQ0OCAxLjMyMy0xLjE1OSAxLjU5NC0yLjAwNS0uNzAxLjQxNi0xLjQ3Ny43MTctMi4zMDIuODc5LS42NjItLjcwNC0xLjYwNC0xLjE0NC0yLjY0Ni0xLjE0NC0yLjAwMSAwLTMuNjI0IDEuNjIzLTMuNjI0IDMuNjI1IDAgLjI4NC4wMzIuNTYuMDk0LjgyNi0zLjAxMi0uMTUyLTUuNjgyLTEuNTk1LTcuNDctMy43ODctLjMxMi41MzUtLjQ5IDEuMTU4LS40OSAxLjgyMiAwIDEuMjU3LjY0IDIuMzY3IDEuNjEyIDMuMDE3LS41OTUtLjAyLTEuMTUzLS4xODMtMS42NDItLjQ1NGwtLjAwMS4wNDVjMCAxLjc1NiAxLjI0OSAzLjIyMSAyLjkwNyAzLjU1NC0uMzA0LjA4My0uNjI0LjEyNy0uOTU0LjEyNy0uMjM0IDAtLjQ2MS0uMDIzLS42ODMtLjA2NS40NjEgMS40NCAxLjggMi40ODggMy4zODYgMi41MTctMS4yNC45NzItMi44MDMgMS41NTEtNC41MDEgMS41NTEtLjI5MiAwLS41ODEtLjAxNy0uODY0LS4wNTEgMS42MDQgMS4wMjggMy41MDggMS42MjggNS41NTUgMS42MjggNi42NjcgMCAxMC4zMTItNS41MjIgMTAuMzEyLTEwLjMxMmwtLjAxMi0uNDY5Yy43MS0uNTEgMS4zMjQtMS4xNDggMS44MS0xLjg3NHoiLz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.social-likes__button_plusone {
|
||||
background: #d23e30;
|
||||
}
|
||||
|
||||
.social-likes__icon_plusone {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuMDg4IDE1LjcyM2wtMS4xMzktLjg4N2MtLjM0Ni0uMjg1LS44Mi0uNjY1LS44Mi0xLjM2IDAtLjcuNDc1LTEuMTQ1Ljg4NC0xLjU1NSAxLjMyNy0xLjA0NiAyLjY1MS0yLjE1NiAyLjY1MS00LjUwMSAwLTIuMTQzLTEuMTQ0LTMuMzgxLTEuOTItNC4wNTRoMS43ODlsMS44NjktMS4zNjZoLTYuNTA0Yy0xLjcwNSAwLTMuODUzLjI1NC01LjY1MiAxLjc0MmwtLjI0Ni4yMjZ2Ny44MTdjLjg2Ni43MjEgMi4wMzMgMS4xODIgMy40NjcgMS4xODIuMzE1IDAgLjY2Mi0uMDMzIDEuMDExLS4wNjQtLjE1OC4zOC0uMzE1LjY5OC0uMzE1IDEuMjM3IDAgLjk4MS41MDQgMS41ODMuOTQ2IDIuMTUzLTEuMjA4LjA4Mi0zLjMwNS4yMS01LjEwOS45ODV2MS44NTFjLjY1Mi0uODg3IDEuNjg0LTEuMjcyIDIuMTQxLTEuNDM4IDEuMzI2LS40NDUgMy4wMzEtLjUwOSAzLjMxNi0uNTA5LjMxNCAwIC40NzMgMCAuNzI1LjAzMiAyLjQwMSAxLjcxMiAzLjc4MyAyLjU2NSAzLjc4MyA0LjE4NiAwIC4xNzEtLjAxNi4zMzctLjA0NS41MDFoMS43OTNjLjIzOS0uNTY1LjM2Ni0xLjE1My4zNjYtMS43MzkgMC0yLjE4Ny0xLjYwMi0zLjI2Ni0yLjk5MS00LjQzOXptLTQuMDMtMy44NThjLTIuNzE2IDAtMy45MDUtMy4zMDYtMy45MDUtNS40MjcgMC0uODI3LjE1Ni0xLjY4MS42OTMtMi4zNDguNTA3LS42MzMgMS4zOTEtMS4wNDYgMi4yMTItMS4wNDYgMi42MiAwIDMuODcyIDMuNTUxIDMuODcyIDUuODMyIDAgLjQ1OC0uMTYxIDEuMzUyLS43NTQgMi4wMzEtLjUyLjU5Mi0xLjMyOS45NTgtMi4xMTguOTU4eiIvPjwvc3ZnPg==");
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.social-likes__button_vkontakte {
|
||||
background: #587e9f;
|
||||
}
|
||||
|
||||
.social-likes__icon_vkontakte {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGQ9Ik0xMi40NjMgMTYuOTVoMS4yMzNzLjM3Mi0uMDQxLjU2My0uMjQ2Yy4xNzQtLjE4OC4xNjktLjU0MS4xNjktLjU0MXMtLjAyNC0xLjY1NC43NDMtMS44OThjLjc1OC0uMjQgMS43MjkgMS42IDIuNzYgMi4zMDcuNzc5LjUzNSAxLjM3Mi40MTggMS4zNzIuNDE4bDIuNzU1LS4wMzlzMS40NDEtLjA4OC43NTgtMS4yMjNjLS4wNTgtLjA5Mi0uMzk4LS44MzgtMi4wNS0yLjM2OS0xLjcyOC0xLjYwNC0xLjQ5Ny0xLjM0NC41ODctNC4xMTcgMS4yNjYtMS42ODkgMS43NzEtMi43MjEgMS42MTUtMy4xNjItLjE1Mi0uNDIxLTEuMDg0LS4zMTEtMS4wODQtLjMxMWwtMy4xMDIuMDJzLS4yMy0uMDMxLS40MDIuMDdjLS4xNjUuMS0uMjczLjMzMy0uMjczLjMzM3MtLjQ5IDEuMzA4LTEuMTQ1IDIuNDJjLTEuMzgyIDIuMzQ1LTEuOTM0IDIuNDctMi4xNiAyLjMyMy0uNTI0LS4zNC0uMzkzLTEuMzYzLS4zOTMtMi4wOTIgMC0yLjI3Mi4zNDQtMy4yMjEtLjY3Mi0zLjQ2NS0uMzM4LS4wODItLjU4Ni0uMTM2LTEuNDQ5LS4xNDUtMS4xMDUtLjAxMi0yLjA0My4wMDQtMi41NzIuMjYzLS4zNTQuMTczLS42MjYuNTU4LS40Ni41OC4yMDQuMDI3LjY2OS4xMjYuOTE1LjQ2LjMxOS40MzQuMzA4IDEuNDA0LjMwOCAxLjQwNHMuMTg0IDIuNjc2LS40MjcgMy4wMDhjLS40MTguMjI5LS45OTEtLjIzNi0yLjIyMy0yLjM2NS0uNjMxLTEuMDktMS4xMDYtMi4yOTUtMS4xMDYtMi4yOTVzLS4wOTMtLjIyNS0uMjU3LS4zNDZjLS4xOTgtLjE0NS0uNDc2LS4xOTItLjQ3Ni0uMTkybC0yLjk0OS4wMTlzLS40NDEuMDE0LS42MDQuMjA2Yy0uMTQ1LjE3LS4wMTIuNTI0LS4wMTIuNTI0czIuMzA4IDUuNCA0LjkyMSA4LjEyYzIuMzk2IDIuNDk1IDUuMTE3IDIuMzMxIDUuMTE3IDIuMzMxeiIvPjwvc3ZnPg==");
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.social-likes_notext .social-likes__icon_vkontakte {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.social-likes__button_pinterest {
|
||||
background: #cb132d;
|
||||
}
|
||||
|
||||
.social-likes__icon_pinterest {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyLjY4NiAyLjYxOWMtNC41MjMgMC04LjE5MSAzLjY2OC04LjE5MSA4LjE5IDAgMy4zNTQgMi4wMTcgNi4yMzUgNC45MDIgNy41MDEtLjAyMi0uNTctLjAwNC0xLjI1OC4xNDMtMS44OGwxLjA1NS00LjQ2NHMtLjI2My0uNTIyLS4yNjMtMS4yOTVjMC0xLjIxNC43MDQtMi4xMiAxLjU3OS0yLjEyLjc0NiAwIDEuMTA2LjU2IDEuMTA2IDEuMjI5IDAgLjc0OS0uNDc4IDEuODctLjcyNCAyLjkwNi0uMjA1Ljg2OS40MzYgMS41NzkgMS4yOTMgMS41NzkgMS41NTEgMCAyLjU5Ny0xLjk5NSAyLjU5Ny00LjM1NSAwLTEuNzk1LTEuMjA4LTMuMTM5LTMuNDA5LTMuMTM5LTIuNDgzIDAtNC4wMzEgMS44NTItNC4wMzEgMy45MjEgMCAuNzE2LjIxIDEuMjE4LjU0IDEuNjA3LjE1MS4xNzkuMTczLjI1Mi4xMTguNDU3bC0uMTY4LjY1NWMtLjA1NS4yMDgtLjIyMy4yODItLjQwOS4yMDgtMS4xNDUtLjQ3LTEuNjc4LTEuNzIyLTEuNjc4LTMuMTMxIDAtMi4zMjYgMS45NjItNS4xMTUgNS44NTQtNS4xMTUgMy4xMjcgMCA1LjE4NSAyLjI2MiA1LjE4NSA0LjY5IDAgMy4yMTMtMS43ODYgNS42MTMtNC40MiA1LjYxMy0uODg0IDAtMS43MTYtLjQ3OC0yLjAwMS0xLjAyMSAwIDAtLjQ3NSAxLjg4OC0uNTc2IDIuMjUzLS4xNzQuNjMyLS41MTQgMS4yNjItLjgyNCAxLjc1NC43MzcuMjIgMS41MTUuMzM4IDIuMzIyLjMzOCA0LjUyMSAwIDguMTg5LTMuNjY3IDguMTg5LTguMTlzLTMuNjY4LTguMTkxLTguMTg5LTguMTkxeiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
|
@ -31,7 +31,8 @@ module.exports = function(grunt) {
|
|||
stylus: {
|
||||
compile: {
|
||||
files: {
|
||||
'../social-likes_classic.css': 'styles/skins/classic.styl'
|
||||
'../social-likes_flat.css': 'styles/flat/index.styl',
|
||||
'../social-likes_classic.css': 'styles/classic/index.styl'
|
||||
},
|
||||
options: {
|
||||
'urlfunc': 'embedurl'
|
||||
|
|
@ -63,11 +64,24 @@ module.exports = function(grunt) {
|
|||
banner: '<%= banner %>'
|
||||
},
|
||||
dist: {
|
||||
src: '../social-likes_classic.css',
|
||||
dest: '../social-likes_classic.css'
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: '../*.css',
|
||||
dest: '../'
|
||||
}
|
||||
},
|
||||
},
|
||||
svgmin: {
|
||||
dist: {
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: 'styles/flat/icons_src/*.svg',
|
||||
dest: 'styles/flat/icons/'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
livereload: true
|
||||
},
|
||||
stylus: {
|
||||
files: 'styles/**',
|
||||
tasks: ['stylus:compile', 'autoprefixer']
|
||||
|
|
@ -80,7 +94,7 @@ module.exports = function(grunt) {
|
|||
}
|
||||
});
|
||||
|
||||
grunt.registerTask('default', ['jshint', 'uglify', 'imgo', 'stylus', 'autoprefixer', 'csso']);
|
||||
grunt.registerTask('build', ['uglify', 'imgo', 'stylus', 'autoprefixer', 'csso']);
|
||||
grunt.registerTask('default', ['jshint', 'uglify', 'imgo', 'svgmin', 'stylus', 'autoprefixer', 'csso']);
|
||||
grunt.registerTask('build', ['uglify', 'imgo', 'svgmin', 'stylus', 'autoprefixer', 'csso']);
|
||||
|
||||
};
|
||||
|
|
@ -3,16 +3,25 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Social Likes</title>
|
||||
<link href="../social-likes_classic.css" rel="stylesheet">
|
||||
<!-- <link href="../social-likes_classic.css" rel="stylesheet"> -->
|
||||
<link href="../social-likes_flat.css" rel="stylesheet">
|
||||
<!--script src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script-->
|
||||
<script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="social-likes.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family:Arial;
|
||||
}
|
||||
.dark-bg {
|
||||
margin:0 -20px;
|
||||
padding:20px;
|
||||
background:#333;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<h3>Standard</h3>
|
||||
<ul class="social-likes" data-url="http://mail.ru/">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
|
|
@ -25,16 +34,57 @@
|
|||
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
|
||||
</ul>
|
||||
|
||||
<h3>Standard (dark background)</h3>
|
||||
<div class="dark-bg">
|
||||
<ul class="social-likes" data-url="http://mail.ru/">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
||||
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
||||
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
|
||||
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
|
||||
<li class="plusone" data-counter="http://sapegin.ru/api/social-likes/googleplusonecount.php?url={url}&callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
|
||||
<li class="livejournal" title="Опубликовать ссылку в ЖЖ">LiveJournal</li>
|
||||
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td style="vertical-align:top">
|
||||
<h3>Vertical</h3>
|
||||
<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
||||
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
||||
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
|
||||
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
|
||||
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
|
||||
<li class="livejournal" data-title="Cвой текст для ЖЖ" title="Опубликовать ссылку в ЖЖ">LiveJournal</li>
|
||||
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style="padding-left:40px">
|
||||
<h3 style="margin-bottom:3px">Vertical (dark background)</h3>
|
||||
<div class="dark-bg">
|
||||
<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
||||
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
||||
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
|
||||
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
|
||||
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
|
||||
<li class="livejournal" data-title="Cвой текст для ЖЖ" title="Опубликовать ссылку в ЖЖ">LiveJournal</li>
|
||||
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Vertical (no counters)</h3>
|
||||
<ul class="social-likes social-likes_vertical" data-url="http://mail.ru/" data-title="Свой текст" data-counters="no">
|
||||
<ul class="social-likes social-likes_vertical" data-counters="no">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
||||
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
||||
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
|
||||
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
|
||||
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
|
||||
<li class="livejournal" data-title="Cвой текст для ЖЖ" title="Опубликовать ссылку в ЖЖ">LiveJournal</li>
|
||||
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
|
||||
</ul>
|
||||
|
||||
<h3>Single button</h3>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"grunt-imgo": "~0.1.0",
|
||||
"grunt-csso": "~0.4.1",
|
||||
"matchdep": "~0.1.1",
|
||||
"grunt-autoprefixer": "~0.3.0"
|
||||
"grunt-autoprefixer": "~0.3.0",
|
||||
"grunt-svgmin": "~0.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 145 B After Width: | Height: | Size: 145 B |
|
Before Width: | Height: | Size: 489 B After Width: | Height: | Size: 489 B |
|
Before Width: | Height: | Size: 699 B After Width: | Height: | Size: 699 B |
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 414 B |
|
Before Width: | Height: | Size: 814 B After Width: | Height: | Size: 814 B |
|
Before Width: | Height: | Size: 439 B After Width: | Height: | Size: 439 B |
|
Before Width: | Height: | Size: 759 B After Width: | Height: | Size: 759 B |
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
|
Before Width: | Height: | Size: 627 B After Width: | Height: | Size: 627 B |
|
|
@ -1,4 +1,5 @@
|
|||
// Social Likes by Artem Sapegin. http://sapegin.github.io/social-likes/
|
||||
// Classic skin
|
||||
|
||||
@import '../base'
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><path fill="#fff" d="M15.842 22.041v-7.905h2.653l.397-3.081h-3.051v-1.968c0-.892.248-1.5 1.526-1.5h1.633v-2.756c-.282-.037-1.251-.121-2.377-.121-2.353 0-3.963 1.436-3.963 4.072v2.272h-2.66v3.081h2.66v7.905h3.182z"/></svg>
|
||||
|
After Width: | Height: | Size: 284 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><path fill="#fff" d="M12.686 2.619c-4.523 0-8.191 3.668-8.191 8.19 0 3.354 2.017 6.235 4.902 7.501-.022-.57-.004-1.258.143-1.88l1.055-4.464s-.263-.522-.263-1.295c0-1.214.704-2.12 1.579-2.12.746 0 1.106.56 1.106 1.229 0 .749-.478 1.87-.724 2.906-.205.869.436 1.579 1.293 1.579 1.551 0 2.597-1.995 2.597-4.355 0-1.795-1.208-3.139-3.409-3.139-2.483 0-4.031 1.852-4.031 3.921 0 .716.21 1.218.54 1.607.151.179.173.252.118.457l-.168.655c-.055.208-.223.282-.409.208-1.145-.47-1.678-1.722-1.678-3.131 0-2.326 1.962-5.115 5.854-5.115 3.127 0 5.185 2.262 5.185 4.69 0 3.213-1.786 5.613-4.42 5.613-.884 0-1.716-.478-2.001-1.021 0 0-.475 1.888-.576 2.253-.174.632-.514 1.262-.824 1.754.737.22 1.515.338 2.322.338 4.521 0 8.189-3.667 8.189-8.19s-3.668-8.191-8.189-8.191z"/></svg>
|
||||
|
After Width: | Height: | Size: 829 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><path fill="#fff" d="M9.088 15.723l-1.139-.887c-.346-.285-.82-.665-.82-1.36 0-.7.475-1.145.884-1.555 1.327-1.046 2.651-2.156 2.651-4.501 0-2.143-1.144-3.381-1.92-4.054h1.789l1.869-1.366h-6.504c-1.705 0-3.853.254-5.652 1.742l-.246.226v7.817c.866.721 2.033 1.182 3.467 1.182.315 0 .662-.033 1.011-.064-.158.38-.315.698-.315 1.237 0 .981.504 1.583.946 2.153-1.208.082-3.305.21-5.109.985v1.851c.652-.887 1.684-1.272 2.141-1.438 1.326-.445 3.031-.509 3.316-.509.314 0 .473 0 .725.032 2.401 1.712 3.783 2.565 3.783 4.186 0 .171-.016.337-.045.501h1.793c.239-.565.366-1.153.366-1.739 0-2.187-1.602-3.266-2.991-4.439zm-4.03-3.858c-2.716 0-3.905-3.306-3.905-5.427 0-.827.156-1.681.693-2.348.507-.633 1.391-1.046 2.212-1.046 2.62 0 3.872 3.551 3.872 5.832 0 .458-.161 1.352-.754 2.031-.52.592-1.329.958-2.118.958z"/></svg>
|
||||
|
After Width: | Height: | Size: 874 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><circle fill="#fff" cx="12.5" cy="11" r="2"/><g fill="#fff"><path d="M12.5 19c-2.137 0-4.146-.833-5.656-2.345l2.122-2.121c.944.945 2.2 1.466 3.534 1.466 2.025 0 3.836-1.208 4.616-3.077l.385-.923h5.499v3h-3.57c-1.416 2.459-4.037 4-6.93 4zM7.5 10h-5.5v-3h3.572c1.415-2.459 4.036-4 6.928-4 2.137 0 4.146.833 5.657 2.345l-2.122 2.121c-.944-.945-2.199-1.466-3.535-1.466-2.023 0-3.836 1.208-4.615 3.077l-.385.923z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 483 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><path fill="#fff" d="M21.517 5.7c-.649.288-1.348.483-2.081.57.748-.448 1.323-1.159 1.594-2.005-.701.416-1.477.717-2.302.879-.662-.704-1.604-1.144-2.646-1.144-2.001 0-3.624 1.623-3.624 3.625 0 .284.032.56.094.826-3.012-.152-5.682-1.595-7.47-3.787-.312.535-.49 1.158-.49 1.822 0 1.257.64 2.367 1.612 3.017-.595-.02-1.153-.183-1.642-.454l-.001.045c0 1.756 1.249 3.221 2.907 3.554-.304.083-.624.127-.954.127-.234 0-.461-.023-.683-.065.461 1.44 1.8 2.488 3.386 2.517-1.24.972-2.803 1.551-4.501 1.551-.292 0-.581-.017-.864-.051 1.604 1.028 3.508 1.628 5.555 1.628 6.667 0 10.312-5.522 10.312-10.312l-.012-.469c.71-.51 1.324-1.148 1.81-1.874z"/></svg>
|
||||
|
After Width: | Height: | Size: 707 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M12.463 16.95h1.233s.372-.041.563-.246c.174-.188.169-.541.169-.541s-.024-1.654.743-1.898c.758-.24 1.729 1.6 2.76 2.307.779.535 1.372.418 1.372.418l2.755-.039s1.441-.088.758-1.223c-.058-.092-.398-.838-2.05-2.369-1.728-1.604-1.497-1.344.587-4.117 1.266-1.689 1.771-2.721 1.615-3.162-.152-.421-1.084-.311-1.084-.311l-3.102.02s-.23-.031-.402.07c-.165.1-.273.333-.273.333s-.49 1.308-1.145 2.42c-1.382 2.345-1.934 2.47-2.16 2.323-.524-.34-.393-1.363-.393-2.092 0-2.272.344-3.221-.672-3.465-.338-.082-.586-.136-1.449-.145-1.105-.012-2.043.004-2.572.263-.354.173-.626.558-.46.58.204.027.669.126.915.46.319.434.308 1.404.308 1.404s.184 2.676-.427 3.008c-.418.229-.991-.236-2.223-2.365-.631-1.09-1.106-2.295-1.106-2.295s-.093-.225-.257-.346c-.198-.145-.476-.192-.476-.192l-2.949.019s-.441.014-.604.206c-.145.17-.012.524-.012.524s2.308 5.4 4.921 8.12c2.396 2.495 5.117 2.331 5.117 2.331z"/></svg>
|
||||
|
After Width: | Height: | Size: 1009 B |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<path id="f_2_" fill="#fff" d="M15.842,22.041v-7.905h2.653l0.397-3.081h-3.051V9.087c0-0.892,0.248-1.5,1.526-1.5L19,7.587
|
||||
V4.831c-0.282-0.037-1.251-0.121-2.377-0.121c-2.353,0-3.963,1.436-3.963,4.072v2.272H10v3.081h2.66v7.905H15.842z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 715 B |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#fff" d="M12.686,2.619c-4.523,0-8.191,3.668-8.191,8.19c0,3.354,2.017,6.235,4.902,7.501
|
||||
c-0.022-0.57-0.004-1.258,0.143-1.88c0.157-0.666,1.055-4.464,1.055-4.464s-0.263-0.522-0.263-1.295c0-1.214,0.704-2.12,1.579-2.12
|
||||
c0.746,0,1.106,0.56,1.106,1.229c0,0.749-0.478,1.87-0.724,2.906c-0.205,0.869,0.436,1.579,1.293,1.579
|
||||
c1.551,0,2.597-1.995,2.597-4.355c0-1.795-1.208-3.139-3.409-3.139c-2.483,0-4.031,1.852-4.031,3.921
|
||||
c0,0.716,0.21,1.218,0.54,1.607c0.151,0.179,0.173,0.252,0.118,0.457c-0.04,0.151-0.13,0.513-0.168,0.655
|
||||
c-0.055,0.208-0.223,0.282-0.409,0.208c-1.145-0.47-1.678-1.722-1.678-3.131c0-2.326,1.962-5.115,5.854-5.115
|
||||
c3.127,0,5.185,2.262,5.185,4.69c0,3.213-1.786,5.613-4.42,5.613c-0.884,0-1.716-0.478-2.001-1.021c0,0-0.475,1.888-0.576,2.253
|
||||
c-0.174,0.632-0.514,1.262-0.824,1.754C11.101,18.882,11.879,19,12.686,19c4.521,0,8.189-3.667,8.189-8.19
|
||||
C20.875,6.287,17.207,2.619,12.686,2.619z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#fff" d="M9.088,15.723l-1.139-0.887c-0.346-0.285-0.82-0.665-0.82-1.36c0-0.7,0.475-1.145,0.884-1.555
|
||||
c1.327-1.046,2.651-2.156,2.651-4.501c0-2.143-1.144-3.381-1.92-4.054c0.26,0,1.789,0,1.789,0L12.402,2H5.898
|
||||
C4.193,2,2.045,2.254,0.246,3.742C0.161,3.816,0.08,3.892,0,3.968v7.817c0.866,0.721,2.033,1.182,3.467,1.182
|
||||
c0.315,0,0.662-0.033,1.011-0.064c-0.158,0.38-0.315,0.698-0.315,1.237c0,0.981,0.504,1.583,0.946,2.153
|
||||
C3.901,16.375,1.804,16.503,0,17.278v1.851c0.652-0.887,1.684-1.272,2.141-1.438c1.326-0.445,3.031-0.509,3.316-0.509
|
||||
c0.314,0,0.473,0,0.725,0.032c2.401,1.712,3.783,2.565,3.783,4.186c0,0.171-0.016,0.337-0.045,0.501h1.793
|
||||
c0.239-0.565,0.366-1.153,0.366-1.739C12.079,17.975,10.477,16.896,9.088,15.723z M5.058,11.865c-2.716,0-3.905-3.306-3.905-5.427
|
||||
c0-0.827,0.156-1.681,0.693-2.348c0.507-0.633,1.391-1.046,2.212-1.046c2.62,0,3.872,3.551,3.872,5.832
|
||||
c0,0.458-0.161,1.352-0.754,2.031C6.656,11.499,5.847,11.865,5.058,11.865z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<circle fill="#fff" cx="12.5" cy="11" r="2"/>
|
||||
<g>
|
||||
<path fill="#fff" d="M12.5,19c-2.137,0-4.146-0.833-5.656-2.345l2.122-2.121C9.91,15.479,11.166,16,12.5,16
|
||||
c2.025,0,3.836-1.208,4.616-3.077L17.501,12H23v3h-3.57C18.014,17.459,15.393,19,12.5,19z"/>
|
||||
<path fill="#fff" d="M7.5,10H2V7h3.572C6.987,4.541,9.608,3,12.5,3c2.137,0,4.146,0.833,5.657,2.345l-2.122,2.121
|
||||
C15.091,6.521,13.836,6,12.5,6c-2.023,0-3.836,1.208-4.615,3.077L7.5,10z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 925 B |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<path fill="#fff" d="M21.517,5.7c-0.649,0.288-1.348,0.483-2.081,0.57c0.748-0.448,1.323-1.159,1.594-2.005
|
||||
c-0.701,0.416-1.477,0.717-2.302,0.879C18.066,4.44,17.124,4,16.082,4c-2.001,0-3.624,1.623-3.624,3.625
|
||||
c0,0.284,0.032,0.56,0.094,0.826C9.54,8.299,6.87,6.856,5.082,4.664c-0.312,0.535-0.49,1.158-0.49,1.822
|
||||
c0,1.257,0.64,2.367,1.612,3.017C5.609,9.483,5.051,9.32,4.562,9.049c-0.001,0.015-0.001,0.03-0.001,0.045
|
||||
c0,1.756,1.249,3.221,2.907,3.554c-0.304,0.083-0.624,0.127-0.954,0.127c-0.234,0-0.461-0.023-0.683-0.065
|
||||
c0.461,1.44,1.8,2.488,3.386,2.517c-1.24,0.972-2.803,1.551-4.501,1.551c-0.292,0-0.581-0.017-0.864-0.051
|
||||
c1.604,1.028,3.508,1.628,5.555,1.628c6.667,0,10.312-5.522,10.312-10.312c0-0.157-0.004-0.313-0.012-0.469
|
||||
C20.417,7.064,21.031,6.426,21.517,5.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="25px" height="22px" viewBox="0 0 25 22" enable-background="new 0 0 25 22" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M12.463,16.95h1.233c0,0,0.372-0.041,0.563-0.246
|
||||
c0.174-0.188,0.169-0.541,0.169-0.541s-0.024-1.654,0.743-1.898c0.758-0.24,1.729,1.6,2.76,2.307
|
||||
c0.779,0.535,1.372,0.418,1.372,0.418l2.755-0.039c0,0,1.441-0.088,0.758-1.223c-0.058-0.092-0.398-0.838-2.05-2.369
|
||||
c-1.728-1.604-1.497-1.344,0.587-4.117c1.266-1.689,1.771-2.721,1.615-3.162c-0.152-0.421-1.084-0.311-1.084-0.311l-3.102,0.02
|
||||
c0,0-0.23-0.031-0.402,0.07c-0.165,0.1-0.273,0.333-0.273,0.333s-0.49,1.308-1.145,2.42c-1.382,2.345-1.934,2.47-2.16,2.323
|
||||
c-0.524-0.34-0.393-1.363-0.393-2.092c0-2.272,0.344-3.221-0.672-3.465c-0.338-0.082-0.586-0.136-1.449-0.145
|
||||
c-1.105-0.012-2.043,0.004-2.572,0.263c-0.354,0.173-0.626,0.558-0.46,0.58c0.204,0.027,0.669,0.126,0.915,0.46
|
||||
C10.49,6.97,10.479,7.94,10.479,7.94s0.184,2.676-0.427,3.008c-0.418,0.229-0.991-0.236-2.223-2.365
|
||||
c-0.631-1.09-1.106-2.295-1.106-2.295S6.63,6.063,6.466,5.942C6.268,5.797,5.99,5.75,5.99,5.75L3.041,5.769
|
||||
c0,0-0.441,0.014-0.604,0.206c-0.145,0.17-0.012,0.524-0.012,0.524s2.308,5.4,4.921,8.12C9.742,17.114,12.463,16.95,12.463,16.95
|
||||
L12.463,16.95z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,212 @@
|
|||
// Social Likes by Artem Sapegin. http://sapegin.github.io/social-likes/
|
||||
// Flat skin
|
||||
// Design: Genn Osipenko, http://genn.org/
|
||||
|
||||
@import '../base'
|
||||
|
||||
.social-likes,
|
||||
.social-likes__widget {
|
||||
line-height:20px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.social-likes {
|
||||
margin:-6px;
|
||||
line-height:26px;
|
||||
|
||||
&__widget {
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
&__button,
|
||||
&__counter {
|
||||
box-sizing:border-box;
|
||||
font-family:"Trebuchet MS", "Helvetica Neue", Tahoma, sans-serif;
|
||||
line-height:24px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding:1px 10px 1px 28px;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
// transition:border .1s ease-in-out, color .2s ease-in-out;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
top:2px;
|
||||
width:25px;
|
||||
height:22px;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
&__counter {
|
||||
padding:1px 4px;
|
||||
font-size:15px;
|
||||
font-weight:normal;
|
||||
color:#000;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
&__close {
|
||||
padding:2px 4px;
|
||||
font:16px Verdana, Geneva, Tahoma, sans-serif;
|
||||
color:#999;
|
||||
}
|
||||
&__close:hover {
|
||||
color:#111;
|
||||
}
|
||||
|
||||
// Vertical mode
|
||||
&_vertical {
|
||||
margin:-12px -6px;
|
||||
|
||||
.social-likes__widget {
|
||||
margin:12px 6px;
|
||||
}
|
||||
|
||||
.social-likes__button {
|
||||
min-width:170px;
|
||||
}
|
||||
|
||||
.social-likes__counter {
|
||||
min-width:40px;
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
|
||||
// Icons only mode
|
||||
&_notext {
|
||||
.social-likes__button {
|
||||
width:26px;
|
||||
}
|
||||
}
|
||||
|
||||
// Single button mode
|
||||
&_single {
|
||||
top:-6px;
|
||||
left:-6px;
|
||||
padding:6px 6px 4px;
|
||||
background:#fff;
|
||||
box-shadow:0 0 15px hsla(0,0%,0%,.3);
|
||||
}
|
||||
&_single &__widget:first-of-type {
|
||||
margin-right:14px; // Prevent collapse of widget and close button
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Single button
|
||||
.social-likes__button_single {
|
||||
// padding-left:19px;
|
||||
background:#87c44d;
|
||||
}
|
||||
// .social-likes__button_single:hover {
|
||||
// background:#f4f4f4;
|
||||
// }
|
||||
.social-likes__icon_single {
|
||||
background-image:embedurl('icons/single.svg');
|
||||
left:2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Facebook
|
||||
.social-likes__button_facebook {
|
||||
background:#3d5b95;
|
||||
}
|
||||
// .social-likes__button_facebook:hover {
|
||||
// background:#c0cdf3;
|
||||
// }
|
||||
.social-likes__icon_facebook {
|
||||
background-image:embedurl('icons/facebook.svg');
|
||||
top:4px;
|
||||
}
|
||||
|
||||
|
||||
// Twitter
|
||||
.social-likes__button_twitter {
|
||||
background:#24aadd;
|
||||
}
|
||||
// .social-likes__button_twitter:hover {
|
||||
// background:#bfdfed;
|
||||
// }
|
||||
.social-likes__icon_twitter {
|
||||
background-image:embedurl('icons/twitter.svg');
|
||||
}
|
||||
|
||||
|
||||
// Google+
|
||||
.social-likes__button_plusone {
|
||||
// padding-left:12px;
|
||||
background:#d23e30;
|
||||
}
|
||||
// .social-likes__button_plusone:hover {
|
||||
// background:#f4f4f4;
|
||||
// }
|
||||
.social-likes__icon_plusone {
|
||||
background-image:embedurl('icons/plusone.svg');
|
||||
top:4px;
|
||||
}
|
||||
|
||||
|
||||
// Mail.ru
|
||||
// .social-likes__button_mailru {
|
||||
// background:#004584;
|
||||
// }
|
||||
// .social-likes__button_mailru:hover {
|
||||
// background:#001e5d;
|
||||
// }
|
||||
// .social-likes__icon_mailru {
|
||||
// background-image:embedurl('icons/mailru.svg');
|
||||
// }
|
||||
// .social-likes_notext {
|
||||
// .social-likes__icon_mailru {
|
||||
// background-position:2px 2px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Vkontakte
|
||||
.social-likes__button_vkontakte {
|
||||
background:#587e9f;
|
||||
}
|
||||
// .social-likes__button_vkontakte:hover {
|
||||
// background:#4e80ab;
|
||||
// }
|
||||
.social-likes__icon_vkontakte {
|
||||
background-image:embedurl('icons/vkontakte.svg');
|
||||
left:1px;
|
||||
.social-likes_notext & {
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Odnoklassniki
|
||||
// .social-likes__button_odnoklassniki {
|
||||
// background:#f6900b;
|
||||
// }
|
||||
// .social-likes__button_odnoklassniki:hover {
|
||||
// background:#f69a21;
|
||||
// }
|
||||
// .social-likes__icon_odnoklassniki {
|
||||
// background-image:embedurl('icons/odnoklassniki.svg');
|
||||
// }
|
||||
// .social-likes_notext {
|
||||
// .social-likes__icon_odnoklassniki {
|
||||
// background-position:5px 3px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Pinterest
|
||||
.social-likes__button_pinterest {
|
||||
background:#cb132d;
|
||||
}
|
||||
// .social-likes__button_pinterest:hover {
|
||||
// background:#efefef;
|
||||
// }
|
||||
.social-likes__icon_pinterest {
|
||||
background-image:embedurl('icons/pinterest.svg');
|
||||
}
|
||||
Loading…
Reference in New Issue