diff --git a/src/App.vue b/src/App.vue index ebe1be2..25e3a89 100644 --- a/src/App.vue +++ b/src/App.vue @@ -448,6 +448,221 @@ v-bind:hasIcon="false" > +
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
@@ -468,6 +683,12 @@ import RedditButton from "./components/RedditButton"; import PocketButton from "./components/PocketButton"; import XingButton from "./components/XingButton"; import OdnoklassnikiButton from "./components/OdnoklassnikiButton"; +import InstapaperButton from "./components/InstapaperButton"; +import HatenaButton from "./components/HatenaButton"; +import EmailButton from "./components/EmailButton"; +import ViberButton from "./components/ViberButton"; +import TelegramButton from "./components/TelegramButton"; +import WhatsAppButton from "./components/WhatsAppButton"; export default { name: "app-share-buttons", @@ -487,13 +708,19 @@ export default { RedditButton, PocketButton, XingButton, - OdnoklassnikiButton + OdnoklassnikiButton, + InstapaperButton, + HatenaButton, + EmailButton, + ViberButton, + TelegramButton, + WhatsAppButton } }; diff --git a/src/components/BloggerButton.vue b/src/components/BloggerButton.vue index bf344d5..f980d41 100644 --- a/src/components/BloggerButton.vue +++ b/src/components/BloggerButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Blogger" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Blogger" }); const configWindow = createWindow(); const url = `https://www.blogger.com/blog-this.g?u=${ this.$props.shareUrl diff --git a/src/components/DiggButton.vue b/src/components/DiggButton.vue index e08038a..55ca5ba 100644 --- a/src/components/DiggButton.vue +++ b/src/components/DiggButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Digg" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Digg" }); const configWindow = createWindow(); const url = `http://digg.com/submit?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/EmailButton.vue b/src/components/EmailButton.vue new file mode 100644 index 0000000..a7295ec --- /dev/null +++ b/src/components/EmailButton.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/components/EvernoteButton.vue b/src/components/EvernoteButton.vue index bc23865..6abe6ee 100644 --- a/src/components/EvernoteButton.vue +++ b/src/components/EvernoteButton.vue @@ -47,8 +47,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Evernote" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Evernote" }); const configWindow = createWindow(); const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/FacebookButton.vue b/src/components/FacebookButton.vue index 7cde5f5..c158575 100644 --- a/src/components/FacebookButton.vue +++ b/src/components/FacebookButton.vue @@ -10,6 +10,9 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" + :keyCounter="keyCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -19,6 +22,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -28,7 +32,9 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getRandomNumber, + getShortNumber } from "../helpers"; export default { @@ -44,20 +50,58 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, + keyCounter: { type: String, default: "" }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Facebook" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "Facebook", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "Facebook" }); + } const configWindow = createWindow(); - const url = `https://www.facebook.com/sharer/sharer.php?u=${ + const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent( this.$props.shareUrl - }`; + )}`; return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + const callback = + this.$props.keyCounter || `Facebook_${getRandomNumber()}`; + const script = document.createElement("script"); + script.src = `https://graph.facebook.com?id=${encodeURIComponent( + this.$props.shareUrl + )}&callback=${callback}`; + document.body.appendChild(script); + + window[callback] = count => { + if (!count) return; + this.counter = count.share.share_count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/FacebookMessengerButton.vue b/src/components/FacebookMessengerButton.vue new file mode 100644 index 0000000..ab0397b --- /dev/null +++ b/src/components/FacebookMessengerButton.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/HatenaButton.vue b/src/components/HatenaButton.vue new file mode 100644 index 0000000..4de17e2 --- /dev/null +++ b/src/components/HatenaButton.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/InstapaperButton.vue b/src/components/InstapaperButton.vue new file mode 100644 index 0000000..c121fac --- /dev/null +++ b/src/components/InstapaperButton.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/LinkedInButton.vue b/src/components/LinkedInButton.vue index 479da19..5acebc3 100644 --- a/src/components/LinkedInButton.vue +++ b/src/components/LinkedInButton.vue @@ -10,6 +10,9 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" + :keyCounter="keyCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -19,6 +22,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -28,7 +32,9 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getRandomNumber, + getShortNumber } from "../helpers"; export default { @@ -44,11 +50,24 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, + keyCounter: { type: String, default: "" }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "LinkedIn" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "LinkedIn", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "LinkedIn" }); + } const configWindow = createWindow(); const url = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent( this.$props.shareUrl @@ -57,7 +76,32 @@ export default { return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + const callback = + this.$props.keyCounter || `LinkedIn_${getRandomNumber()}`; + const script = document.createElement("script"); + script.src = `https://www.linkedin.com/countserv/count/share?url=${encodeURIComponent( + this.$props.shareUrl + )}&callback=${callback}`; + document.body.appendChild(script); + + window[callback] = count => { + if (!count) return; + this.counter = count.count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/LiveJournalButton.vue b/src/components/LiveJournalButton.vue index 6bb6d0b..f762cb3 100644 --- a/src/components/LiveJournalButton.vue +++ b/src/components/LiveJournalButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "LiveJournal" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "LiveJournal" }); const configWindow = createWindow(); const url = `https://livejournal.com/update.bml?event=${encodeURIComponent( this.$props.shareDescription diff --git a/src/components/OdnoklassnikiButton.vue b/src/components/OdnoklassnikiButton.vue index 22ead15..bbb1472 100644 --- a/src/components/OdnoklassnikiButton.vue +++ b/src/components/OdnoklassnikiButton.vue @@ -11,6 +11,8 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -20,6 +22,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -29,7 +32,8 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getShortNumber } from "../helpers"; export default { @@ -45,11 +49,23 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Odnoklassniki" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "Odnoklassniki", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "Odnoklassniki" }); + } const configWindow = createWindow(); const url = `https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=${encodeURIComponent( this.$props.shareUrl @@ -58,7 +74,35 @@ export default { return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + if (window.ODKL && typeof window.ODKL.updateCount === "function") { + return; + } + + const script = document.createElement("script"); + script.src = `https://connect.ok.ru/dk?st.cmd=extLike&uid=1&ref=${encodeURIComponent( + this.$props.shareUrl + )}`; + document.body.appendChild(script); + + window.ODKL = Object.assign({}, { Share: {} }, window.ODKL); + window.ODKL.updateCount = (index, count) => { + if (!count) return; + this.counter = count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/PinterestButton.vue b/src/components/PinterestButton.vue index 86b9a6a..a319768 100644 --- a/src/components/PinterestButton.vue +++ b/src/components/PinterestButton.vue @@ -11,6 +11,9 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" + :keyCounter="keyCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -20,6 +23,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -29,7 +33,9 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getRandomNumber, + getShortNumber } from "../helpers"; export default { @@ -45,11 +51,24 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, + keyCounter: { type: String, default: "" }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Pinterest" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "Pinterest", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "Pinterest" }); + } const configWindow = createWindow(); const url = `https://www.pinterest.com/pin/create/button/?canonicalUrl=${encodeURIComponent( this.$props.shareUrl @@ -60,7 +79,32 @@ export default { return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + const callback = + this.$props.keyCounter || `Pinterest_${getRandomNumber()}`; + const script = document.createElement("script"); + script.src = `https://api.pinterest.com/v1/urls/count.json?url=${encodeURIComponent( + this.$props.shareUrl + )}&callback=${callback}`; + document.body.appendChild(script); + + window[callback] = count => { + if (!count) return; + this.counter = count.count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/PocketButton.vue b/src/components/PocketButton.vue index 2cbecc9..e61c038 100644 --- a/src/components/PocketButton.vue +++ b/src/components/PocketButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Pocket" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Pocket" }); const configWindow = createWindow(); const url = `https://getpocket.com/edit?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/RedditButton.vue b/src/components/RedditButton.vue index 1d9d5a1..9c7cfe1 100644 --- a/src/components/RedditButton.vue +++ b/src/components/RedditButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Reddit" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Reddit" }); const configWindow = createWindow(); const url = `https://reddit.com/submit?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/RenrenButton.vue b/src/components/RenrenButton.vue index b76bc04..1411b77 100644 --- a/src/components/RenrenButton.vue +++ b/src/components/RenrenButton.vue @@ -51,8 +51,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Renren" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Renren" }); const configWindow = createWindow(); const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/TelegramButton.vue b/src/components/TelegramButton.vue new file mode 100644 index 0000000..86eb450 --- /dev/null +++ b/src/components/TelegramButton.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/src/components/TumblrButton.vue b/src/components/TumblrButton.vue index f9df496..545a4f1 100644 --- a/src/components/TumblrButton.vue +++ b/src/components/TumblrButton.vue @@ -11,6 +11,9 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" + :keyCounter="keyCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -20,6 +23,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -29,7 +33,9 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getRandomNumber, + getShortNumber } from "../helpers"; export default { @@ -45,11 +51,24 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, + keyCounter: { type: String, default: "" }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Tumblr" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "Tumblr", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "Tumblr" }); + } const configWindow = createWindow(); const url = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent( this.$props.shareUrl @@ -62,7 +81,31 @@ export default { return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + const callback = this.$props.keyCounter || `Tumblr_${getRandomNumber()}`; + const script = document.createElement("script"); + script.src = `https://api.tumblr.com/v2/share/stats?url=${encodeURIComponent( + this.$props.shareUrl + )}&callback=${callback}`; + document.body.appendChild(script); + + window[callback] = count => { + if (!count) return; + this.counter = count.response.note_count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue index 3741db8..6552652 100644 --- a/src/components/TwitterButton.vue +++ b/src/components/TwitterButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Twitter" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Twitter" }); const configWindow = createWindow(); const url = `https://twitter.com/share?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/ViberButton.vue b/src/components/ViberButton.vue new file mode 100644 index 0000000..a811247 --- /dev/null +++ b/src/components/ViberButton.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/src/components/VkontakteButton.vue b/src/components/VkontakteButton.vue index 0a94b04..facfd97 100644 --- a/src/components/VkontakteButton.vue +++ b/src/components/VkontakteButton.vue @@ -10,6 +10,8 @@ :windowWidth="windowWidth" :windowHeight="windowHeight" :hasIcon="hasIcon" + :hasCounter="hasCounter" + :digitsCounter="digitsCounter" :isBlank="isBlank" @click="openShareWindow" > @@ -19,6 +21,7 @@ /> {{btnText}} + {{ shortСounter }} @@ -28,7 +31,9 @@ import { getDocumentHref, getDocumentTitle, eventEmit, - createWindow + createWindow, + getRandomNumber, + getShortNumber } from "../helpers"; export default { @@ -44,11 +49,23 @@ export default { windowWidth: { type: Number }, windowHeight: { type: Number }, hasIcon: { type: Boolean, default: true }, + hasCounter: { type: Boolean, default: false }, + digitsCounter: { type: Number, default: 0 }, isBlank: { type: Boolean, default: true } }, + mounted() { + if (this.$props.hasCounter) this.getShareCounter(); + }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "vk" }); + openShareWindow() { + if (this.$props.hasCounter) { + eventEmit(this, "onShareCounter", { + name: "vk", + counter: this.counter + }); + } else { + eventEmit(this, "onShare", { name: "vk" }); + } const configWindow = createWindow(); const url = `https://vk.com/share.php?url=${encodeURIComponent( this.$props.shareUrl @@ -61,7 +78,39 @@ export default { return this.$props.isBlank ? window.open(url, "__blank") : window.open(url, "Share this", configWindow); + }, + + getShareCounter() { + if ( + window.VK && + window.VK.Share && + typeof window.VK.Share.count === "function" + ) { + return; + } + + const script = document.createElement("script"); + script.src = `https://vk.com/share.php?act=count&index=${getRandomNumber()}&url=${encodeURIComponent( + this.$props.shareUrl + )}`; + document.body.appendChild(script); + + window.VK = Object.assign({}, { Share: {} }, window.VK); + window.VK.Share.count = (index, count) => { + if (!count) return; + this.counter = count; + this.shortСounter = getShortNumber( + this.counter, + this.$props.digitsCounter + ); + }; } + }, + data() { + return { + counter: 0, + shortСounter: 0 + }; } }; diff --git a/src/components/WeiboButton.vue b/src/components/WeiboButton.vue index 321daad..c4f51bc 100644 --- a/src/components/WeiboButton.vue +++ b/src/components/WeiboButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Weibo" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Weibo" }); const configWindow = createWindow(); const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/components/WhatsAppButton.vue b/src/components/WhatsAppButton.vue new file mode 100644 index 0000000..3292bb8 --- /dev/null +++ b/src/components/WhatsAppButton.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/XingButton.vue b/src/components/XingButton.vue index 5e644c0..8fffe13 100644 --- a/src/components/XingButton.vue +++ b/src/components/XingButton.vue @@ -48,8 +48,8 @@ export default { isBlank: { type: Boolean, default: true } }, methods: { - openShareWindow: function() { - eventEmit(this, { name: "Xing" }); + openShareWindow() { + eventEmit(this, "onShare", { name: "Xing" }); const configWindow = createWindow(); const url = `https://www.xing.com/social_plugins/share?url=${encodeURIComponent( this.$props.shareUrl diff --git a/src/helpers/event.js b/src/helpers/event.js index 9598282..20c2b99 100644 --- a/src/helpers/event.js +++ b/src/helpers/event.js @@ -2,7 +2,9 @@ * Trigger an event. * * @param {object} vm - VueComponent. + * @param {string} eventName - Nameof the emitted events. * @param {object} option - Custom options. * @return {object} - Event. */ -export const eventEmit = (vm, option) => vm.$emit("onClick", { ...option }); +export const eventEmit = (vm, eventName = "", option) => + vm.$emit(eventName, { ...option }); diff --git a/src/helpers/getRandomNumber.js b/src/helpers/getRandomNumber.js new file mode 100644 index 0000000..7d5d22a --- /dev/null +++ b/src/helpers/getRandomNumber.js @@ -0,0 +1,9 @@ +/** + * Get random number. + * + * @param {number} min - Lower possible number. + * @param {number} max - Largest possible number. + * @returns {number} - Random number. + */ +export const getRandomNumber = (min = 1, max = 9000) => + Math.floor(Math.random() * (max - min + 1) + min); diff --git a/src/helpers/getShortNumber.js b/src/helpers/getShortNumber.js new file mode 100644 index 0000000..e6c79a9 --- /dev/null +++ b/src/helpers/getShortNumber.js @@ -0,0 +1,20 @@ +/** + * Format the number in a short record. + * + * @param {number} number - Initial number. + * @param {number} digits - The number of digits to appear after the decimal point. + * @returns {number|string} - Formatted number. + */ +export const getShortNumber = (number, digits = 0) => { + const units = ["k", "m", "g", "t", "p", "e", "z", "y"]; + + for (let index = units.length - 1; index >= 0; index--) { + const decimal = Math.pow(1000, index + 1); + + if (number <= -decimal || number >= decimal) { + return `${Number(number / decimal).toFixed(digits)}${units[index]}`; + } + } + + return number; +}; diff --git a/src/helpers/index.js b/src/helpers/index.js index cc6f81d..9dcd864 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -1,3 +1,5 @@ export { getDocumentHref, getDocumentTitle } from "./documentData.js"; export { eventEmit } from "./event"; export { createWindow } from "./createWindow"; +export { getRandomNumber } from "./getRandomNumber"; +export { getShortNumber } from "./getShortNumber"; diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg deleted file mode 100644 index 5b54d8e..0000000 --- a/src/icons/facebook.svg +++ /dev/null @@ -1 +0,0 @@ -Facebook icon \ No newline at end of file diff --git a/src/icons/twitter-color.svg b/src/icons/twitter-color.svg deleted file mode 100644 index 317fd94..0000000 --- a/src/icons/twitter-color.svg +++ /dev/null @@ -1 +0,0 @@ -Twitter icon \ No newline at end of file diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg deleted file mode 100644 index d04eaa2..0000000 --- a/src/icons/twitter.svg +++ /dev/null @@ -1 +0,0 @@ -Twitter icon \ No newline at end of file diff --git a/src/style/bloggerButton.css b/src/style/bloggerButton.css index c59b794..f7537a7 100644 --- a/src/style/bloggerButton.css +++ b/src/style/bloggerButton.css @@ -40,3 +40,12 @@ .share-button--blogger.share-button--outline:hover .share-button__icon path { fill: hsla(14, 100%, 57%, 0.9); } + +.share-button--blogger.share-button--painted { + background-color: transparent; + border-color: hsla(14, 77%, 47%, 1); +} + +.share-button--blogger.share-button--painted::before { + background-color: hsla(14, 100%, 57%, 1); +} diff --git a/src/style/diggButton.css b/src/style/diggButton.css index 6e6b57c..cb48640 100644 --- a/src/style/diggButton.css +++ b/src/style/diggButton.css @@ -40,3 +40,12 @@ .share-button--digg.share-button--outline:hover .share-button__icon path { fill: hsla(0, 0%, 0%, 0.9); } + +.share-button--digg.share-button--painted { + background-color: transparent; + border-color: hsla(0, 0%, 0%, 1); +} + +.share-button--digg.share-button--painted::before { + background-color: hsla(0, 0%, 0%, 1); +} diff --git a/src/style/emailButton.css b/src/style/emailButton.css new file mode 100644 index 0000000..7f08e9b --- /dev/null +++ b/src/style/emailButton.css @@ -0,0 +1,51 @@ +/* Email */ +.share-button--email { + background-color: hsla(194, 77%, 56%, 1); +} + +.share-button--email:focus { + box-shadow: 0 0 0 3px hsla(194, 77%, 81%, 0.4); +} + +.share-button--email:hover { + background-color: hsla(194, 77%, 56%, 0.9); +} + +.share-button--email .share-button__icon path { + fill: #fff; +} + +.share-button--email.share-button--outline { + background-color: transparent; + border-color: hsla(194, 77%, 56%, 1); +} + +.share-button--email.share-button--outline:hover { + background-color: transparent; + border-color: hsla(194, 77%, 56%, 0.9); +} + +.share-button--email.share-button--outline .share-button__text { + color: hsla(194, 77%, 56%, 1); +} + +.share-button--email.share-button--outline:hover .share-button__text { + color: hsla(194, 77%, 56%, 0.9); +} + +.share-button--email.share-button--outline .share-button__icon path { + fill: hsla(194, 77%, 56%, 1); +} + +.share-button--email.share-button--outline:hover .share-button__icon path { + fill: hsla(194, 77%, 56%, 0.9); +} + +.share-button--email.share-button--painted { + background-color: transparent; + border-color: hsla(193, 54%, 46%, 1); +} + +.share-button--email.share-button--painted::before { + background-color: hsla(194, 77%, 56%, 1); +} diff --git a/src/style/evernoteButton.css b/src/style/evernoteButton.css index 31aadf9..bbd92ae 100644 --- a/src/style/evernoteButton.css +++ b/src/style/evernoteButton.css @@ -40,3 +40,12 @@ .share-button--evernote.share-button--outline:hover .share-button__icon path { fill: hsla(136, 100%, 33%, 0.9); } + +.share-button--evernote.share-button--painted { + background-color: transparent; + border-color: hsla(135, 77%, 23%, 1); +} + +.share-button--evernote.share-button--painted::before { + background-color: hsla(136, 100%, 33%, 1); +} diff --git a/src/style/facebookButton.css b/src/style/facebookButton.css index aa2f101..e8f9825 100644 --- a/src/style/facebookButton.css +++ b/src/style/facebookButton.css @@ -40,3 +40,26 @@ .share-button--facebook.share-button--outline:hover .share-button__icon path { fill: hsla(221, 44%, 41%, 0.9); } + +.share-button--facebook.share-button--outline .share-button__counter { + color: hsla(221, 44%, 41%, 0.9); + border-color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--painted { + background-color: transparent; + border-color: hsla(220, 21%, 31%, 1); +} + +.share-button--facebook.share-button--painted::before { + background-color: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(220, 21%, 31%, 1); +} + +.share-button--facebook.share-button--painted .share-button__counter::before { + background-color: hsla(221, 44%, 41%, 1); +} diff --git a/src/style/facebookMessengerButton.css b/src/style/facebookMessengerButton.css new file mode 100644 index 0000000..9c9bd42 --- /dev/null +++ b/src/style/facebookMessengerButton.css @@ -0,0 +1,51 @@ +/* Facebook */ +.share-button--facebook { + background-color: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook:focus { + box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4); +} + +.share-button--facebook:hover { + background-color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook .share-button__icon path { + fill: #fff; +} + +.share-button--facebook.share-button--outline { + background-color: transparent; + border-color: hsl(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover { + background-color: transparent; + border-color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--outline .share-button__text { + color: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover .share-button__text { + color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--outline .share-button__icon path { + fill: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover .share-button__icon path { + fill: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--painted { + background-color: transparent; + border-color: hsla(220, 21%, 31%, 1); +} + +.share-button--facebook.share-button--painted::before { + background-color: hsla(221, 44%, 41%, 1); +} diff --git a/src/style/hatenaButton.css b/src/style/hatenaButton.css new file mode 100644 index 0000000..7ab7c5a --- /dev/null +++ b/src/style/hatenaButton.css @@ -0,0 +1,51 @@ +/* Hatena */ +.share-button--hatena { + background-color: hsla(196, 100%, 44%, 1); +} + +.share-button--hatena:focus { + box-shadow: 0 0 0 3px hsla(196, 94%, 69%, 0.4); +} + +.share-button--hatena:hover { + background-color: hsla(196, 100%, 44%, 0.9); +} + +.share-button--hatena .share-button__icon path { + fill: #fff; +} + +.share-button--hatena.share-button--outline { + background-color: transparent; + border-color: hsla(196, 100%, 44%, 1); +} + +.share-button--hatena.share-button--outline:hover { + background-color: transparent; + border-color: hsla(196, 100%, 44%, 0.9); +} + +.share-button--hatena.share-button--outline .share-button__text { + color: hsla(196, 100%, 44%, 1); +} + +.share-button--hatena.share-button--outline:hover .share-button__text { + color: hsla(196, 100%, 44%, 0.9); +} + +.share-button--hatena.share-button--outline .share-button__icon path { + fill: hsla(196, 100%, 44%, 1); +} + +.share-button--hatena.share-button--outline:hover .share-button__icon path { + fill: hsla(196, 100%, 44%, 0.9); +} + +.share-button--hatena.share-button--painted { + background-color: transparent; + border-color: hsla(195, 77%, 34%, 1); +} + +.share-button--hatena.share-button--painted::before { + background-color: hsla(196, 100%, 44%, 1); +} diff --git a/src/style/index.css b/src/style/index.css index 0924daf..0d8b094 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -5,8 +5,9 @@ .share-button { display: inline-block; + min-width: 42px; min-height: 42px; - padding: 10px 12px; + padding: 10px 8px; margin: 4px; color: #fff; background-color: #fff; @@ -47,23 +48,32 @@ .share-button__icon { display: inline-block; - margin: 0 7px; - padding: 0; + padding: 0 7px; + margin: 0; font-size: 0; vertical-align: middle; } .share-button__icon:last-child { - margin: 0; + padding: 0; } .share-button__text { display: inline-block; - margin: 0 7px; + padding: 0 7px; font-size: 16px; vertical-align: middle; } +.share-button__counter { + display: inline-block; + padding: 3px 10px; + margin-left: 4px; + font-size: 12px; + border-left: 1px solid #fff; + vertical-align: middle; +} + /* Circle */ .share-button--circle { min-width: 42px; @@ -72,8 +82,109 @@ border-radius: 42px; } -/* Circle */ +/* Outline */ .share-button--outline { background-color: transparent; border: 1px solid; } + +/* Painted */ +.share-button--painted { + position: relative; + min-width: 42px; + min-height: 42px; + padding: 15px; + margin-bottom: 30px; + border-radius: 42px; + background-color: transparent; + border: 3px solid; +} + +.share-button--painted::before { + content: ""; + z-index: -1; + position: absolute; + top: -1.5px; + left: -1.5px; + display: block; + width: calc(100% + 3px); + height: calc(100% + 3px); + background-color: #000; + border-radius: 50%; + transform: translate3d(3px, 2px, 0); + transition: transform 0.2s ease-in-out; +} + +.share-button--painted:hover::before { + transform: translate3d(0, 0, 0); +} + +.share-button--painted:focus::before { + transform: translate3d(0, 0, 0); +} + +.share-button--painted .share-button__icon { + width: 30px; + height: 30px; + padding: 0; +} + +.share-button--painted .share-button__text { + display: none; +} + +.share-button--painted .share-button__counter { + position: absolute; + bottom: -30px; + right: -7px; + margin: 0; + padding: 4px 10px; + border: 3px solid; + font-size: 8px; + border-radius: 15px; +} + +.share-button--painted .share-button__counter::before { + content: ""; + z-index: -1; + position: absolute; + top: -1.65px; + left: -1.5px; + display: block; + width: calc(100% + 3px); + height: calc(100% + 3px); + border-radius: 15px; + transform: translate3d(-3px, 1.5px, 0); + transition: transform 0.2s ease-in-out; +} + +@media (max-width: 768px) { + .share-button { + min-width: 38px; + min-height: 38px; + padding: 8px 8px; + margin: 2px; + } + + .share-button__icon { + width: 18px; + height: 18px; + padding: 0 4px; + } + + .share-button__text { + padding: 0 4px; + font-size: 14px; + } + + /* Circle */ + .share-button--circle { + border-radius: 38px; + } + + /* Painted */ + .share-button--painted .share-button__icon { + width: 16px; + height: 16px; + } +} diff --git a/src/style/instapaperButton.css b/src/style/instapaperButton.css new file mode 100644 index 0000000..16bb272 --- /dev/null +++ b/src/style/instapaperButton.css @@ -0,0 +1,51 @@ +/* Instapaper */ +.share-button--instapaper { + background-color: hsla(0, 0%, 12%, 1); +} + +.share-button--instapaper:focus { + box-shadow: 0 0 0 3px hsla(0, 0%, 37%, 0.4); +} + +.share-button--instapaper:hover { + background-color: hsla(0, 0%, 12%, 0.9); +} + +.share-button--instapaper .share-button__icon path { + fill: #fff; +} + +.share-button--instapaper.share-button--outline { + background-color: transparent; + border-color: hsla(0, 0%, 12%, 1); +} + +.share-button--instapaper.share-button--outline:hover { + background-color: transparent; + border-color: hsla(0, 0%, 12%, 0.9); +} + +.share-button--instapaper.share-button--outline .share-button__text { + color: hsla(0, 0%, 12%, 1); +} + +.share-button--instapaper.share-button--outline:hover .share-button__text { + color: hsla(0, 0%, 12%, 0.9); +} + +.share-button--instapaper.share-button--outline .share-button__icon path { + fill: hsla(0, 0%, 12%, 1); +} + +.share-button--instapaper.share-button--outline:hover .share-button__icon path { + fill: hsla(0, 0%, 12%, 0.9); +} + +.share-button--instapaper.share-button--painted { + background-color: transparent; + border-color: hsla(0, 0%, 0%, 1); +} + +.share-button--instapaper.share-button--painted::before { + background-color: hsla(0, 0%, 12%, 1); +} diff --git a/src/style/linkedInButton.css b/src/style/linkedInButton.css index 60167af..a25fe5c 100644 --- a/src/style/linkedInButton.css +++ b/src/style/linkedInButton.css @@ -40,3 +40,26 @@ .share-button--linkedIn.share-button--outline:hover .share-button__icon path { fill: hsla(201, 100%, 35%, 0.9); } + +.share-button--linkedIn.share-button--outline .share-button__counter { + color: hsla(201, 100%, 35%, 0.9); + border-color: hsla(201, 100%, 35%, 0.9); +} + +.share-button--linkedIn.share-button--painted { + background-color: transparent; + border-color: hsla(200, 77%, 25%, 1); +} + +.share-button--linkedIn.share-button--painted::before { + background-color: hsla(201, 100%, 35%, 1); +} + +.share-button--linkedIn.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(200, 77%, 25%, 1); +} + +.share-button--linkedIn.share-button--painted .share-button__counter::before { + background-color: hsla(201, 100%, 35%, 1); +} diff --git a/src/style/livejournalButton.css b/src/style/livejournalButton.css index 3846a6c..0548163 100644 --- a/src/style/livejournalButton.css +++ b/src/style/livejournalButton.css @@ -42,3 +42,12 @@ path { fill: hsla(195, 100%, 46%, 0.9); } + +.share-button--livejournal.share-button--painted { + background-color: transparent; + border-color: hsla(194, 77%, 36%, 1); +} + +.share-button--livejournal.share-button--painted::before { + background-color: hsla(195, 100%, 46%, 1); +} diff --git a/src/style/odnoklassnikiButton.css b/src/style/odnoklassnikiButton.css index da85082..abe02f9 100644 --- a/src/style/odnoklassnikiButton.css +++ b/src/style/odnoklassnikiButton.css @@ -42,3 +42,27 @@ path { fill: hsla(24, 91%, 53%, 0.9); } + +.share-button--odnoklassniki.share-button--outline .share-button__counter { + color: hsla(24, 91%, 53%, 0.9); + border-color: hsla(24, 91%, 53%, 0.9); +} + +.share-button--odnoklassniki.share-button--painted { + background-color: transparent; + border-color: hsla(23, 68%, 43%, 1); +} + +.share-button--odnoklassniki.share-button--painted::before { + background-color: hsla(24, 91%, 53%, 1); +} + +.share-button--odnoklassniki.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(23, 68%, 43%, 1); +} + +.share-button--odnoklassniki.share-button--painted + .share-button__counter::before { + background-color: hsla(24, 91%, 53%, 1); +} diff --git a/src/style/pinterestButton.css b/src/style/pinterestButton.css index 86fece9..f6f4980 100644 --- a/src/style/pinterestButton.css +++ b/src/style/pinterestButton.css @@ -40,3 +40,26 @@ .share-button--pinterest.share-button--outline:hover .share-button__icon path { fill: hsla(353, 92%, 39%, 0.9); } + +.share-button--pinterest.share-button--outline .share-button__counter { + color: hsla(353, 92%, 39%, 0.9); + border-color: hsla(353, 92%, 39%, 0.9); +} + +.share-button--pinterest.share-button--painted { + background-color: transparent; + border-color: hsla(352, 69%, 29%, 1); +} + +.share-button--pinterest.share-button--painted::before { + background-color: hsla(353, 92%, 39%, 1); +} + +.share-button--pinterest.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(352, 69%, 29%, 1); +} + +.share-button--pinterest.share-button--painted .share-button__counter::before { + background-color: hsla(353, 92%, 39%, 1); +} diff --git a/src/style/pocketButton.css b/src/style/pocketButton.css index b880d1c..3ed4c20 100644 --- a/src/style/pocketButton.css +++ b/src/style/pocketButton.css @@ -40,3 +40,12 @@ .share-button--pocket.share-button--outline:hover .share-button__icon path { fill: hsla(352, 85%, 59%, 0.9); } + +.share-button--pocket.share-button--painted { + background-color: transparent; + border-color: hsla(351, 62%, 49%, 1); +} + +.share-button--pocket.share-button--painted::before { + background-color: hsla(352, 85%, 59%, 1); +} diff --git a/src/style/redditButton.css b/src/style/redditButton.css index 6c82d4d..61cdb79 100644 --- a/src/style/redditButton.css +++ b/src/style/redditButton.css @@ -40,3 +40,12 @@ .share-button--reddit.share-button--outline:hover .share-button__icon path { fill: hsla(16, 100%, 50%, 0.9); } + +.share-button--reddit.share-button--painted { + background-color: transparent; + border-color: hsla(15, 77%, 40%, 1); +} + +.share-button--reddit.share-button--painted::before { + background-color: hsla(16, 100%, 50%, 1); +} diff --git a/src/style/renrenButton.css b/src/style/renrenButton.css index 2e2fe22..0719f7b 100644 --- a/src/style/renrenButton.css +++ b/src/style/renrenButton.css @@ -40,3 +40,12 @@ .share-button--renren.share-button--outline:hover .share-button__icon path { fill: hsla(207, 71%, 45%, 0.9); } + +.share-button--renren.share-button--painted { + background-color: transparent; + border-color: hsla(206, 48%, 35%, 1); +} + +.share-button--renren.share-button--painted::before { + background-color: hsla(207, 71%, 45%, 1); +} diff --git a/src/style/telegramButton.css b/src/style/telegramButton.css new file mode 100644 index 0000000..ff55aaf --- /dev/null +++ b/src/style/telegramButton.css @@ -0,0 +1,51 @@ +/* Telegram */ +.share-button--telegram { + background-color: hsla(200, 74%, 53%, 1); +} + +.share-button--telegram:focus { + box-shadow: 0 0 0 3px hsla(200, 68%, 78%, 0.4); +} + +.share-button--telegram:hover { + background-color: hsla(200, 74%, 53%, 0.9); +} + +.share-button--telegram .share-button__icon path { + fill: #fff; +} + +.share-button--telegram.share-button--outline { + background-color: transparent; + border-color: hsla(200, 74%, 53%, 1); +} + +.share-button--telegram.share-button--outline:hover { + background-color: transparent; + border-color: hsla(200, 74%, 53%, 0.9); +} + +.share-button--telegram.share-button--outline .share-button__text { + color: hsla(200, 74%, 53%, 1); +} + +.share-button--telegram.share-button--outline:hover .share-button__text { + color: hsla(200, 74%, 53%, 0.9); +} + +.share-button--telegram.share-button--outline .share-button__icon path { + fill: hsla(200, 74%, 53%, 1); +} + +.share-button--telegram.share-button--outline:hover .share-button__icon path { + fill: hsla(200, 74%, 53%, 0.9); +} + +.share-button--telegram.share-button--painted { + background-color: transparent; + border-color: hsla(199, 51%, 43%, 1); +} + +.share-button--telegram.share-button--painted::before { + background-color: hsla(200, 74%, 53%, 1); +} diff --git a/src/style/tumblrButton.css b/src/style/tumblrButton.css index 26307d7..2fb0b1f 100644 --- a/src/style/tumblrButton.css +++ b/src/style/tumblrButton.css @@ -40,3 +40,26 @@ .share-button--tumblr.share-button--outline:hover .share-button__icon path { fill: hsla(215, 27%, 29%, 0.9); } + +.share-button--tumblr.share-button--outline .share-button__counter { + color: hsla(215, 27%, 29%, 0.9); + border-color: hsla(215, 27%, 29%, 0.9); +} + +.share-button--tumblr.share-button--painted { + background-color: transparent; + border-color: hsla(214, 4%, 19%, 1); +} + +.share-button--tumblr.share-button--painted::before { + background-color: hsla(215, 27%, 29%, 1); +} + +.share-button--tumblr.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(214, 4%, 19%, 1); +} + +.share-button--tumblr.share-button--painted .share-button__counter::before { + background-color: hsla(215, 27%, 29%, 1); +} diff --git a/src/style/twitterButton.css b/src/style/twitterButton.css index 7e6c38f..3026bbd 100644 --- a/src/style/twitterButton.css +++ b/src/style/twitterButton.css @@ -40,3 +40,26 @@ .share-button--twitter.share-button--outline:hover .share-button__icon path { fill: hsla(203, 89%, 53%, 0.9); } + +.share-button--twitter.share-button--outline .share-button__counter { + color: hsla(203, 89%, 53%, 0.9); + border-color: hsla(203, 89%, 53%, 0.9); +} + +.share-button--twitter.share-button--painted { + background-color: transparent; + border-color: hsla(202, 66%, 43%, 1); +} + +.share-button--twitter.share-button--painted::before { + background-color: hsla(203, 89%, 53%, 1); +} + +.share-button--twitter.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(202, 66%, 43%, 1); +} + +.share-button--twitter.share-button--painted .share-button__counter::before { + background-color: hsla(203, 89%, 53%, 1); +} diff --git a/src/style/viberButton.css b/src/style/viberButton.css new file mode 100644 index 0000000..4786038 --- /dev/null +++ b/src/style/viberButton.css @@ -0,0 +1,51 @@ +/* Viber */ +.share-button--viber { + background-color: hsla(248, 33%, 52%, 1); +} + +.share-button--viber:focus { + box-shadow: 0 0 0 3px hsla(248, 27%, 77%, 0.4); +} + +.share-button--viber:hover { + background-color: hsla(248, 33%, 52%, 0.9); +} + +.share-button--viber .share-button__icon path { + fill: #fff; +} + +.share-button--viber.share-button--outline { + background-color: transparent; + border-color: hsla(248, 33%, 52%, 1); +} + +.share-button--viber.share-button--outline:hover { + background-color: transparent; + border-color: hsla(248, 33%, 52%, 0.9); +} + +.share-button--viber.share-button--outline .share-button__text { + color: hsla(248, 33%, 52%, 1); +} + +.share-button--viber.share-button--outline:hover .share-button__text { + color: hsla(248, 33%, 52%, 0.9); +} + +.share-button--viber.share-button--outline .share-button__icon path { + fill: hsla(248, 33%, 52%, 1); +} + +.share-button--viber.share-button--outline:hover .share-button__icon path { + fill: hsla(248, 33%, 52%, 0.9); +} + +.share-button--viber.share-button--painted { + background-color: transparent; + border-color: hsla(247, 10%, 42%, 1); +} + +.share-button--viber.share-button--painted::before { + background-color: hsla(248, 33%, 52%, 1); +} diff --git a/src/style/vkontakteButton.css b/src/style/vkontakteButton.css index 250a1a8..ee2ff53 100644 --- a/src/style/vkontakteButton.css +++ b/src/style/vkontakteButton.css @@ -40,3 +40,26 @@ .share-button--vk.share-button--outline:hover .share-button__icon path { fill: hsla(212, 28%, 52%, 0.9); } + +.share-button--vk.share-button--outline .share-button__counter { + color: hsla(212, 28%, 52%, 0.9); + border-color: hsla(212, 28%, 52%, 0.9); +} + +.share-button--vk.share-button--painted { + background-color: transparent; + border-color: hsla(211, 5%, 42%, 1); +} + +.share-button--vk.share-button--painted::before { + background-color: hsla(212, 28%, 52%, 1); +} + +.share-button--vk.share-button--painted .share-button__counter { + color: #fff; + border-color: hsla(211, 5%, 42%, 1); +} + +.share-button--vk.share-button--painted .share-button__counter::before { + background-color: hsla(212, 28%, 52%, 1); +} diff --git a/src/style/weiboButton.css b/src/style/weiboButton.css index c00c5fb..66ca4b6 100644 --- a/src/style/weiboButton.css +++ b/src/style/weiboButton.css @@ -40,3 +40,12 @@ .share-button--weibo.share-button--outline:hover .share-button__icon path { fill: hsla(353, 83%, 49%, 0.9); } + +.share-button--weibo.share-button--painted { + background-color: transparent; + border-color: hsla(352, 60%, 39%, 1); +} + +.share-button--weibo.share-button--painted::before { + background-color: hsla(353, 83%, 49%, 1); +} diff --git a/src/style/whatsAppButton.css b/src/style/whatsAppButton.css new file mode 100644 index 0000000..fef4752 --- /dev/null +++ b/src/style/whatsAppButton.css @@ -0,0 +1,51 @@ +/* WhatsApp */ +.share-button--whatsApp { + background-color: hsla(142, 70%, 49%, 1); +} + +.share-button--whatsApp:focus { + box-shadow: 0 0 0 3px hsla(142, 64%, 74%, 0.4); +} + +.share-button--whatsApp:hover { + background-color: hsla(142, 70%, 49%, 0.9); +} + +.share-button--whatsApp .share-button__icon path { + fill: #fff; +} + +.share-button--whatsApp.share-button--outline { + background-color: transparent; + border-color: hsla(142, 70%, 49%, 1); +} + +.share-button--whatsApp.share-button--outline:hover { + background-color: transparent; + border-color: hsla(142, 70%, 49%, 0.9); +} + +.share-button--whatsApp.share-button--outline .share-button__text { + color: hsla(142, 70%, 49%, 1); +} + +.share-button--whatsApp.share-button--outline:hover .share-button__text { + color: hsla(142, 70%, 49%, 0.9); +} + +.share-button--whatsApp.share-button--outline .share-button__icon path { + fill: hsla(142, 70%, 49%, 1); +} + +.share-button--whatsApp.share-button--outline:hover .share-button__icon path { + fill: hsla(142, 70%, 49%, 0.9); +} + +.share-button--whatsApp.share-button--painted { + background-color: transparent; + border-color: hsla(141, 47%, 39%, 1); +} + +.share-button--whatsApp.share-button--painted::before { + background-color: hsla(142, 70%, 49%, 1); +} diff --git a/src/style/xingButton.css b/src/style/xingButton.css index ecd1b56..c7c2e6a 100644 --- a/src/style/xingButton.css +++ b/src/style/xingButton.css @@ -40,3 +40,12 @@ .share-button--xing.share-button--outline:hover .share-button__icon path { fill: hsla(181, 100%, 20%, 0.9); } + +.share-button--xing.share-button--painted { + background-color: transparent; + border-color: hsla(180, 77%, 10%, 1); +} + +.share-button--xing.share-button--painted::before { + background-color: hsla(181, 100%, 20%, 1); +}