vitalif-js
/
social-likes-nojq
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Flat skin draft. 

1. No pixels.
2. SVG icons → web fonts.
3. Light version.
4. ul>li → div>div.
5. JS refactoring.
master
Artem Sapegin 2013-10-29 00:02:23 +04:00
parent b1ea0582e8
commit 6412fcbb96
24 changed files with 402 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Gruntfile.js
View File

@ -77,12 +77,20 @@ module.exports = function(grunt) {
dest: '../'
}
},
svgmin: {
dist: {
expand: true,
flatten: true,
src: 'styles/flat/icons_src/*.svg',
dest: 'styles/flat/icons/'
webfont: {
flat: {
src: 'styles/flat/icons/*.svg',
dest: 'styles/flat/font/',
options: {
font: 'social-likes',
types: 'woff,ttf',
embed: true,
template: 'styles/flat/webfont.styl',
stylesheet: 'styl',
relativeFontPath: '',
hashes: false,
htmlDemo: false
}
}
},
watch: {
@ -101,7 +109,7 @@ module.exports = function(grunt) {
}
});
grunt.registerTask('default', ['jshint', 'uglify', 'imgo', 'svgmin', 'stylus', 'autoprefixer', 'csso']);
grunt.registerTask('build', ['uglify', 'imgo', 'svgmin', 'stylus', 'autoprefixer', 'csso']);
grunt.registerTask('default', ['jshint', 'uglify', 'imgo', 'webfont', 'stylus', 'autoprefixer', 'csso']);
grunt.registerTask('build', ['uglify', 'imgo', 'webfont', 'stylus', 'autoprefixer', 'csso']);
};

99
src/demo.html
View File

@ -23,15 +23,15 @@ body {
</head>
<body>
<h3>Standard</h3>
<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}&amp;callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
</ul>
<div class="social-likes" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
<div class="plusone" data-counter="http://sapegin.ru/api/social-likes/googleplusonecount.php?url={url}&amp;callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</div>
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
</div>
<h3>Standard (dark background)</h3>
<div class="dark-bg">
@ -42,10 +42,22 @@ body {
<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}&amp;callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
</ul>
</div>
<h3>Standard (light)</h3>
<ul class="social-likes social-likes_light" 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}&amp;callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
</ul>
<table>
<tr>
<td style="vertical-align:top">
@ -57,7 +69,7 @@ body {
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</td>
<td style="padding-left:40px">
@ -70,10 +82,22 @@ body {
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</div>
</td>
<td style="vertical-align:top; padding-left:40px">
<h3>Vertical (light)</h3>
<ul class="social-likes social-likes_vertical social-likes_light" 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="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</td>
</tr>
</table>
@ -91,15 +115,21 @@ body {
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest">Pinterest</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
<ul class="social-likes social-likes_single" data-url="http://mail.ru/">
<ul class="social-likes social-likes_single social-likes_light" 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="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li-->
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" 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>
</ul>
<h3>Icons only</h3>
@ -110,7 +140,7 @@ body {
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Icons only (no counters)</h3>
@ -121,7 +151,40 @@ body {
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://i.telegraph.co.uk/multimedia/archive/01882/mail-ru_1882101c.jpg" title="Опубликовать ссылку в Pinterest"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Icons only (light)</h3>
<ul class="social-likes social-likes_notext social-likes_light" data-url="http://maps.mail.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Icons only (light, no counters)</h3>
<ul class="social-likes social-likes_notext social-likes_light" data-url="http://mail.ru/" data-counters="no">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Custom font-size</h3>
<ul class="social-likes" data-url="http://mail.ru/" style="font-size:30px">
<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}&amp;callback=?" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
</ul>
<h3>Old initialization HTML</h3>

2
src/package.json
View File

@ -11,6 +11,6 @@
"grunt-csso": "~0.4.1",
"matchdep": "~0.1.1",
"grunt-autoprefixer": "~0.3.0",
"grunt-svgmin": "~0.2.0"
"grunt-webfont": "~0.1.9"
}
}

27
src/social-likes.js
View File

@ -20,8 +20,9 @@
}
}(function ($) { 'use strict';
var prefix = 'social-likes__',
visibleClass = 'social-likes-is-visible';
var prefix = 'social-likes';
var classPrefix = prefix + '__';
var visibleClass = prefix + '_visible';
/**
@ -193,10 +194,10 @@ SocialLikes.prototype = {
},
init: function() {
// Add class in case of manual initialization
this.container.addClass('social-likes');
this.container.addClass(prefix);
this.readOptions();
this.single = this.container.hasClass('social-likes_single');
this.single = this.container.hasClass(prefix + '_single');
this.initUserButtons();
@ -205,7 +206,7 @@ SocialLikes.prototype = {
}
var options = this.options;
this.container.find('li').each(function() {
this.container.children().each(function() {
new Button($(this), options);
});
},
@ -227,8 +228,8 @@ SocialLikes.prototype = {
},
makeSingleButton: function() {
var container = this.container;
container.addClass('social-likes_vertical');
container.wrap($('<div>', {'class': 'social-likes_single-w'}));
container.addClass(prefix + '_vertical');
container.wrap($('<div>', {'class': prefix + '_single-w'}));
var wrapper = container.parent();
var defaultLeft = parseInt(container.css('left'), 10),
@ -242,7 +243,7 @@ SocialLikes.prototype = {
wrapper.append(button);
var close = $('<li>', {
'class': prefix + 'close',
'class': classPrefix + 'close',
'html': '&times;'
});
container.append(close);
@ -262,7 +263,7 @@ SocialLikes.prototype = {
this.wrapper = wrapper;
this.container.on('counter.social-likes', $.proxy(this.updateCounter, this));
this.container.on('counter.' + prefix, $.proxy(this.updateCounter, this));
},
updateCounter: function(e, service, number) {
if (!number) return;
@ -271,7 +272,7 @@ SocialLikes.prototype = {
this.getCounterElem().text(this.number);
},
getCounterElem: function() {
var counterElem = this.wrapper.find('.' + prefix + 'counter_single');
var counterElem = this.wrapper.find('.' + classPrefix + 'counter_single');
if (!counterElem.length) {
counterElem = $('<span>', {
'class': getElementClassNames('counter', 'single')
@ -399,7 +400,7 @@ Button.prototype = {
});
this.widget.append(counterElem);
this.widget.trigger('counter.social-likes', [this.service, number]);
this.widget.trigger('counter.' + prefix, [this.service, number]);
},
click: function(e) {
@ -463,7 +464,7 @@ function template(tmpl, context, filter) {
}
function getElementClassNames(elem, mod) {
var cls = prefix + elem;
var cls = classPrefix + elem;
return cls + ' ' + cls + '_' + mod;
}
@ -502,7 +503,7 @@ function showInViewport(elem, offset) {
* Auto initialization
*/
$(function() {
$('.social-likes').socialLikes();
$('.' + prefix).socialLikes();
});
}));

