From 6412fcbb967d75776a9c3930415748e5b7c51547 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Tue, 29 Oct 2013 00:02:23 +0400 Subject: [PATCH] Flat skin draft. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring. --- src/Gruntfile.js | 24 ++- src/demo.html | 99 ++++++++-- src/package.json | 2 +- src/social-likes.js | 27 +-- src/styles/base.styl | 25 +-- src/styles/flat/font/social-likes.styl | 35 ++++ src/styles/flat/font/social-likes.ttf | Bin 0 -> 6296 bytes src/styles/flat/icons/facebook.svg | 10 +- src/styles/flat/icons/github.svg | 9 + src/styles/flat/icons/mailru.svg | 13 ++ src/styles/flat/icons/odnoklassniki.svg | 9 + src/styles/flat/icons/pinterest.svg | 10 +- src/styles/flat/icons/plusone.svg | 21 ++- src/styles/flat/icons/single.svg | 15 +- src/styles/flat/icons/twitter.svg | 10 +- src/styles/flat/icons/vkontakte.svg | 10 +- src/styles/flat/icons_src/facebook.svg | 8 - src/styles/flat/icons_src/pinterest.svg | 17 -- src/styles/flat/icons_src/plusone.svg | 17 -- src/styles/flat/icons_src/single.svg | 13 -- src/styles/flat/icons_src/twitter.svg | 14 -- src/styles/flat/icons_src/vkontakte.svg | 17 -- src/styles/flat/index.styl | 234 +++++++++++++----------- src/styles/flat/webfont.styl | 11 ++ 24 files changed, 402 insertions(+), 248 deletions(-) create mode 100644 src/styles/flat/font/social-likes.styl create mode 100644 src/styles/flat/font/social-likes.ttf create mode 100644 src/styles/flat/icons/github.svg create mode 100644 src/styles/flat/icons/mailru.svg create mode 100644 src/styles/flat/icons/odnoklassniki.svg delete mode 100644 src/styles/flat/icons_src/facebook.svg delete mode 100644 src/styles/flat/icons_src/pinterest.svg delete mode 100644 src/styles/flat/icons_src/plusone.svg delete mode 100644 src/styles/flat/icons_src/single.svg delete mode 100644 src/styles/flat/icons_src/twitter.svg delete mode 100644 src/styles/flat/icons_src/vkontakte.svg create mode 100644 src/styles/flat/webfont.styl diff --git a/src/Gruntfile.js b/src/Gruntfile.js index 0443f14..aeabcd2 100644 --- a/src/Gruntfile.js +++ b/src/Gruntfile.js @@ -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']); }; \ No newline at end of file diff --git a/src/demo.html b/src/demo.html index 9d4f84a..2653ddd 100644 --- a/src/demo.html +++ b/src/demo.html @@ -23,15 +23,15 @@ body {

Standard

- +
+ + +
Мой мир
+
Вконтакте
+
Одноклассники
+
Google+
+
Pinterest
+

Standard (dark background)

