o){var u=r.not(".small").last();t(u).addClass("small");l()}}--n||a()})});e===!0&&h(l)},l=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,u,a,f,l=t("li",n),c=l.filter(".small"),h=c.length;if(h>0&&h!==l.length){n.removeClass("small-format");c.css("width","42px");u=h*42;i=l.not(".small").length;s=100/i;f=u/i;if(r.calc===!1){a=(n.innerWidth()-1)/i-f;a=Math.floor(a*1e3)/1e3;a+="px"}else a=r.calc+"("+s+"% - "+f+"px)";l.not(".small").css("width",a)}else if(h===l.length){n.addClass("small-format");o()}else{n.removeClass("small-format");o()}});u()},c=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});i();o();t(".rrssb-buttons li .rrssb-text").each(function(e){var n=t(this),r=n.width();n.closest("li").attr("data-size",r)});f(!0)},h=function(e){t(".rrssb-buttons li.small").removeClass("small");f();e()},p=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},d=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(document).ready(function(){t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);p(n.attr("href"),n.find(".rrssb-text").html(),580,470);e.preventDefault()});t(e).resize(function(){h(l);d(function(){h(l)},200,"finished resizing")});c()});e.rrssbInit=c}(window,jQuery);
\ No newline at end of file
+*/+function(t,e,r){"use strict";var s={calc:!1};e.fn.rrssb=function(t){var s=e.extend({description:r,emailAddress:r,emailBody:r,emailSubject:r,image:r,title:r,url:r},t);for(var i in s)s.hasOwnProperty(i)&&s[i]!==r&&(s[i]=a(s[i]));s.url!==r&&(e(this).find(".rrssb-facebook a").attr("href","https://www.facebook.com/sharer/sharer.php?u="+s.url),e(this).find(".rrssb-tumblr a").attr("href","http://tumblr.com/share/link?url="+s.url+(s.title!==r?"&name="+s.title:"")+(s.description!==r?"&description="+s.description:"")),e(this).find(".rrssb-linkedin a").attr("href","http://www.linkedin.com/shareArticle?mini=true&url="+s.url+(s.title!==r?"&title="+s.title:"")+(s.description!==r?"&summary="+s.description:"")),e(this).find(".rrssb-twitter a").attr("href","http://twitter.com/home?status="+(s.description!==r?s.description:"")+"%20"+s.url),e(this).find(".rrssb-hackernews a").attr("href","https://news.ycombinator.com/submitlink?u="+s.url+(s.title!==r?"&text="+s.title:"")),e(this).find(".rrssb-reddit a").attr("href","http://www.reddit.com/submit?url="+s.url+(s.description!==r?"&text="+s.description:"")+(s.title!==r?"&title="+s.title:"")),e(this).find(".rrssb-googleplus a").attr("href","https://plus.google.com/share?url="+(s.description!==r?s.description:"")+"%20"+s.url),e(this).find(".rrssb-pinterest a").attr("href","http://pinterest.com/pin/create/button/?url="+s.url+(s.image!==r?"&media="+s.image:"")+(s.description!==r?"&description="+s.description:"")),e(this).find(".rrssb-pocket a").attr("href","https://getpocket.com/save?url="+s.url),e(this).find(".rrssb-github a").attr("href",s.url)),s.emailAddress!==r&&e(this).find(".rrssb-email a").attr("href","mailto:"+s.emailAddress+"?"+(s.emailSubject!==r?"subject="+s.emailSubject:"")+(s.emailBody!==r?"&body="+s.emailBody:""))};var i=function(){var t=e(""),r=["calc","-webkit-calc","-moz-calc"];e("body").append(t);for(var i=0;i170&&e("li.small",r).length<1?r.addClass("large-format"):r.removeClass("large-format"),200>s?r.removeClass("small-format").addClass("tiny-format"):r.removeClass("tiny-format")})},o=function(){e(".rrssb-buttons").each(function(t){var r=e(this),s=e("li",r),i=s.filter(".small"),a=0,n=0,l=i.first(),o=parseFloat(l.attr("data-size"))+55,c=i.length;if(c===s.length){var d=42*c,m=r.width();m>d+o&&(r.removeClass("small-format"),i.first().removeClass("small"),h())}else{s.not(".small").each(function(t){var r=e(this),s=parseFloat(r.attr("data-size"))+55,i=parseFloat(r.width());a+=i,n+=s});var u=a-n;u>o&&(l.removeClass("small"),h())}})},c=function(t){e(".rrssb-buttons").each(function(t){var r=e(this),s=e("li",r);e(s.get().reverse()).each(function(t,r){var i=e(this);if(i.hasClass("small")===!1){var a=parseFloat(i.attr("data-size"))+55,n=parseFloat(i.width());if(a>n){var l=s.not(".small").last();e(l).addClass("small"),h()}}--r||o()})}),t===!0&&m(h)},h=function(){e(".rrssb-buttons").each(function(t){var r,i,a,l,o,c=e(this),h=e("li",c),d=h.filter(".small"),m=d.length;m>0&&m!==h.length?(c.removeClass("small-format"),d.css("width","42px"),a=42*m,r=h.not(".small").length,i=100/r,o=a/r,s.calc===!1?(l=(c.innerWidth()-1)/r-o,l=Math.floor(1e3*l)/1e3,l+="px"):l=s.calc+"("+i+"% - "+o+"px)",h.not(".small").css("width",l)):m===h.length?(c.addClass("small-format"),n()):(c.removeClass("small-format"),n())}),l()},d=function(){e(".rrssb-buttons").each(function(t){e(this).addClass("rrssb-"+(t+1))}),i(),n(),e(".rrssb-buttons li .rrssb-text").each(function(t){var r=e(this),s=r.width();r.closest("li").attr("data-size",s)}),c(!0)},m=function(t){e(".rrssb-buttons li.small").removeClass("small"),c(),t()},u=function(e,s,i,a){var n=t.screenLeft!==r?t.screenLeft:screen.left,l=t.screenTop!==r?t.screenTop:screen.top,o=t.innerWidth?t.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,c=t.innerHeight?t.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,h=o/2-i/2+n,d=c/3-a/3+l,m=t.open(e,s,"scrollbars=yes, width="+i+", height="+a+", top="+d+", left="+h);t.focus&&m.focus()},f=function(){var t={};return function(e,r,s){s||(s="Don't call this twice without a uniqueId"),t[s]&&clearTimeout(t[s]),t[s]=setTimeout(e,r)}}();e(document).ready(function(){e(".rrssb-buttons a.popup").on("click",function(t){var r=e(this);u(r.attr("href"),r.find(".rrssb-text").html(),580,470),t.preventDefault()}),e(t).resize(function(){m(h),f(function(){m(h)},200,"finished resizing")}),d()}),t.rrssbInit=d}(window,jQuery);
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a5b6726
--- /dev/null
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "RRSSB",
+ "version": "1.7.7",
+ "authors": [
+ "(Joshua Tuscan )",
+ "(Daniel Box )"
+ ],
+ "description": "Ridiculously Responsive Social Sharing Buttons",
+ "main": [
+ "js/rrssb.js",
+ "css/rrssb.css"
+ ],
+ "keywords": [
+ "ridiculously",
+ "RRSSB",
+ "rrssb",
+ "responsive",
+ "sharing",
+ "social",
+ "buttons"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/kni-labs/rrssb"
+ },
+ "license": "MIT",
+ "homepage": "http://kurtnoble.com/labs/rrssb/",
+ "readme": "ERROR! No readme found!",
+ "devDependencies": {
+ "gulp": "*",
+ "gulp-sass": "*",
+ "gulp-uglify": "*",
+ "gulp-filter": "*",
+ "gulp-util": "*",
+ "gulp-rename": "*",
+ "gulp-minify-css": "*",
+ "gulp-autoprefixer": "*",
+ "gulp-imagemin": "*",
+ "browser-sync": "*"
+ }
+}
diff --git a/scss/demo.scss b/scss/demo.scss
index e46dfec..efccc60 100755
--- a/scss/demo.scss
+++ b/scss/demo.scss
@@ -1,129 +1,117 @@
-@import "bourbon";
-
-// config settings
-$button-contents: #fff;
-$email: #0a88ff;
-$facebook: #306199;
-$linkedin: #007bb6;
-$twitter: #26c4f1;
-$googleplus: #e93f2e;
-$youtube: #df1c31;
-$pinterest: #b81621;
-$github: #444;
-$pocket: #ED4054;
+// Styles for demo page only. Not needed for rrssb.
+
+$heading-color: #444;
+$link-color: #0a88ff;
+$small-color: #999;
+$label-color: #777;
+$hr-color: #ddd;
$border-radius: 2px;
$main-font: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-@mixin transition-all($time) {
- -webkit-transition: all $time+s ease;
- -moz-transition: all $time+s ease;
- -o-transition: all $time+s ease;
- transition: all $time+s ease;
-}
body {
- overflow-x: hidden;
+ overflow-x: hidden;
}
a {
- text-decoration: none;
- font-weight: 500;
- color: $email;
+ color: $link-color;
+ font-weight: 500;
+ text-decoration: none;
- &:hover {
- color: shade($email, 55%);
- }
+ &:hover {
+ color: darken($link-color, 15%);
+ }
}
.main-container {
- padding: 1% 6%;
-
- h1 {
- letter-spacing: -.03em;
- color: #444;
- margin: 20px 0 10px 0;
- @include transition-all(0.2);
-
-
- @media screen and (min-width: 1024px) {
- font-size: 40px;
- }
-
- }
-
- h2 {
- color: #444;
- }
-
- p {
- font-size: 16px;
- line-height: 1.4em;
-
- @media screen and (min-width: 1024px) {
- font-size: 20px;
- }
- }
- img.rrssb-preview {
- width: 40%;
- height: auto;
- float: right;
- margin: 0 0 1% 1%;
- @include transition-all(0.2);
-
- @media screen and (max-width: 400px) {
- // width: 100%;
- width: 60%;
- // margin: -25px 0 15px 0;
- }
-
- }
- small {
- display: block;
- margin: 40px 0;
- font-size: 12px;
- color: #999;
- }
+ padding: 1% 6%;
+
+ h1 {
+ transition: all .2s ease;
+ color: $heading-color;
+ letter-spacing: -.03em;
+ margin: 20px 0 10px;
+
+
+ @media screen and (min-width: 1024px) {
+ font-size: 40px;
+ }
+
+ }
+
+ h2 {
+ color: $heading-color;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 1.4em;
+
+ @media screen and (min-width: 1024px) {
+ font-size: 20px;
+ }
+ }
+
+ .rrssb-preview {
+ transition: all .2s ease;
+ float: right;
+ height: auto;
+ margin: 0 0 1% 1%;
+ width: 40%;
+
+ @media screen and (max-width: 400px) {
+ width: 60%;
+ // width: 100%;
+ // margin: -25px 0 15px 0;
+ }
+ }
+
+ small {
+ color: $small-color;
+ display: block;
+ font-size: 12px;
+ margin: 40px 0;
+ }
}
hr {
- background-color: #ddd;
- border: 0;
- height: 1px;
- margin: 0 0 10px 0;
+ background-color: $hr-color;
+ border: 0;
+ height: 1px;
+ margin: 0 0 10px;
}
.share-container {
- position: relative;
- padding: 0 0 25px;
-
- @media screen and (max-width: 320px) {
- padding: 0 0 12px;
- }
-
- .label {
- color: #777;
- display: block;
- float: left;
- font-size: 14px;
- padding: 10px 0 0;
- width: 115px;
-
- @media screen and (max-width: 400px) {
- display: none;
- }
-
- }
-
- .rrssb-buttons {
- float: left;
- width: calc(100% - 116px);
-
- @media screen and (max-width: 400px) {
- width: 100%;
- float: none;
- clear: both;
- }
- }
+ padding: 0 0 25px;
+ position: relative;
+
+ @media screen and (max-width: 320px) {
+ padding: 0 0 12px;
+ }
+
+ .label {
+ color: $label-color;
+ display: block;
+ float: left;
+ font-size: 14px;
+ padding: 10px 0 0;
+ width: 115px;
+
+ @media screen and (max-width: 400px) {
+ display: none;
+ }
+ }
+
+ .rrssb-buttons {
+ float: left;
+ width: calc(100% - 116px);
+
+ @media screen and (max-width: 400px) {
+ clear: both;
+ float: none;
+ width: 100%;
+ }
+ }
}
diff --git a/scss/rrssb.scss b/scss/rrssb.scss
index 81c44a9..6853274 100755
--- a/scss/rrssb.scss
+++ b/scss/rrssb.scss
@@ -16,22 +16,26 @@
// \__\/ \__\/
-// How to use: Add/remove buttons from config settings and $social-list.
-
-// Config settings
-$rrssb-txt: #ffffff !default;
-$rrssb-email: #0a88ff !default;
-$rrssb-facebook: #306199 !default;
-$rrssb-tumblr: #32506d !default;
-$rrssb-linkedin: #007bb6 !default;
-$rrssb-twitter: #26c4f1 !default;
-$rrssb-googleplus: #e93f2e !default;
-$rrssb-reddit: #8bbbe3 !default;
-$rrssb-youtube: #df1c31 !default;
-$rrssb-pinterest: #b81621 !default;
-$rrssb-pocket: #ED4054 !default;
-$rrssb-github: #444444 !default;
-$rrssb-instagram: #517fa4 !default;
+// Note: You can and should add or remove buttons from config settings and
+// $social-list based on your specific needs.
+
+// config settings
+$rrssb-txt: #fff !default;
+$rrssb-email: #0a88ff !default;
+$rrssb-facebook: #306199 !default;
+$rrssb-tumblr: #32506d !default;
+$rrssb-linkedin: #007bb6 !default;
+$rrssb-twitter: #26c4f1 !default;
+$rrssb-googleplus: #e93f2e !default;
+$rrssb-reddit: #8bbbe3 !default;
+$rrssb-youtube: #df1c31 !default;
+$rrssb-pinterest: #b81621 !default;
+$rrssb-pocket: #ed4054 !default;
+$rrssb-github: #444 !default;
+$rrssb-instagram: #517fa4 !default;
+$rrssb-hackernews: #ff6600 !default;
+$rrssb-delicious: #0B79E5 !default;
+$rrssb-vk: #4d71a9 !default;
// Set the border radius for the buttons
$rrssb-border-radius: 2px !default;
@@ -40,341 +44,327 @@ $rrssb-main-font: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
// Variable list for all social button colors to be iterated over.
$social-list: (
- rrssb-email $rrssb-email,
- rrssb-facebook $rrssb-facebook,
- rrssb-tumblr $rrssb-tumblr,
- rrssb-linkedin $rrssb-linkedin,
- rrssb-twitter $rrssb-twitter,
- rrssb-googleplus $rrssb-googleplus,
- rrssb-youtube $rrssb-youtube,
- rrssb-reddit $rrssb-reddit,
- rrssb-pinterest $rrssb-pinterest,
- rrssb-pocket $rrssb-pocket,
- rrssb-github $rrssb-github,
- rrssb-instagram $rrssb-instagram
+ rrssb-email $rrssb-email,
+ rrssb-facebook $rrssb-facebook,
+ rrssb-tumblr $rrssb-tumblr,
+ rrssb-linkedin $rrssb-linkedin,
+ rrssb-twitter $rrssb-twitter,
+ rrssb-googleplus $rrssb-googleplus,
+ rrssb-youtube $rrssb-youtube,
+ rrssb-reddit $rrssb-reddit,
+ rrssb-pinterest $rrssb-pinterest,
+ rrssb-pocket $rrssb-pocket,
+ rrssb-github $rrssb-github,
+ rrssb-instagram $rrssb-instagram,
+ rrssb-delicious $rrssb-delicious,
+ rrssb-vk $rrssb-vk,
+ rrssb-hackernews $rrssb-hackernews
);
-@mixin transition($expression) {
- -webkit-transition: $expression;
- -moz-transition: $expression;
- -o-transition: $expression;
- transition: $expression;
-}
-
-%backface-visibility {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
-}
-
-%border-box {
- -moz-box-sizing:border-box;
- box-sizing: border-box;
-}
-
// some generic classes
.clearfix {
- *zoom: 1;
- &:after {
- clear: both;
- }
+ &:after {
+ clear: both;
+ }
- &:before,
- &:after {
- content: " ";
- display: table;
- }
+ &:before,
+ &:after {
+ content: ' ';
+ display: table;
+ }
}
// The meat and potatoes
.rrssb-buttons {
- @extend %border-box;
- font-family: $rrssb-main-font;
- height: 36px;
- margin: 0;
- padding: 0;
- width: 100%;
-
- li {
- @extend %border-box;
- float: left;
- height: 100%;
- line-height: 13px;
- list-style: none;
- margin: 0;
- padding: 0 2px;
-
- // This generates individual button classes for each item in social list on line 39.
- @each $s-name in $social-list {
-
- &.#{nth($s-name, 1)} {
- a {
- background-color: nth($s-name, 2);
-
- &:hover {
- background-color: darken(nth($s-name, 2), 10%);
- }
- }
- }
-
- } // end @each directive
-
- a {
- @extend %border-box;
- background-color: #ccc;
- border-radius: $rrssb-border-radius;
- display: block;
- font-size: 11px;
- font-weight: bold;
- height: 100%;
- padding: 11px 7px 12px 27px;
- position: relative;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- width: 100%;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- @include transition(background-color 0.2s ease-in-out);
-
- .rrssb-icon {
- display: block;
- left: 10px;
- padding-top: 9px;
- position: absolute;
- top: 0;
- width: 10%;
-
- svg {
- height: 17px;
- width: 17px;
-
- path, polygon {
- fill: $rrssb-txt;
- }
- }
- }
-
- .rrssb-text {
- color: $rrssb-txt;
- }
-
- &:active {
- box-shadow:inset 1px 3px 15px 0 rgba(022,0,0,.25);
- }
- }
-
- &.small {
- a {
- padding: 0;
-
- .rrssb-icon {
- left: auto;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- top: auto;
- width: 100%;
- }
- .rrssb-text {
- visibility: hidden;
- }
- }
- }
- }
-
- &.large-format {
- height: auto;
-
- li {
- height: auto;
-
- // Determine font-size based on number of siblings
- &:first-child:nth-last-child(1) {
- a {
- font-size: 20px; //fallback
- font-size: 4vw;
- }
- }
-
- &:first-child:nth-last-child(2),
- &:first-child:nth-last-child(2) ~ li {
- a {
- font-size: 16px; //fallback
- font-size: 2vw;
- }
- }
-
- &:first-child:nth-last-child(3),
- &:first-child:nth-last-child(3) ~ li {
- a {
- font-size: 14px; //fallback
- font-size: 1.7vw;
- }
- }
-
- &:first-child:nth-last-child(4),
- &:first-child:nth-last-child(4) ~ li {
- a {
- font-size: 13px; //fallback
- font-size: 1.4vw;
- }
- }
-
- &:first-child:nth-last-child(5),
- &:first-child:nth-last-child(5) ~ li {
- a {
- font-size: 13px; //fallback
- font-size: 1.2vw;
- }
- }
-
- &:first-child:nth-last-child(6),
- &:first-child:nth-last-child(6) ~ li {
- a {
- font-size: 12px; //fallback
- font-size: 1.05vw;
- }
- }
-
- &:first-child:nth-last-child(7),
- &:first-child:nth-last-child(7) ~ li {
- a {
- font-size: 11px; //fallback
- font-size: .9vw;
- }
- }
-
- &:first-child:nth-last-child(8),
- &:first-child:nth-last-child(8) ~ li {
- a {
- font-size: 11px; //fallback
- font-size: .8vw;
- }
- }
-
- &:first-child:nth-last-child(9),
- &:first-child:nth-last-child(9) ~ li {
- a {
- font-size: 11px; //fallback
- font-size: .7vw;
- }
- }
-
- &:first-child:nth-last-child(10),
- &:first-child:nth-last-child(10) ~ li {
- a {
- font-size: 11px; //fallback
- font-size: .6vw;
- }
- }
-
- &:first-child:nth-last-child(11),
- &:first-child:nth-last-child(11) ~ li {
- a {
- font-size: 11px; //fallback
- font-size: .5vw;
- }
- }
-
- a {
- border-radius: 0.2em;
- padding: 8.5% 0 8.5% 12%;
- @extend %backface-visibility;
-
- .rrssb-icon {
- height: 100%;
- left: 7%;
- padding-top: 0;
- width: 12%;
-
- svg {
- height: 100%;
- width: 100%;
- position: absolute;
- top:0;
- }
- }
-
- .rrssb-text {
- @extend %backface-visibility;
- }
- }
- }
- }
-
- &.small-format {
- padding-top: 5px;
-
- li {
- height: 80%;
- padding: 0 1px;
-
- a {
- .rrssb-icon {
- height: 100%;
- padding-top: 0;
-
- svg {
- height: 48%;
- position: relative;
- top: 6px;
- width: 80%;
- }
- }
- }
- }
- }
-
- &.tiny-format {
- height: 22px;
- position: relative;
-
- li {
- padding-right: 7px;
-
- a {
- background-color: transparent;
- padding: 0;
-
- .rrssb-icon {
- svg {
- height: 70%;
- width: 100%;
- }
- }
-
- &:hover, &:active {
- background-color: transparent;
- }
- }
-
- // This generates individual button classes for each item in social list on line 39.
- @each $s-name in $social-list {
-
- &.#{nth($s-name, 1)} {
- a {
- .rrssb-icon {
- svg {
- path, polygon {
- fill: nth($s-name, 2);
- }
- }
-
- &:hover {
- .rrssb-icon {
- svg {
- path, polygon {
- fill: darken(nth($s-name, 2), 20%);
- }
- }
- }
- }
- }
- }
- }
- } // end @each directive
- }
- }
+ box-sizing: border-box;
+ font-family: $rrssb-main-font;
+ height: 36px;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+
+ li {
+ box-sizing: border-box;
+ float: left;
+ height: 100%;
+ line-height: 13px;
+ list-style: none;
+ margin: 0;
+ padding: 0 2px;
+
+ // This generates individual button classes for each item in social list on line 39.
+ @each $s-name in $social-list {
+
+ &.#{nth($s-name, 1)} {
+ a {
+ background-color: nth($s-name, 2);
+
+ &:hover {
+ background-color: darken(nth($s-name, 2), 10%);
+ }
+ }
+ }
+
+ } // end @each directive
+
+ a {
+ background-color: #ccc;
+ border-radius: $rrssb-border-radius;
+ box-sizing: border-box;
+ display: block;
+ font-size: 11px;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-weight: bold;
+ height: 100%;
+ padding: 11px 7px 12px 27px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: background-color .2s ease-in-out;
+ width: 100%;
+
+ .rrssb-icon {
+ display: block;
+ left: 10px;
+ padding-top: 9px;
+ position: absolute;
+ top: 0;
+ width: 10%;
+
+ svg {
+ height: 17px;
+ width: 17px;
+
+ path, polygon {
+ fill: $rrssb-txt;
+ }
+ }
+ }
+
+ .rrssb-text {
+ color: $rrssb-txt;
+ }
+
+ &:active {
+ box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, .25);
+ }
+ }
+
+ &.small {
+ a {
+ padding: 0;
+
+ .rrssb-icon {
+ left: auto;
+ margin: 0 auto;
+ overflow: hidden;
+ position: relative;
+ top: auto;
+ width: 100%;
+ }
+
+ .rrssb-text {
+ visibility: hidden;
+ }
+ }
+ }
+ }
+
+ &.large-format {
+ height: auto;
+
+ li {
+ height: auto;
+
+ // Determine font-size based on number of siblings
+ &:first-child:nth-last-child(1) {
+ a {
+ font-size: 20px; //fallback
+ font-size: 4vw;
+ }
+ }
+
+ &:first-child:nth-last-child(2),
+ &:first-child:nth-last-child(2) ~ li {
+ a {
+ font-size: 16px; //fallback
+ font-size: 2vw;
+ }
+ }
+
+ &:first-child:nth-last-child(3),
+ &:first-child:nth-last-child(3) ~ li {
+ a {
+ font-size: 14px; //fallback
+ font-size: 1.7vw;
+ }
+ }
+
+ &:first-child:nth-last-child(4),
+ &:first-child:nth-last-child(4) ~ li {
+ a {
+ font-size: 13px; //fallback
+ font-size: 1.4vw;
+ }
+ }
+
+ &:first-child:nth-last-child(5),
+ &:first-child:nth-last-child(5) ~ li {
+ a {
+ font-size: 13px; //fallback
+ font-size: 1.2vw;
+ }
+ }
+
+ &:first-child:nth-last-child(6),
+ &:first-child:nth-last-child(6) ~ li {
+ a {
+ font-size: 12px; //fallback
+ font-size: 1.05vw;
+ }
+ }
+
+ &:first-child:nth-last-child(7),
+ &:first-child:nth-last-child(7) ~ li {
+ a {
+ font-size: 11px; //fallback
+ font-size: .9vw;
+ }
+ }
+
+ &:first-child:nth-last-child(8),
+ &:first-child:nth-last-child(8) ~ li {
+ a {
+ font-size: 11px; //fallback
+ font-size: .8vw;
+ }
+ }
+
+ &:first-child:nth-last-child(9),
+ &:first-child:nth-last-child(9) ~ li {
+ a {
+ font-size: 11px; //fallback
+ font-size: .7vw;
+ }
+ }
+
+ &:first-child:nth-last-child(10),
+ &:first-child:nth-last-child(10) ~ li {
+ a {
+ font-size: 11px; //fallback
+ font-size: .6vw;
+ }
+ }
+
+ &:first-child:nth-last-child(11),
+ &:first-child:nth-last-child(11) ~ li {
+ a {
+ font-size: 11px; //fallback
+ font-size: .5vw;
+ }
+ }
+
+ a {
+ backface-visibility: hidden;
+ border-radius: .2em;
+ padding: 8.5% 0 8.5% 12%;
+
+ .rrssb-icon {
+ height: 100%;
+ left: 7%;
+ padding-top: 0;
+ width: 12%;
+
+ svg {
+ height: 100%;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
+
+ .rrssb-text {
+ backface-visibility: hidden;
+ }
+ }
+ }
+ }
+
+ &.small-format {
+ padding-top: 5px;
+
+ li {
+ height: 80%;
+ padding: 0 1px;
+
+ a {
+ .rrssb-icon {
+ height: 100%;
+ padding-top: 0;
+
+ svg {
+ height: 48%;
+ position: relative;
+ top: 6px;
+ width: 80%;
+ }
+ }
+ }
+ }
+ }
+
+ &.tiny-format {
+ height: 22px;
+ position: relative;
+
+ li {
+ padding-right: 7px;
+
+ a {
+ background-color: transparent;
+ padding: 0;
+
+ .rrssb-icon {
+ svg {
+ height: 70%;
+ width: 100%;
+ }
+ }
+
+ &:hover,
+ &:active {
+ background-color: transparent;
+ }
+ }
+
+ // This generates individual button classes for each item in social list on line 39.
+ @each $s-name in $social-list {
+
+ &.#{nth($s-name, 1)} {
+ a {
+ .rrssb-icon {
+ svg {
+ path, polygon {
+ fill: nth($s-name, 2);
+ }
+ }
+
+ &:hover {
+ .rrssb-icon {
+ svg {
+ path, polygon {
+ fill: darken(nth($s-name, 2), 20%);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ } // end @each directive
+ }
+ }
}
Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container.