25
src/styles/base.styl
View File

@ -7,29 +7,31 @@
text-indent:0;
padding:0;
border:0;
word-spacing:0;
word-spacing:0 !important;
text-indent:0 !important;
}
.social-likes {
list-style:none;
list-style:none !important;
li {
display:inline-block;
}
&_vertical li {
display:block;
}
&__widget {
display:inline-block;
position:relative;
white-space:nowrap;
overflow:hidden;
&:before,
&:after {
display:none !important; // Remove nice bullets
}
}
&__widget:before {
display:none; // Remove nice bullets
&_vertical &__widget {
display:block;
}
&__button,
&__icon,
&__counter {
text-decoration:none;
text-rendering:optimizeLegibility;
}
@ -100,7 +102,8 @@
visibility:hidden;
opacity:0;
transition:visibility 0s .3s, opacity .3s ease-out;
&.social-likes-is-visible {
backface-visibility:hidden;
&.social-likes_visible {
visibility:visible;
opacity:1;
transition:opacity .3s ease-out;

35
src/styles/flat/font/social-likes.styl Normal file
View File

@ -0,0 +1,35 @@
@font-face {
font-family:"social-likes";
src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAtwAAoAAAAADrAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAB/EAAAjec+feo0ZGVE0AAAjoAAAAGgAAABxpY/MiT1MvMgAACQQAAABKAAAAYEE5XlRjbWFwAAAJUAAAADcAAAFCAA3zrmhlYWQAAAmIAAAALgAAADb+RZDPaGhlYQAACbgAAAAcAAAAJAPwAcpobXR4AAAJ1AAAAB8AAAAmDy0AAG1heHAAAAn0AAAABgAAAAYAClAAbmFtZQAACfwAAAFgAAACuEfW20dwb3N0AAALXAAAABMAAAAg/8MAGXicVZRrcBPXFcdXsWXdocakNoKBoZJJSRuSCdhAm9IWY0JrSGhnsAlxSoBgY2FkY8lYwg+9pdVqpT0rrVZavR9+yQ8SYcCJeYNpwA6PGGiAIcNMU9JOGD44nWSa6fWMPqSreKbT3t/s/e+cvXvOuXfuORKisJCQSCQLddqD6oYjrx5Rt6p0hOQ5QkK8ObeImFslmXvxubmfFcwtLVR8tXxtcYHixeHviwsVC4hlu0q/B/jvS7GM2TEnzO2WrpCUL1pBEM+vkKz/8QripRXoTClRnPeHiEXEEuInxCriFWIdsZGoJiiCJ1LHNOqayoqKeamcl3Xzsn5eNszLL+bll/Py2rz8amuHqkGvaipv7Cnf0qFXtZXvamhXNas15V1q/eHyGq1GX6PtaFaVr1tTUf7SYb2+/ddr1x4SrYfy1jW6Q2s0Kv3q/938/x0EQUhoiVvikTASkLASr8Qn4YgF+d2sIvY+11SwtODjwi6ptuj5opCsNbcaMpjNSDIZXJEpyCzBjfhKrrEokxuSYxZX5FhZSU6JNz399onk8bMCXL1Djs2PZZGnFQBT0qFA6rTi0l+LSFbjbQFU827DJuX231Y8zpllz5aU/JvJftCLt+ANErj7yW28+Pb0vQIs3JaHQPCHQhwHPM3RHAU0TVEuNw00uHwUP29BNA0UR4fsgisEKCfgV+XQ4dVzXVwX3xM0BU0hS8QmYo85Y86EK+VK0SIelPL0Mf3QD31s2pv2JrkUl/In/LFALBANRcKRsBANxlEwzqe4Xq7XNwAZOGce137g5bwcy4sE2RAbgognijxROuaKIZqVulmaoUScHlLE7rI4LU4zabbpAupgAzSAmtQ5kTlsDloCloCdI32kj2KdIjR4RBiGAZeZNnssyGMBK2sXIVmKpby0l9a2mptgP7pbJ4fR8FDfIB8Q/EEuyAm+MIQhBCEmxEQgxuQRDyIEUTYmEoHQD4mKixjBI9ACHXDxzj5d+ChoEBgYI20RsbkcLgdJ2ikRl8PtcFvdZk8eG6ADcACkNjB781h8jjx+O2/nyaBLcAl0mI7SUU8CkuiThBwMvDHkCDnEsEJI4PPWYXNfT4+5s12B31rSHutMpWJ9wwpIUnG7YBesYHfYHZQJDAgKS65exG9fLv32Kq6d3Huh7Bs8iw/IbTL3n1QNdYDeOXhqajJ7YUrpLboCE2pfHSp75p+Vtw83J5sAVW3btqnqbs3nynEYSwwPI9Ykhfeua8aPP7nD483rn772j5wy9cIfcoqN7tz6ycrPc8vwRs90ZjxpuKwyoS1tudLj733j6Hf1M/30X07OXDpxYwIXRZ9UP/1NU07R2kKSJp6NIrxfxtOpboW7yOqwW5Riyq/g2hlcNiMZnMGLZwrwdbxF7ox3Rto7mzU7IT92QvNoe1+X1WmyHI1Zs50jPaecGQ/q6qqqklqt0BOxIs4t5amAOwhBCPh4Hj16JB3VjGrT3RFrCiIR5PNJIxFIWSPo5VlpxneKH0ll++IRyxDKvYxV8rFRzeHDGq34jIyNjY6OKXO7C+9PXb9/v3Zq69ba2q1bp+ru51P9bse/cMe1M19K4ItLl7/4582/FeDg3C55bmWuSGSlEl64VflVE5OCfn/a3zeCFwAgIBODp/tHhgfChk4l6M3NZCvVnj42DOhi9ubDa4cmaqr21L2phGMBQ8jqp1iPh2JcbhtDe8RCpbzNceM4nEUPbnyJF87e/v3mn79VvVGhhaNxRxLAtNNtc3XZu+ymAecgnQGEV+IiLBNnMSP8Q0aFJc92jGDbia4Urh0uhemj03duJqaPnXucLTtbjRO4Qq5LSZ28LQhxiIcEQRjpHxmES3CldcgURR/BmeHcUpA2Q71DdUTTYW6BI1D/4dufQSAP6ybdTrBBZ9gqWFGbp45u7EBlF6426a1q0KE95/fOYtmNW7cUcL59QJNB6x/Jxah1Rx+eU0KSS4dj4WhKSMLHMFoN74KVOWYy2Ww9pAEQm+uTl8Wv/m7f2AUlXJhIxP0jwkkvLwb1gZ+50tzfA2rUqD6yQwGFZZ9V4yAekM+0vLFdfWd79s6dE7LtYkucejD4sOPrjgeZB6X44NdlWXwQ8/KWhDGbTSSyWWOiRdFiNLYoL+Xq5WOQFY4nUdmnx5ODg8nj6O8Pc8uLHHopZbKbbeKwOEyUiTK6jaAGbUQ3iOrrpadV57v/DKgsmSvBWrkwIBUGEsneWG9sIJCBEzBiHdShyUmp6vS+9G44DC2ONkObQddhaEMbXi/Cy5eUzAXnfirvJruoTnd/NNEbzHRZ9aTO1d3bHm2DWti7V5xIlvSSaANXNVF/22GkeqAbmtOtI90G1siZg8gjg3dONly0OzwOxg5OcIq9Ltow3naeadbuN+wBEhyiC3S+7ZphWrwdu7/DG7BSGZX1xZPpWF++YeBKfFaC980WYB+ulL9fBBBk/X7Ozwbzpcd8lObT/MD+oZ60Je4Tb/M9Vgow5jWMMF4y3Xj6wId+5+S99yeiQ2ITC+nd4orNoguKpd20x03lXVhajVp1rYWmOEvQNwQpuCYMdvCI9Dq9ndAOOsZCOWjKwTF+JuwWO6INdPnfuDdMJLJT5siRq8Zh22je5OZpn4ujWDHI64yYhg1oF037HPlv13PLPt02/ce7XL7iCsWjXTy3Wh4vXvBgQSrkT/KhQNQfvYaXFhc/+1E2EuT9XELgvMUL/wOzmDrwAAAAeJxjYGBgZACCM7aLzoPoc5M1NGE0AEYzBeAAAHicY2BhPMP4hYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgY2aAAwEEkyEgzTWF4cBHho8cjAf+H2DQYzzA4AAUZoQrUABCRgB/Vw0iAAB4nGNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/keO//+BJMP///yMUJUMjGwMMOaIBQA9QwasAHicY2BkYGAA4o0JM1ri+W2+MnAzMYDAuckamgj6/wEmBsYDQC4HA1gaAB16CcwAAHicY2BkYGA88P8Agx4TAwgASUYGVMAJAFCZAr54nGNkYGBg5GJgYALR/4HYFIj/AfEnhBgDAwBBwQQ5AAAAUAAACgAAeJyNj81OwkAUhc/wl6jEuGQ5S1i0TMuGdEeIPIAkbE2FKTRA27STEB5B41u4Nz4Lr+DWF3Bh4mmZGFxo6KRzv3vu7b2nAK7xCoHjc4tnywJtfFiuoSmaluvoiXvLDbTFi+UmbsTBcov6FztF44LZU/VVyQIdHCzXcIlPy3XciSvLDXTEo+UmpHiz3KL+jjFyaIQwvBeQeMCe94hqqWzJU1Yz8hIxEuY7RoMVaYKUiqlizrqm5sOFYuyyw/BkCNDniWxv9NPromDmUtXUe8A416HRC/mwl6Pc6K2chplexoncxWYlJ2liJmm+1NJ3leyujMmCfj+iGpWqW0Ruog3HFNwwp8cQGzh8Y6y5oWAhncfhxtnEa83spGCV/34n4PvX4GPVx5Cqx26HrEgDjvxlOpCnFpj6Q8dTjq+8wdm2ZxRzynFlVnJRucqtYmkUM50XcZpIpTxXKSXPnfwNl9F833icY2BmAIP/BxgkGbAAACuyAdwA") format("woff"), url("social-likes.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
.social-likes__icon_facebook:before {
content:"\f100";
}
.social-likes__icon_github:before {
content:"\f101";
}
.social-likes__icon_mailru:before {
content:"\f102";
}
.social-likes__icon_odnoklassniki:before {
content:"\f103";
}
.social-likes__icon_pinterest:before {
content:"\f104";
}
.social-likes__icon_plusone:before {
content:"\f105";
}
.social-likes__icon_single:before {
content:"\f106";
}
.social-likes__icon_twitter:before {
content:"\f107";
}
.social-likes__icon_vkontakte:before {
content:"\f108";
}

BIN
src/styles/flat/font/social-likes.ttf Normal file
View File

Binary file not shown.

10
src/styles/flat/icons/facebook.svg
View File

@ -1 +1,9 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260px" height="501px" viewBox="0 0 260 501" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M168.768889,500.71 L168.768889,272.650454 L245.411111,272.650454 L256.88,183.763488 L168.74,183.763488 L168.74,126.986614 C168.74,101.252381 175.904444,83.7115579 212.824444,83.7115579 L260,83.7115579 L260,4.20085454 C251.853333,3.13340315 223.86,0.71 191.331111,0.71 C123.355556,0.71 76.8444444,42.1386539 76.8444444,118.187353 L76.8444444,183.734638 L0,183.734638 L0,272.621603 L76.8444444,272.621603 L76.8444444,500.68115 L168.768889,500.68115 L168.768889,500.68115 L168.768889,500.71 L168.768889,500.71 Z M168.768889,500.71" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 284 B

After

Width:  |  Height:  |  Size: 1.1 KiB

9
src/styles/flat/icons/github.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

13
src/styles/flat/icons/mailru.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="501px" height="481px" viewBox="0 0 501 481" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup" id="Group-3" fill="#000000">
<g sketch:type="MSShapeGroup">
<path d="M336.8363,238.600566 C333.99192,183.287621 292.954423,150.025376 243.403722,150.025376 L241.529621,150.025376 C184.349601,150.025376 152.629443,195.024499 152.629443,246.141427 C152.629443,303.369511 191.001995,339.524414 241.310311,339.524414 C297.407075,339.524414 334.284333,298.415419 336.96257,249.772212 C336.96257,249.772212 334.284333,298.415419 336.96257,249.772212 L336.8363,238.600566 L336.8363,238.600566 L336.8363,238.600566 L336.8363,238.600566 Z M342.332334,143.887621 C342.332334,131.286271 350.872121,121.710575 362.734782,121.710575 L365.738661,121.690625 C384.293591,121.690625 388.101604,139.252718 388.101604,144.818592 L388.194645,342.337275 C386.878787,355.271115 401.526016,361.947503 409.647121,353.648566 C441.353987,321.05795 479.267982,186.093832 389.942477,107.898963 C306.697831,34.9906759 194.99609,47.0001949 135.59639,87.9761949 C87.317863,121.291448 52.3281782,185.518837 56.069726,254.40708 C57.2220906,275.624073 62.0484523,297.283189 71.2921274,318.617478 C114.077456,417.433343 236.518727,446.905208 309.283027,417.493191 C346.140348,402.624262 363.166756,452.464431 324.887245,468.743115 C267.062587,493.387233 106.11585,490.900212 30.9258509,360.584296 C-19.8742506,272.587638 -17.1760768,117.76725 117.559828,37.5441949 C220.622096,-23.8267081 356.507716,-6.84979668 438.449795,78.7795367 C524.100202,168.305646 519.102599,335.926879 435.552249,401.088161 C397.704711,430.693022 341.488324,401.886136 341.847195,358.742305 L341.455096,344.638102 C315.098057,370.805022 280.028442,386.072938 241.815388,386.072938 C166.31304,386.072938 99.8821374,319.614946 99.8821374,244.073343 C99.8821374,167.773663 166.31304,100.530997 241.815388,100.530997 C280.028442,100.530997 315.955359,117.428111 342.332334,143.887621 Z M342.332334,143.887621" id="Fill-1"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

9
src/styles/flat/icons/odnoklassniki.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="301px" height="500px" viewBox="0 0 301 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>odnoklassniki</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M296.489626,268.532046 C289.339866,254.179856 269.533762,242.240551 243.214184,262.958905 C207.641379,290.968333 150.500836,290.968333 150.500836,290.968333 C150.500836,290.968333 93.358601,290.968333 57.7841034,262.958905 C31.4645257,242.240551 11.661806,254.179856 4.51204615,268.532046 C-7.95476597,293.553689 6.12983797,305.648554 37.9136937,326.035495 C65.0607821,343.448178 102.363068,349.952994 126.450567,352.38617 L106.344934,372.475516 C78.0200392,400.775776 50.6817265,428.093634 31.7132865,447.0484 C20.3718212,458.377296 20.3718212,476.750399 31.7132865,488.086059 L35.1350178,491.503328 C40.7922124,497.15594 48.2008867,499.988164 55.61633,500 L55.7229418,500 C63.1366928,499.988164 70.5470594,497.154249 76.204254,491.503328 L150.835902,416.932135 C179.159104,445.230704 206.497417,472.548562 225.467549,491.501637 C236.807322,502.832224 255.19532,502.832224 266.535093,491.501637 L269.956824,488.082677 C281.301674,476.748708 281.29829,458.377296 269.956824,447.046709 L175.155239,352.323607 C199.263045,349.841395 236.165959,343.304453 263.086286,326.035495 C294.870142,305.648554 308.953053,293.553689 296.489626,268.532046 C296.489626,268.532046 308.953053,293.553689 296.489626,268.532046 L296.489626,268.532046 L296.489626,268.532046 Z M150.500836,64.2872602 C184.912757,64.2872602 212.809513,92.1631091 212.809513,126.545464 C212.809513,160.929511 184.912757,188.801978 150.500836,188.801978 C116.088915,188.801978 88.1921591,160.929511 88.1921591,126.545464 C88.1921591,92.1631091 116.088915,64.2872602 150.500836,64.2872602 C150.500836,64.2872602 116.088915,64.2872602 150.500836,64.2872602 L150.500836,64.2872602 L150.500836,64.2872602 Z M150.500836,253.090929 C220.444949,253.090929 277.148891,196.43461 277.148891,126.545464 C277.148891,56.6580094 220.444949,0 150.500836,0 C80.5533387,0 23.851089,56.6580094 23.851089,126.545464 C23.851089,196.43461 80.5533387,253.090929 150.500836,253.090929 L150.500836,253.090929 Z M150.500836,253.090929" id="Fill-51" fill="#030200" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

10
src/styles/flat/icons/pinterest.svg
View File

@ -1 +1,9 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="501px" height="502px" viewBox="0 0 501 502" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>pinterest</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M250.525525,0.619 C112.460812,0.619 0.495,112.801895 0.495,251.103708 C0.495,353.68316 62.0639866,441.796279 150.1287,480.515893 C149.457149,463.082891 150.0066,442.040952 154.493779,423.017572 C159.286209,402.648485 186.697686,286.489643 186.697686,286.489643 C186.697686,286.489643 178.669603,270.524683 178.669603,246.883086 C178.669603,209.753851 200.159225,182.044554 226.868626,182.044554 C249.640299,182.044554 260.62931,199.171714 260.62931,219.632552 C260.62931,242.540128 246.038346,276.825031 238.529188,308.510276 C232.271557,335.087958 251.838101,356.802749 277.998053,356.802749 C325.342375,356.802749 357.271557,295.787244 357.271557,223.6085 C357.271557,168.709837 320.39732,127.604654 253.211728,127.604654 C177.418077,127.604654 130.16533,184.246617 130.16533,247.525355 C130.16533,269.423652 136.575586,284.776927 146.648846,296.674186 C151.258126,302.14876 151.929676,304.381408 150.2508,310.651171 C149.029799,315.269388 146.282546,326.340873 145.122595,330.683831 C143.443718,337.045348 138.315513,339.308579 132.637857,337.045348 C97.6866972,322.670767 81.4168559,284.379332 81.4168559,241.286175 C81.4168559,170.147295 141.306966,84.8479238 260.110385,84.8479238 C355.562155,84.8479238 418.382668,154.029415 418.382668,228.287885 C418.382668,326.554962 363.864963,399.957075 283.462033,399.957075 C256.477906,399.957075 231.081081,385.337821 222.381447,368.730593 C222.381447,368.730593 207.882057,426.473588 204.799029,437.636826 C199.487674,456.966048 189.109164,476.234103 179.646404,491.281536 C202.143352,498.010063 225.891825,501.619 250.525525,501.619 C388.529188,501.619 500.495,389.466689 500.495,251.134292 C500.495,112.801895 388.529188,0.619 250.525525,0.619 L250.525525,0.619 L250.525525,0.619 L250.525525,0.619 Z M250.525525,0.619" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 2.3 KiB

21
src/styles/flat/icons/plusone.svg
View File

@ -1 +1,20 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="482px" height="494px" viewBox="0 0 482 494" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>plusone</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="plusone" sketch:type="MSLayerGroup" transform="translate(-5.000000, -2.000000)" fill="#000000">
<g id="Page-1" sketch:type="MSShapeGroup">
<g id="Google_plus">
<g id="Group">
<g id="Shape">
<path d="M258.931321,283.982558 L235.744571,266 C228.683179,260.151163 219.025429,252.430233 219.025429,238.296512 C219.025429,224.104651 228.683179,215.081395 237.066036,206.726744 C264.077464,185.494186 291.065607,162.895349 291.065607,115.273256 C291.065607,66.3023256 260.212036,40.5406977 245.425607,28.3197674 L285.296571,28.3197674 L327.146821,2.05813953 L200.361929,2.05813953 C165.573071,2.05813953 115.438929,10.2790698 78.7348214,40.5406977 C51.0713929,64.377907 37.5773214,97.244186 37.5773214,126.831395 C37.5773214,177.05814 76.1908571,227.97093 144.37725,227.97093 C150.81575,227.97093 157.859679,227.337209 164.950179,226.680233 C161.765857,234.418605 158.546607,240.860465 158.546607,251.796512 C158.546607,271.744186 168.809786,283.976744 177.856286,295.563953 C148.883036,297.552326 94.7961429,300.755814 54.9251786,325.232558 C16.952,347.784884 5.39646429,380.610465 5.39646429,403.77907 C5.39646429,451.465116 50.4019286,495.883721 143.72525,495.883721 C254.390607,495.883721 312.977464,434.726744 312.977464,374.186047 C312.983286,329.703488 287.252571,307.80814 258.931321,283.982558 C258.931321,283.982558 287.252571,307.80814 258.931321,283.982558 L258.931321,283.982558 L258.931321,283.982558 L258.931321,283.982558 L258.931321,283.982558 Z M174.642857,209.924419 C119.281071,209.924419 94.2023571,138.447674 94.2023571,95.3197674 C94.2023571,78.5290698 97.3866786,61.1918605 108.336786,47.6511628 C118.658179,34.755814 136.63475,26.3895349 153.417929,26.3895349 C206.788786,26.3895349 234.469679,98.505814 234.469679,144.889535 C234.469679,156.494186 233.188964,177.05814 218.390893,191.924419 C208.040393,202.238372 190.721643,209.924419 174.642857,209.924419 L174.642857,209.924419 L174.642857,209.924419 L174.642857,209.924419 L174.642857,209.924419 Z M175.277393,468.895349 C106.433179,468.895349 62.0389643,436.005814 62.0389643,390.273256 C62.0389643,344.552326 103.202286,329.087209 117.365821,323.965116 C144.37725,314.889535 179.137,313.622093 184.935143,313.622093 C191.367821,313.622093 194.587071,313.622093 199.709929,314.267442 C248.650679,349.052326 269.893071,366.389535 269.893071,399.319767 C269.893071,439.197674 237.066036,468.895349 175.277393,468.895349 L175.277393,468.895349 L175.277393,468.895349 L175.277393,468.895349 L175.277393,468.895349 Z M175.277393,468.895349"></path>
<path d="M421.430679,208.94186 L421.430679,144.552326 L389.587464,144.552326 L389.587464,208.94186 L325.219929,208.94186 L325.219929,241.098837 L389.587464,241.098837 L389.587464,305.883721 L421.430679,305.883721 L421.430679,241.098837 L486.124214,241.098837 L486.124214,208.94186 L421.430679,208.94186 L421.430679,208.94186 L421.430679,208.94186 L421.430679,208.94186 Z M421.430679,208.94186"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 874 B

After

Width:  |  Height:  |  Size: 3.6 KiB

15
src/styles/flat/icons/single.svg
View File

@ -1 +1,14 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="381px" viewBox="0 0 500 381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>single</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="single" sketch:type="MSLayerGroup" fill="#000000">
<ellipse d="M250,238.125 C276.299275,238.125 297.619048,216.802563 297.619048,190.5 C297.619048,164.197437 276.299275,142.875 250,142.875 C223.700725,142.875 202.380952,164.197437 202.380952,190.5 C202.380952,216.802563 223.700725,238.125 250,238.125 Z M250,238.125" id="Oval" sketch:type="MSShapeGroup" cx="250" cy="190.5" rx="47.6190476" ry="47.625"></ellipse>
<g id="Group" sketch:type="MSShapeGroup">
<path d="M250,381 C199.119048,381 151.285714,361.164188 115.333333,325.159688 L165.857143,274.653375 C188.333333,297.156188 218.238095,309.5625 250,309.5625 C298.214286,309.5625 341.333333,280.797 359.904762,236.291438 L369.071429,214.3125 L500,214.3125 L500,285.75 L415,285.75 C381.285714,344.304937 318.880952,381 250,381 L250,381 L250,381 L250,381 Z M130.952381,166.6875 L0,166.6875 L0,95.25 L85.047619,95.25 C118.738095,36.6950625 181.142857,0 250,0 C300.880952,0 348.714286,19.8358125 384.690476,55.8403125 L334.166667,106.346625 C311.690476,83.8438125 281.809524,71.4375 250,71.4375 C201.833333,71.4375 158.666667,100.203 140.119048,144.708563 L130.952381,166.6875 L130.952381,166.6875 L130.952381,166.6875 L130.952381,166.6875 Z M130.952381,166.6875" id="Shape"></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 483 B

After

Width:  |  Height:  |  Size: 1.8 KiB

10
src/styles/flat/icons/twitter.svg
View File

@ -1 +1,9 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="501px" height="407px" viewBox="0 0 501 407" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>twitter</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M500.852,48.1992337 C482.482342,56.364751 462.697457,61.8934866 441.950217,64.3601533 C463.122025,51.6582375 479.397146,31.4996169 487.067681,7.51340996 C467.226186,19.308046 445.26185,27.8421456 421.91059,32.435249 C403.172974,12.4750958 376.510081,0 347.016733,0 C290.379314,0 244.441018,46.016092 244.441018,102.777778 C244.441018,110.829885 245.346764,118.655172 247.101646,126.196935 C161.84832,121.887356 86.2751531,80.9747126 35.6666052,18.8260536 C26.8355834,33.994636 21.7973722,51.6582375 21.7973722,70.4842912 C21.7973722,106.123372 39.9122887,137.594636 67.4243181,156.023755 C50.5831067,155.456705 34.7891639,150.835249 20.9482355,143.151724 L20.9199309,144.427586 C20.9199309,194.214559 56.2723227,235.750958 103.201278,245.192337 C94.5966929,247.545594 85.5392346,248.793103 76.1987308,248.793103 C69.5754645,248.793103 63.15033,248.140996 56.8667184,246.950192 C69.9151192,287.777778 107.814921,317.491188 152.705948,318.31341 C117.608298,345.872031 73.3682751,362.288123 25.3071373,362.288123 C17.0422066,362.288123 8.86218964,361.80613 0.852,360.842146 C46.2525095,389.988506 100.144386,407 158.083814,407 C346.790296,407 449.960406,250.437548 449.960406,114.629119 L449.620752,101.331801 C469.716987,86.8720307 487.095985,68.7831418 500.852,48.1992337 C500.852,48.1992337 487.095985,68.7831418 500.852,48.1992337 L500.852,48.1992337 L500.852,48.1992337 Z M500.852,48.1992337" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 707 B

After

Width:  |  Height:  |  Size: 1.9 KiB

10
src/styles/flat/icons/vkontakte.svg
View File

@ -1 +1,9 @@
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="501px" height="287px" viewBox="0 0 501 287" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>vkontakte</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M245.000598,284.995059 L274.883605,284.995059 C274.883605,284.995059 283.899403,283.998851 288.528482,279.017812 C292.745549,274.449835 292.624368,265.87273 292.624368,265.87273 C292.624368,265.87273 292.042704,225.684251 310.631728,219.7556 C329.002628,213.92414 352.535799,258.632 377.523131,275.810509 C396.402987,288.809806 410.774945,285.966969 410.774945,285.966969 L477.545168,285.019357 C477.545168,285.019357 512.469266,282.881155 495.916068,255.303208 C494.510379,253.067815 486.270133,234.941693 446.232236,197.741838 C404.352401,158.768246 409.95092,165.085662 460.458777,97.7080001 C491.141573,56.6690999 503.38076,31.5938217 499.599942,20.8785138 C495.916068,10.649161 473.328101,13.3219135 473.328101,13.3219135 L398.147981,13.8078685 C398.147981,13.8078685 392.573697,13.0546383 388.405102,15.508711 C384.40616,17.9384861 381.78867,23.5998619 381.78867,23.5998619 C381.78867,23.5998619 369.913022,55.3813192 354.038432,82.4004175 C320.544258,139.378642 307.165978,142.415861 301.688638,138.844091 C288.988966,130.582856 292.163884,105.726258 292.163884,88.0131978 C292.163884,32.8087092 300.501074,9.75014423 275.877282,3.82149317 C267.685508,1.82907765 261.674976,0.516999134 240.759295,0.298319382 C213.978498,0.00674637904 191.245115,0.395510383 178.424263,6.6886277 C169.844713,10.8921385 163.252517,20.2467723 167.275696,20.7813228 C172.219843,21.4373621 183.48959,23.8428394 189.45165,31.958288 C197.182939,42.5035116 196.916343,66.0723293 196.916343,66.0723293 C196.916343,66.0723293 201.37577,131.093109 186.567564,139.159962 C176.43691,144.724147 162.549673,133.425693 132.690901,81.6957827 C117.397975,55.2112349 105.885868,25.9324459 105.885868,25.9324459 C105.885868,25.9324459 103.631919,20.4654521 99.657212,17.5254243 C94.8584809,14.0022505 88.1208685,12.8602563 88.1208685,12.8602563 L16.6488584,13.3219135 C16.6488584,13.3219135 5.96077554,13.662082 2.01030499,18.3272501 C-1.50391728,22.4578676 1.7194728,31.0592712 1.7194728,31.0592712 C1.7194728,31.0592712 57.6561969,162.267123 120.984906,228.357003 C179.054399,288.97989 245.000598,284.995059 245.000598,284.995059 L245.000598,284.995059 L245.000598,284.995059 L245.000598,284.995059 L245.000598,284.995059 Z M245.000598,284.995059" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1009 B

After

Width:  |  Height:  |  Size: 2.7 KiB

8
src/styles/flat/icons_src/facebook.svg
View File

@ -1,8 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 715 B

17
src/styles/flat/icons_src/pinterest.svg
View File

@ -1,17 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

17
src/styles/flat/icons_src/plusone.svg
View File

@ -1,17 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

13
src/styles/flat/icons_src/single.svg
View File

@ -1,13 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 925 B

14
src/styles/flat/icons_src/twitter.svg
View File

@ -1,14 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

17
src/styles/flat/icons_src/vkontakte.svg
View File

@ -1,17 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

234
src/styles/flat/index.styl
View File

@ -3,32 +3,31 @@
// Design: Genn Osipenko, http://genn.org/
@import '../base'
@import 'font/social-likes'
.social-likes,
.social-likes__widget {
line-height:20px;
font-size:14px;
}
light_gray = #999;
.social-likes {
margin:-6px;
line-height:26px;
margin:-.5em;
font-size:14px;
line-height:1.5;
&__widget {
margin:6px;
margin:.5em;
line-height:1.5;
background:#fff;
}
&__button,
&__counter {
box-sizing:border-box;
font-family:"Trebuchet MS", "Helvetica Neue", Tahoma, sans-serif;
line-height:24px;
font-family:"Helvetica Neue", Arial, sans-serif;
vertical-align:middle;
}
&__button {
padding:1px 10px 1px 28px;
font-size:18px;
padding:.1em .7em .2em 1.65em;
font-size:1.2em;
font-weight:bold;
color:#fff;
-webkit-font-smoothing:antialiased;
@ -36,24 +35,27 @@
}
&__icon {
top:2px;
width:25px;
height:22px;
background-repeat:no-repeat;
top:0;
left:.21em;
font-family:"social-likes";
font-weight:normal;
font-style:normal;
speak:none;
text-transform:none;
font-size:1.25em;
vertical-align:baseline;
}
&__counter {
padding:1px 4px;
font-size:15px;
padding:.4em .5em .25em;
font-weight:normal;
color:#000;
background:#fff;
}
&__close {
padding:2px 4px;
font:16px Verdana, Geneva, Tahoma, sans-serif;
color:#999;
padding:.2em .4em;
font:1.2em Verdana, Geneva, Tahoma, sans-serif;
color:light_gray;
}
&__close:hover {
color:#111;
@ -61,153 +63,175 @@
// Vertical mode
&_vertical {
margin:-12px -6px;
margin:-1em -.5em;
.social-likes__widget {
margin:12px 6px;
margin:1em .5em;
}
.social-likes__button {
min-width:170px;
min-width:11em;
}
.social-likes__counter {
min-width:40px;
min-width:3em;
text-align:right;
}
}
// Light mode
&_light .social-likes__button,
&_single-light + .social-likes__button {
min-width:0;
background:none;
font-weight:normal;
text-decoration:underline;
-webkit-font-smoothing:subpixel-antialiased;
-moz-osx-font-smoothing:auto;
}
&_light .social-likes__counter,
&_single-light + .social-likes__button + .social-likes__counter {
min-width:0;
padding-left:0;
text-align:left;
color:light_gray;
}
// Icons only mode
&_notext {
.social-likes__button {
width:26px;
width:2em;
}
.social-likes__icon {
margin-left:.1em;
}
}
// Icons only light
&_notext&_light {
&,
.social-likes__widget {
margin:0;
}
}
// Single button mode
&_single {
top:-6px;
left:-6px;
padding:6px 6px 4px;
top:-.5em;
left:-.5em;
padding:.35em .5em .25em;
background:#fff;
box-shadow:0 0 15px hsla(0,0%,0%,.3);
border:1px solid #ddd;
}
&_single &__widget:first-of-type {
margin-right:14px; // Prevent collapse of widget and close button
margin-right:1em; // Prevent collapse of widget and close button
}
}
// Single button
.social-likes__button_single {
// padding-left:19px;
background:#87c44d;
font-size:.9em;
.social-likes_single-light + & {
color:@background;
}
}
.social-likes__counter_single {
font-size:.75em;
}
// .social-likes__button_single:hover {
// background:#f4f4f4;
// }
.social-likes__icon_single {
background-image:embedurl('icons/single.svg');
left:2px;
top:.25em;
}
// Facebook
.social-likes__button_facebook {
background:#3d5b95;
.social-likes_light & {
color:@background;
}
}
// .social-likes__button_facebook:hover {
// background:#c0cdf3;
// }
.social-likes__icon_facebook {
background-image:embedurl('icons/facebook.svg');
top:4px;
left:.38em;
.social-likes_notext & {
margin-left:.15em;
}
}
// Twitter
.social-likes__button_twitter {
background:#24aadd;
.social-likes_light & {
color:@background;
}
}
// .social-likes__button_twitter:hover {
// background:#bfdfed;
// }
.social-likes__icon_twitter {
background-image:embedurl('icons/twitter.svg');
top:.1em;
.social-likes_light & {
left:.1em;
}
}
// Google+
.social-likes__button_plusone {
// padding-left:12px;
background:#d23e30;
.social-likes_light & {
color:@background;
}
}
// .social-likes__button_plusone:hover {
// background:#f4f4f4;
// }
.social-likes__icon_plusone {
background-image:embedurl('icons/plusone.svg');
top:4px;
.social-likes_notext & {
margin-left:0;
}
}
// 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;
// }
// }
.social-likes__button_mailru {
background:#00468c;
.social-likes_light & {
color:@background;
}
}
.social-likes__icon_mailru {
.social-likes_light & {
left:.1em;
}
.social-likes_notext & {
margin-left:.075em;
}
}
// 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;
.social-likes_light & {
color:@background;
}
}
.social-likes__icon_vkontakte {
top:.2em;
left:.1em;
}
// 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;
// }
// }
.social-likes__button_odnoklassniki {
background:#f59310;
.social-likes_light & {
color:@background;
}
}
.social-likes__icon_odnoklassniki {
left:.4em;
.social-likes_light & {
left:.25em;
}
}
// Pinterest
.social-likes__button_pinterest {
background:#cb132d;
.social-likes_light & {
color:@background;
}
}
// .social-likes__button_pinterest:hover {
// background:#efefef;
// }
.social-likes__icon_pinterest {
background-image:embedurl('icons/pinterest.svg');
.social-likes_light & {
left:.1em;
}
}

11
src/styles/flat/webfont.styl Normal file
View File

@ -0,0 +1,11 @@
@font-face {
font-family:"social-likes";
src:<%= fontSrc2 %>;
font-weight:normal;
font-style:normal;
}
<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %>
.social-likes__icon_<%= glyphs[glyphIdx] %>:before {
content:"\<%= (61696+glyphIdx).toString(16) %>";
}<% } %>