@@ -42,10 +42,22 @@ body {
  • Вконтакте
  • Одноклассники
  • Google+
    • -
  • Pinterest
    • +
  • Pinterest
    • +

    Standard (light)

    + + + +
    @@ -57,7 +69,7 @@ body {
  • Вконтакте
  • Одноклассники
  • Google+
    • -
  • Pinterest
    • +
  • Pinterest
    		•  @@ -70,10 +82,22 @@ body {
  • Вконтакте
  • Одноклассники
  • Google+
    • -
  • Pinterest
    • +
  • Pinterest
    		•  +

    Vertical (light)

    + +
    @@ -91,15 +115,21 @@ body {
  • Вконтакте
  • Одноклассники
  • Google+
    • -
  • Pinterest
    • +
  • Pinterest
    • -

    Icons only (no counters)

    @@ -121,7 +151,40 @@ body {
  • -
  • +
  • + + +

    Icons only (light)

    + + +

    Icons only (light, no counters)

    + + +

    Custom font-size

    +

    Old initialization HTML

    diff --git a/src/package.json b/src/package.json index 41747af..739d7ef 100644 --- a/src/package.json +++ b/src/package.json @@ -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" } } diff --git a/src/social-likes.js b/src/social-likes.js index 8d8013a..00510d1 100644 --- a/src/social-likes.js +++ b/src/social-likes.js @@ -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($('
    ', {'class': 'social-likes_single-w'})); + container.addClass(prefix + '_vertical'); + container.wrap($('
    ', {'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 = $('
  • ', { - 'class': prefix + 'close', + 'class': classPrefix + 'close', 'html': '×' }); 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 = $('', { '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(); }); })); diff --git a/src/styles/base.styl b/src/styles/base.styl index d1f1612..82d18c2 100644 --- a/src/styles/base.styl +++ b/src/styles/base.styl @@ -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; diff --git a/src/styles/flat/font/social-likes.styl b/src/styles/flat/font/social-likes.styl new file mode 100644 index 0000000..905a1d4 --- /dev/null +++ b/src/styles/flat/font/social-likes.styl @@ -0,0 +1,35 @@ +@font-face { + font-family:"social-likes"; + src:url("data:application/x-font-woff;charset=utf-8;base64,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") 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"; +} diff --git a/src/styles/flat/font/social-likes.ttf b/src/styles/flat/font/social-likes.ttf new file mode 100644 index 0000000000000000000000000000000000000000..2825678e378e1dfaaec3856c41372cc3fbd0a62c GIT binary patch literal 6296 zcmds5Yit`=cD{FJIK$!lO-ZDrAx9)7aY*q^NtR`q6eZh|WBC=6aUP^ze#8&KRuiW` z7TfJ^HdVK6vI`dtn*GuCUthR%S|Dw=hzb-%Q5act(OneSqJO$5ut0$#+w6}Pt<~=i zDcQ+x+U?(R#5vzN_uP9P_uMl>5lRSglP?mH>?|!^I(uW|-{O$`C%(~h7pDp*XI?H5 zLI=RNH*R-!i2IZG!9T#aw(;7oMhduyYZK#v?VW44_iPVlz++r}=UV6f4&)y2FM?XH z-FjpDuRaQYj}YNogedP_-|B2WS$zB3gxH!GuUv;f{8#!I{M+EiuHW8$;Qj^)f&U}$ z*;{uvI<|jQ$H4yp{Lt;rgB|h5s`E z`7%}~vdDFNAB1@HS=(-GlKqd#$5y(3uurmdpDbX|wA5G9Opedz-)Mhq4jk8t5{YP_ z5-#u`TMrI!CkF@a-Z+M+{B%JoK)}Dxex9}Vto;8M7Kj%Cy-P16a|$6vZ_%47dUfwx zuWxVD%TIpKON%@+2m91UKO{k3N#VR+*2~3msZuP2gL+&ZrbR^${{Bnn&MlO)1NkBU zRmZu7A6~7`oDeUBLbF$Y2n)#e!GS=qlTLDhe3iUIev`aMNFts}R>Gk|wGvWfJ&`X} zlPO%46SRQEL*`W}gez6^8l@vtk#U8B0h4l!OUEjyEafv($#6c`BJ5TMdf4_h=X{tOo_{_xD?f);_h}GkV%PBL6EHirLy8sJ?=qI zalPmn45>cRE=X2cz=$-d$PT9`;P;Luyu-10#5bmCA)mt`%ZspNb^C1YVAP&Y+oOJu z)8n?vibYeM4sXzA8I+@{Eh-OMY(baHqiA!!s87@OH4SvZ^u=`L-Nl?$R^8sQF#Hi^ ztIOebJ6sMyqOczx^SV{pnp=$NqoDz}U$v@MK@
    Iry5q0tflP#|P?sdmvKN|I=i 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 literal 0 HcmV?d00001 diff --git a/src/styles/flat/icons/facebook.svg b/src/styles/flat/icons/facebook.svg index 74dc168..ec20399 100644 --- a/src/styles/flat/icons/facebook.svg +++ b/src/styles/flat/icons/facebook.svg @@ -1 +1,9 @@ - \ No newline at end of file + + + Slice 1 + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/github.svg b/src/styles/flat/icons/github.svg new file mode 100644 index 0000000..bd3d708 --- /dev/null +++ b/src/styles/flat/icons/github.svg @@ -0,0 +1,9 @@ + + + github + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/mailru.svg b/src/styles/flat/icons/mailru.svg new file mode 100644 index 0000000..04b13ba --- /dev/null +++ b/src/styles/flat/icons/mailru.svg @@ -0,0 +1,13 @@ + + + Slice 1 + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/odnoklassniki.svg b/src/styles/flat/icons/odnoklassniki.svg new file mode 100644 index 0000000..4186aff --- /dev/null +++ b/src/styles/flat/icons/odnoklassniki.svg @@ -0,0 +1,9 @@ + + + odnoklassniki + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/pinterest.svg b/src/styles/flat/icons/pinterest.svg index 033eef7..e8d3527 100644 --- a/src/styles/flat/icons/pinterest.svg +++ b/src/styles/flat/icons/pinterest.svg @@ -1 +1,9 @@ - \ No newline at end of file + + + pinterest + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/plusone.svg b/src/styles/flat/icons/plusone.svg index 3e75cc2..c811ef1 100644 --- a/src/styles/flat/icons/plusone.svg +++ b/src/styles/flat/icons/plusone.svg @@ -1 +1,20 @@ - \ No newline at end of file + + + plusone + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/single.svg b/src/styles/flat/icons/single.svg index af7f9fc..b9df5aa 100644 --- a/src/styles/flat/icons/single.svg +++ b/src/styles/flat/icons/single.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + single + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/twitter.svg b/src/styles/flat/icons/twitter.svg index 33629bf..ae692b0 100644 --- a/src/styles/flat/icons/twitter.svg +++ b/src/styles/flat/icons/twitter.svg @@ -1 +1,9 @@ - \ No newline at end of file + + + twitter + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons/vkontakte.svg b/src/styles/flat/icons/vkontakte.svg index 3598f65..caa9c26 100644 --- a/src/styles/flat/icons/vkontakte.svg +++ b/src/styles/flat/icons/vkontakte.svg @@ -1 +1,9 @@ - \ No newline at end of file + + + vkontakte + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/src/styles/flat/icons_src/facebook.svg b/src/styles/flat/icons_src/facebook.svg deleted file mode 100644 index d0668a8..0000000 --- a/src/styles/flat/icons_src/facebook.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/src/styles/flat/icons_src/pinterest.svg b/src/styles/flat/icons_src/pinterest.svg deleted file mode 100644 index 41f2a0d..0000000 --- a/src/styles/flat/icons_src/pinterest.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - diff --git a/src/styles/flat/icons_src/plusone.svg b/src/styles/flat/icons_src/plusone.svg deleted file mode 100644 index df1ff83..0000000 --- a/src/styles/flat/icons_src/plusone.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - diff --git a/src/styles/flat/icons_src/single.svg b/src/styles/flat/icons_src/single.svg deleted file mode 100644 index 33594d2..0000000 --- a/src/styles/flat/icons_src/single.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - diff --git a/src/styles/flat/icons_src/twitter.svg b/src/styles/flat/icons_src/twitter.svg deleted file mode 100644 index c0266e5..0000000 --- a/src/styles/flat/icons_src/twitter.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - diff --git a/src/styles/flat/icons_src/vkontakte.svg b/src/styles/flat/icons_src/vkontakte.svg deleted file mode 100644 index a50e9a0..0000000 --- a/src/styles/flat/icons_src/vkontakte.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - diff --git a/src/styles/flat/index.styl b/src/styles/flat/index.styl index 66b18c9..46b8245 100644 --- a/src/styles/flat/index.styl +++ b/src/styles/flat/index.styl @@ -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; + } } diff --git a/src/styles/flat/webfont.styl b/src/styles/flat/webfont.styl new file mode 100644 index 0000000..ab964d9 --- /dev/null +++ b/src/styles/flat/webfont.styl @@ -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) %>"; +}<% } %>