Misterzym
/
vue-share-buttons
mirror of https://github.com/misterzym/vue-share-buttons
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Moved styles to components and delete files

dependabot/npm_and_yarn/lodash-4.17.19
Alexandrshy 6 years ago
parent
ce1b122859
commit
73f61e6eb0
49 changed files with 6847 additions and 1791 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 863
      package-lock.json
  2. 4
      package.json
  3. 266
      src/components/BloggerButton.vue
  4. 266
      src/components/DiggButton.vue
  5. 266
      src/components/EmailButton.vue
  6. 266
      src/components/EvernoteButton.vue
  7. 266
      src/components/FacebookButton.vue
  8. 266
      src/components/FacebookMessengerButton.vue
  9. 266
      src/components/HatenaButton.vue
  10. 266
      src/components/InstapaperButton.vue
  11. 266
      src/components/LinkedInButton.vue
  12. 266
      src/components/LiveJournalButton.vue
  13. 266
      src/components/OdnoklassnikiButton.vue
  14. 266
      src/components/PinterestButton.vue
  15. 266
      src/components/PocketButton.vue
  16. 266
      src/components/RedditButton.vue
  17. 266
      src/components/RenrenButton.vue
  18. 266
      src/components/TelegramButton.vue
  19. 266
      src/components/TumblrButton.vue
  20. 419
      src/components/TwitterButton.vue
  21. 266
      src/components/ViberButton.vue
  22. 266
      src/components/VkontakteButton.vue
  23. 266
      src/components/WeiboButton.vue
  24. 266
      src/components/WhatsAppButton.vue
  25. 266
      src/components/XingButton.vue
  26. 51
      src/style/bloggerButton.css
  27. 51
      src/style/diggButton.css
  28. 51
      src/style/emailButton.css
  29. 51
      src/style/evernoteButton.css
  30. 65
      src/style/facebookButton.css
  31. 56
      src/style/facebookMessengerButton.css
  32. 51
      src/style/hatenaButton.css
  33. 219
      src/style/index.css
  34. 51
      src/style/instapaperButton.css
  35. 65
      src/style/linkedInButton.css
  36. 53
      src/style/livejournalButton.css
  37. 68
      src/style/odnoklassnikiButton.css
  38. 65
      src/style/pinterestButton.css
  39. 51
      src/style/pocketButton.css
  40. 51
      src/style/redditButton.css
  41. 51
      src/style/renrenButton.css
  42. 51
      src/style/telegramButton.css
  43. 65
      src/style/tumblrButton.css
  44. 65
      src/style/twitterButton.css
  45. 51
      src/style/viberButton.css
  46. 65
      src/style/vkontakteButton.css
  47. 51
      src/style/weiboButton.css
  48. 51
      src/style/whatsAppButton.css
  49. 51
      src/style/xingButton.css

863
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "vue-share-buttons",
"version": "1.0.2",
"version": "1.0.3",
"private": false,
"license": "MIT",
"homepage": "https://github.com/Alexandrshy/vue-share-buttons",
@ -40,7 +40,9 @@
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {

266
src/components/BloggerButton.vue
Unescape View File

@ -64,7 +64,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/bloggerButton.css";
<style lang="scss" scoped>
$main-color: hsla(14, 100%, 57%, 1);
$focus-color: hsla(14, 94%, 82%, 0.4);
$hover-color: hsla(14, 100%, 57%, 0.9);
$painted-color: hsla(14, 77%, 47%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/DiggButton.vue
Unescape View File

@ -50,7 +50,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/diggButton.css";
<style lang="scss" scoped>
$main-color: hsla(0, 0%, 0%, 1);
$focus-color: hsla(0, 0%, 25%, 0.4);
$hover-color: hsla(0, 0%, 0%, 0.9);
$painted-color: hsla(0, 0%, 0%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/EmailButton.vue
Unescape View File

@ -47,7 +47,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/emailButton.css";
<style lang="scss" scoped>
$main-color: hsla(194, 77%, 56%, 1);
$focus-color: hsla(194, 77%, 81%, 0.4);
$hover-color: hsla(194, 77%, 56%, 0.9);
$painted-color: hsla(193, 54%, 46%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/EvernoteButton.vue
Unescape View File

@ -60,7 +60,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/evernoteButton.css";
<style lang="scss" scoped>
$main-color: hsla(136, 100%, 33%, 1);
$focus-color: hsla(136, 94%, 58%, 0.4);
$hover-color: hsla(136, 100%, 33%, 0.9);
$painted-color: hsla(135, 77%, 23%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/FacebookButton.vue
Unescape View File

@ -101,7 +101,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/facebookButton.css";
<style lang="scss" scoped>
$main-color: hsla(221, 44%, 41%, 1);
$focus-color: hsla(221, 38%, 66%, 0.4);
$hover-color: hsla(221, 44%, 41%, 0.9);
$painted-color: hsla(220, 21%, 31%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/FacebookMessengerButton.vue
Unescape View File

@ -43,7 +43,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/facebookMessengerButton.css";
<style lang="scss" scoped>
$main-color: hsla(221, 44%, 41%, 1);
$focus-color: hsla(221, 38%, 66%, 0.4);
$hover-color: hsla(221, 44%, 41%, 0.9);
$painted-color: hsla(220, 21%, 31%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/HatenaButton.vue
Unescape View File

@ -60,7 +60,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/hatenaButton.css";
<style lang="scss" scoped>
$main-color: hsla(196, 100%, 44%, 1);
$focus-color: hsla(196, 94%, 69%, 0.4);
$hover-color: hsla(196, 100%, 44%, 0.9);
$painted-color: hsla(195, 77%, 34%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/InstapaperButton.vue
Unescape View File

@ -60,7 +60,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/instapaperButton.css";
<style lang="scss" scoped>
$main-color: hsla(0, 0%, 12%, 1);
$focus-color: hsla(0, 0%, 37%, 0.4);
$hover-color: hsla(0, 0%, 12%, 0.9);
$painted-color: hsla(0, 0%, 0%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/LinkedInButton.vue
Unescape View File

@ -101,7 +101,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/linkedInButton.css";
<style lang="scss" scoped>
$main-color: hsla(201, 100%, 35%, 1);
$focus-color: hsla(201, 94%, 60%, 0.4);
$hover-color: hsla(201, 100%, 35%, 0.9);
$painted-color: hsla(200, 77%, 25%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/LiveJournalButton.vue
Unescape View File

@ -60,7 +60,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/livejournalButton.css";
<style lang="scss" scoped>
$main-color: hsla(195, 100%, 46%, 1);
$focus-color: hsla(195, 94%, 71%, 0.4);
$hover-color: hsla(195, 100%, 46%, 0.9);
$painted-color: hsla(194, 77%, 36%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/OdnoklassnikiButton.vue
Unescape View File

@ -104,7 +104,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/odnoklassnikiButton.css";
<style lang="scss" scoped>
$main-color: hsla(24, 91%, 53%, 1);
$focus-color: hsla(24, 85%, 78%, 0.4);
$hover-color: hsla(24, 91%, 53%, 0.9);
$painted-color: hsla(23, 68%, 43%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/PinterestButton.vue
Unescape View File

@ -108,7 +108,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/pinterestButton.css";
<style lang="scss" scoped>
$main-color: hsla(353, 92%, 39%, 1);
$focus-color: hsla(353, 86%, 64%, 0.4);
$hover-color: hsla(353, 92%, 39%, 0.9);
$painted-color: hsla(352, 69%, 29%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/PocketButton.vue
Unescape View File

@ -53,7 +53,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/pocketButton.css";
<style lang="scss" scoped>
$main-color: hsla(352, 85%, 59%, 1);
$focus-color: hsla(352, 79%, 84%, 0.4);
$hover-color: hsla(352, 85%, 59%, 0.9);
$painted-color: hsla(351, 62%, 49%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/RedditButton.vue
Unescape View File

@ -55,7 +55,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/redditButton.css";
<style lang="scss" scoped>
$main-color: hsla(16, 100%, 50%, 1);
$focus-color: hsla(16, 94%, 75%, 0.4);
$hover-color: hsla(16, 100%, 50%, 0.9);
$painted-color: hsla(15, 77%, 40%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/RenrenButton.vue
Unescape View File

@ -58,7 +58,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/renrenButton.css";
<style lang="scss" scoped>
$main-color: hsla(207, 71%, 45%, 1);
$focus-color: hsla(207, 65%, 50%, 0.4);
$hover-color: hsla(207, 71%, 45%, 0.9);
$painted-color: hsla(206, 48%, 35%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/TelegramButton.vue
Unescape View File

@ -45,7 +45,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/telegramButton.css";
<style lang="scss" scoped>
$main-color: hsla(200, 74%, 53%, 1);
$focus-color: hsla(200, 68%, 78%, 0.4);
$hover-color: hsla(200, 74%, 53%, 0.9);
$painted-color: hsla(199, 51%, 43%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/TumblrButton.vue
Unescape View File

@ -107,7 +107,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/tumblrButton.css";
<style lang="scss" scoped>
$main-color: hsla(215, 27%, 29%, 1);
$focus-color: hsla(215, 21%, 54%, 0.4);
$hover-color: hsla(215, 27%, 29%, 0.9);
$painted-color: hsla(214, 4%, 19%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

419
src/components/TwitterButton.vue
Unescape View File

@ -60,13 +60,13 @@ export default {
};
</script>
<style scoped>
/* Base */
.share-button * {
box-sizing: border-box;
}
<style lang="scss" scoped>
$main-color: hsla(203, 89%, 53%, 1);
$focus-color: hsla(203, 82%, 78%, 0.4);
$hover-color: hsla(203, 89%, 53%, 0.9);
$painted-color: hsla(202, 66%, 43%, 1);
.button-social * {
.share-button * {
box-sizing: border-box;
}
@ -77,7 +77,7 @@ export default {
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
@ -95,255 +95,232 @@ export default {
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
}
.share-button:disabled {
opacity: 0.9;
}
.share-button:focus {
outline: none;
}
.share-button:not(:disabled):not(.disabled) {
cursor: pointer;
}
.share-button:last-child {
margin-right: 0;
}
.share-button__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
}
.share-button__icon:last-child {
margin: 0;
}
.share-button__text {
display: inline-block;
margin: 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;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
/* 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);
}
&:disabled {
opacity: 0.9;
}
.share-button--painted:focus::before {
transform: translate3d(0, 0, 0);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
.share-button--painted .share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
&:hover {
background-color: $hover-color;
}
.share-button--painted .share-button__text {
display: none;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
.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;
}
&:last-child {
margin-right: 0;
}
.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;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
.share-button--painted:hover .share-button__counter::before,
.share-button--painted:focus .share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
path {
fill: #fff;
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&:last-child {
margin: 0;
}
}
.share-button__icon {
width: 18px;
height: 18px;
margin: 0 4px;
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
.share-button__text {
margin: 0 4px;
font-size: 14px;
&__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 {
border-radius: 38px;
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
/* Painted */
.share-button--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button--painted::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__text {
color: $main-color;
}
.share-button--painted .share-button__icon {
width: 20px;
height: 20px;
}
.share-button__icon path {
fill: $main-color;
}
.share-button--painted .share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
.share-button--painted .share-button__counter::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
&:hover {
background-color: transparent;
border-color: $hover-color;
/* Twitter */
.share-button--twitter {
background-color: hsla(203, 89%, 53%, 1);
}
.share-button__text {
color: $main-color;
}
.share-button--twitter:focus {
box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4);
}
.share-button__icon path {
fill: $hover-color;
}
}
}
.share-button--twitter:hover {
background-color: hsla(203, 89%, 53%, 0.9);
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button--twitter .share-button__icon path {
fill: #fff;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button--twitter.share-button--outline {
background-color: transparent;
border-color: hsla(203, 89%, 53%, 1);
}
.share-button__text {
display: none;
}
.share-button--twitter.share-button--outline:hover {
background-color: transparent;
border-color: hsla(203, 89%, 53%, 0.9);
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
.share-button--twitter.share-button--outline .share-button__text {
color: hsla(203, 89%, 53%, 1);
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button--twitter.share-button--outline:hover .share-button__text {
color: hsla(203, 89%, 53%, 0.9);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
.share-button--twitter.share-button--outline .share-button__icon path {
fill: hsla(203, 89%, 53%, 1);
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button--twitter.share-button--outline:hover .share-button__icon path {
fill: hsla(203, 89%, 53%, 0.9);
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
.share-button--twitter.share-button--outline .share-button__counter {
color: hsla(203, 89%, 53%, 0.9);
border-color: hsla(203, 89%, 53%, 0.9);
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
.share-button--twitter.share-button--painted {
background-color: transparent;
border-color: hsla(202, 66%, 43%, 1);
}
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
.share-button--twitter.share-button--painted::before {
background-color: hsla(203, 89%, 53%, 1);
}
&__text {
margin: 0 4px;
font-size: 14px;
}
.share-button--twitter.share-button--painted .share-button__counter {
color: #fff;
border-color: hsla(202, 66%, 43%, 1);
}
&--circle {
border-radius: 38px;
}
.share-button--twitter.share-button--painted .share-button__counter::before {
background-color: hsla(203, 89%, 53%, 1);
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/ViberButton.vue
Unescape View File

@ -51,7 +51,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/viberButton.css";
<style lang="scss" scoped>
$main-color: hsla(248, 33%, 52%, 1);
$focus-color: hsla(248, 27%, 77%, 0.4);
$hover-color: hsla(248, 33%, 52%, 0.9);
$painted-color: hsla(247, 10%, 42%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/VkontakteButton.vue
Unescape View File

@ -116,7 +116,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/vkontakteButton.css";
<style lang="scss" scoped>
$main-color: hsla(212, 28%, 52%, 1);
$focus-color: hsla(212, 22%, 77%, 0.4);
$hover-color: hsla(212, 28%, 52%, 0.9);
$painted-color: hsla(211, 5%, 42%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/WeiboButton.vue
Unescape View File

@ -66,7 +66,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/weiboButton.css";
<style lang="scss" scoped>
$main-color: hsla(181, 100%, 20%, 1);
$focus-color: hsla(181, 94%, 45%, 0.4);
$hover-color: hsla(181, 100%, 20%, 0.9);
$painted-color: hsla(180, 77%, 10%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/WhatsAppButton.vue
Unescape View File

@ -41,7 +41,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/whatsAppButton.css";
<style lang="scss" scoped>
$main-color: hsla(142, 70%, 49%, 1);
$focus-color: hsla(142, 64%, 74%, 0.4);
$hover-color: hsla(142, 70%, 49%, 0.9);
$painted-color: hsla(141, 47%, 39%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

266
src/components/XingButton.vue
Unescape View File

@ -53,7 +53,267 @@ export default {
};
</script>
<style>
@import "../style/index.css";
@import "../style/xingButton.css";
<style lang="scss" scoped>
$main-color: hsla(181, 100%, 20%, 1);
$focus-color: hsla(181, 94%, 45%, 0.4);
$hover-color: hsla(181, 100%, 20%, 0.9);
$painted-color: hsla(180, 77%, 10%, 1);
.share-button * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: $main-color;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
&:disabled {
opacity: 0.9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px $focus-color;
}
&:hover {
background-color: $hover-color;
}
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:last-child {
margin-right: 0;
}
&__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
path {
fill: #fff;
}
&:last-child {
margin: 0;
}
}
&__text {
display: inline-block;
margin: 0 7px;
font-size: 16px;
vertical-align: middle;
}
&__counter {
display: inline-block;
padding: 3px 10px;
margin-left: 4px;
font-size: 12px;
border-left: 1px solid #fff;
vertical-align: middle;
}
&--circle {
min-width: 42px;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
&--outline {
background-color: transparent;
border: 1px solid;
background-color: transparent;
border-color: $main-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $main-color;
}
.share-button__counter {
color: $hover-color;
border-color: $hover-color;
}
&:hover {
background-color: transparent;
border-color: $hover-color;
.share-button__text {
color: $main-color;
}
.share-button__icon path {
fill: $hover-color;
}
}
}
&--painted {
position: relative;
min-width: 42px;
min-height: 42px;
padding: 15px;
margin-bottom: 30px;
border-radius: 42px;
background-color: transparent;
border: 3px solid;
border-color: $painted-color;
&::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: $main-color;
border-radius: 50%;
transform: translate3d(3px, 2px, 0);
transition: transform 0.2s ease-in-out;
}
.share-button__icon {
width: 30px;
height: 30px;
margin: 0;
}
.share-button__text {
display: none;
}
.share-button__counter {
position: absolute;
bottom: -30px;
right: -7px;
margin: 0;
padding: 4px 10px;
border: 3px solid;
font-size: 8px;
border-radius: 15px;
color: #fff;
border-color: $painted-color;
&::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;
background-color: $main-color;
}
}
&:hover {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
&:focus {
&::before {
transform: translate3d(0, 0, 0);
}
.share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
}
}
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
&__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
&__text {
margin: 0 4px;
font-size: 14px;
}
&--circle {
border-radius: 38px;
}
&--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
&::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button__icon {
width: 20px;
height: 20px;
}
.share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
&::before {
transform: translate3d(-2px, 1.75px, 0);
}
}
}
}
}
</style>

51
src/style/bloggerButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Blogger */
.share-button--blogger {
background-color: hsla(14, 100%, 57%, 1);
}
.share-button--blogger:focus {
box-shadow: 0 0 0 3px hsla(14, 94%, 82%, 0.4);
}
.share-button--blogger:hover {
background-color: hsla(14, 100%, 57%, 0.9);
}
.share-button--blogger .share-button__icon path {
fill: #fff;
}
.share-button--blogger.share-button--outline {
background-color: transparent;
border-color: hsl(14, 100%, 57%, 1);
}
.share-button--blogger.share-button--outline:hover {
background-color: transparent;
border-color: hsla(14, 100%, 57%, 0.9);
}
.share-button--blogger.share-button--outline .share-button__text {
color: hsla(14, 100%, 57%, 1);
}
.share-button--blogger.share-button--outline:hover .share-button__text {
color: hsla(14, 100%, 57%, 0.9);
}
.share-button--blogger.share-button--outline .share-button__icon path {
fill: hsla(14, 100%, 57%, 1);
}
.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);
}

51
src/style/diggButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Digg */
.share-button--digg {
background-color: hsla(0, 0%, 0%, 1);
}
.share-button--digg:focus {
box-shadow: 0 0 0 3px hsla(0, 0%, 25%, 0.4);
}
.share-button--digg:hover {
background-color: hsla(0, 0%, 0%, 0.9);
}
.share-button--digg .share-button__icon path {
fill: #fff;
}
.share-button--digg.share-button--outline {
background-color: transparent;
border-color: hsl(0, 0%, 0%, 1);
}
.share-button--digg.share-button--outline:hover {
background-color: transparent;
border-color: hsla(0, 0%, 0%, 0.9);
}
.share-button--digg.share-button--outline .share-button__text {
color: hsla(0, 0%, 0%, 1);
}
.share-button--digg.share-button--outline:hover .share-button__text {
color: hsla(0, 0%, 0%, 0.9);
}
.share-button--digg.share-button--outline .share-button__icon path {
fill: hsla(0, 0%, 0%, 1);
}
.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);
}

51
src/style/emailButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

51
src/style/evernoteButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Evernote */
.share-button--evernote {
background-color: hsla(136, 100%, 33%, 1);
}
.share-button--evernote:focus {
box-shadow: 0 0 0 3px hsla(136, 94%, 58%, 0.4);
}
.share-button--evernote:hover {
background-color: hsla(136, 100%, 33%, 0.9);
}
.share-button--evernote .share-button__icon path {
fill: #fff;
}
.share-button--evernote.share-button--outline {
background-color: transparent;
border-color: hsl(136, 100%, 33%, 1);
}
.share-button--evernote.share-button--outline:hover {
background-color: transparent;
border-color: hsla(136, 100%, 33%, 0.9);
}
.share-button--evernote.share-button--outline .share-button__text {
color: hsla(136, 100%, 33%, 1);
}
.share-button--evernote.share-button--outline:hover .share-button__text {
color: hsla(136, 100%, 33%, 0.9);
}
.share-button--evernote.share-button--outline .share-button__icon path {
fill: hsla(136, 100%, 33%, 1);
}
.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);
}

65
src/style/facebookButton.css
Unescape View File

@ -1,65 +0,0 @@
/* 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--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);
}

56
src/style/facebookMessengerButton.css
Unescape View File

@ -1,56 +0,0 @@
/* facebookMessenger */
.share-button--facebookMessenger {
background-color: hsla(221, 44%, 41%, 1);
}
.share-button--facebookMessenger:focus {
box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4);
}
.share-button--facebookMessenger:hover {
background-color: hsla(221, 44%, 41%, 0.9);
}
.share-button--facebookMessenger .share-button__icon path {
fill: #fff;
}
.share-button--facebookMessenger.share-button--outline {
background-color: transparent;
border-color: hsl(221, 44%, 41%, 1);
}
.share-button--facebookMessenger.share-button--outline:hover {
background-color: transparent;
border-color: hsla(221, 44%, 41%, 0.9);
}
.share-button--facebookMessenger.share-button--outline .share-button__text {
color: hsla(221, 44%, 41%, 1);
}
.share-button--facebookMessenger.share-button--outline:hover
.share-button__text {
color: hsla(221, 44%, 41%, 0.9);
}
.share-button--facebookMessenger.share-button--outline
.share-button__icon
path {
fill: hsla(221, 44%, 41%, 1);
}
.share-button--facebookMessenger.share-button--outline:hover
.share-button__icon
path {
fill: hsla(221, 44%, 41%, 0.9);
}
.share-button--facebookMessenger.share-button--painted {
background-color: transparent;
border-color: hsla(220, 21%, 31%, 1);
}
.share-button--facebookMessenger.share-button--painted::before {
background-color: hsla(221, 44%, 41%, 1);
}

51
src/style/hatenaButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

219
src/style/index.css
Unescape View File

@ -1,219 +0,0 @@
/* Base */
.share-button * {
box-sizing: border-box;
}
.button-social * {
box-sizing: border-box;
}
.share-button {
display: inline-block;
min-width: 42px;
min-height: 42px;
padding: 10px 8px;
margin: 4px;
color: #fff;
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-weight: 400;
vertical-align: top;
user-select: none;
border: none;
border-radius: 4px;
box-shadow: none;
text-rendering: auto;
text-indent: 0px;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
text-shadow: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
}
.share-button:disabled {
opacity: 0.9;
}
.share-button:focus {
outline: none;
}
.share-button:not(:disabled):not(.disabled) {
cursor: pointer;
}
.share-button:last-child {
margin-right: 0;
}
.share-button__icon {
display: inline-block;
padding: 0;
margin: 0 7px;
font-size: 0;
vertical-align: middle;
}
.share-button__icon:last-child {
margin: 0;
}
.share-button__text {
display: inline-block;
margin: 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;
min-height: 42px;
padding: 10px;
border-radius: 42px;
}
/* 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;
margin: 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;
}
.share-button--painted:hover .share-button__counter::before,
.share-button--painted:focus .share-button__counter::before {
transform: translate3d(0px, 0px, 0);
}
@media (max-width: 768px) {
.share-button {
min-width: 38px;
min-height: 38px;
padding: 8px 8px;
margin: 2px;
}
.share-button__icon {
width: 18px;
height: 18px;
margin: 0 4px;
}
.share-button__text {
margin: 0 4px;
font-size: 14px;
}
/* Circle */
.share-button--circle {
border-radius: 38px;
}
/* Painted */
.share-button--painted {
min-width: 48px;
min-height: 48px;
margin: 4px 4px 20px 4px;
}
.share-button--painted::before {
transform: translate3d(2.5px, 1.5px, 0);
}
.share-button--painted .share-button__icon {
width: 20px;
height: 20px;
}
.share-button--painted .share-button__counter {
bottom: -24px;
right: -8px;
padding: 2px 7px;
}
.share-button--painted .share-button__counter::before {
transform: translate3d(-2px, 1.75px, 0);
}
}

51
src/style/instapaperButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

65
src/style/linkedInButton.css
Unescape View File

@ -1,65 +0,0 @@
/* LinkedIn */
.share-button--linkedIn {
background-color: hsla(201, 100%, 35%, 1);
}
.share-button--linkedIn:focus {
box-shadow: 0 0 0 3px hsla(201, 94%, 60%, 0.4);
}
.share-button--linkedIn:hover {
background-color: hsla(201, 100%, 35%, 0.9);
}
.share-button--linkedIn .share-button__icon path {
fill: #fff;
}
.share-button--linkedIn.share-button--outline {
background-color: transparent;
border-color: hsl(201, 100%, 35%, 1);
}
.share-button--linkedIn.share-button--outline:hover {
background-color: transparent;
border-color: hsla(201, 100%, 35%, 0.9);
}
.share-button--linkedIn.share-button--outline .share-button__text {
color: hsla(201, 100%, 35%, 1);
}
.share-button--linkedIn.share-button--outline:hover .share-button__text {
color: hsla(201, 100%, 35%, 0.9);
}
.share-button--linkedIn.share-button--outline .share-button__icon path {
fill: hsla(201, 100%, 35%, 1);
}
.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);
}

53
src/style/livejournalButton.css
Unescape View File

@ -1,53 +0,0 @@
/* Livejournal */
.share-button--livejournal {
background-color: hsla(195, 100%, 46%, 1);
}
.share-button--livejournal:focus {
box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4);
}
.share-button--livejournal:hover {
background-color: hsla(195, 100%, 46%, 0.9);
}
.share-button--livejournal .share-button__icon path {
fill: #fff;
}
.share-button--livejournal.share-button--outline {
background-color: transparent;
border-color: hsl(195, 100%, 46%, 1);
}
.share-button--livejournal.share-button--outline:hover {
background-color: transparent;
border-color: hsla(195, 100%, 46%, 0.9);
}
.share-button--livejournal.share-button--outline .share-button__text {
color: hsla(195, 100%, 46%, 1);
}
.share-button--livejournal.share-button--outline:hover .share-button__text {
color: hsla(195, 100%, 46%, 0.9);
}
.share-button--livejournal.share-button--outline .share-button__icon path {
fill: hsla(195, 100%, 46%, 1);
}
.share-button--livejournal.share-button--outline:hover
.share-button__icon
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);
}

68
src/style/odnoklassnikiButton.css
Unescape View File

@ -1,68 +0,0 @@
/* Odnoklassniki */
.share-button--odnoklassniki {
background-color: hsla(24, 91%, 53%, 1);
}
.share-button--odnoklassniki:focus {
box-shadow: 0 0 0 3px hsla(24, 85%, 78%, 0.4);
}
.share-button--odnoklassniki:hover {
background-color: hsla(24, 91%, 53%, 0.9);
}
.share-button--odnoklassniki .share-button__icon path {
fill: #fff;
}
.share-button--odnoklassniki.share-button--outline {
background-color: transparent;
border-color: hsla(24, 91%, 53%, 1);
}
.share-button--odnoklassniki.share-button--outline:hover {
background-color: transparent;
border-color: hsla(24, 91%, 53%, 0.9);
}
.share-button--odnoklassniki.share-button--outline .share-button__text {
color: hsla(24, 91%, 53%, 1);
}
.share-button--odnoklassniki.share-button--outline:hover .share-button__text {
color: hsla(24, 91%, 53%, 0.9);
}
.share-button--odnoklassniki.share-button--outline .share-button__icon path {
fill: hsla(24, 91%, 53%, 1);
}
.share-button--odnoklassniki.share-button--outline:hover
.share-button__icon
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);
}

65
src/style/pinterestButton.css
Unescape View File

@ -1,65 +0,0 @@
/* Pinterest */
.share-button--pinterest {
background-color: hsla(353, 92%, 39%, 1);
}
.share-button--pinterest:focus {
box-shadow: 0 0 0 3px hsla(353, 86%, 64%, 0.4);
}
.share-button--pinterest:hover {
background-color: hsla(353, 92%, 39%, 0.9);
}
.share-button--pinterest .share-button__icon path {
fill: #fff;
}
.share-button--pinterest.share-button--outline {
background-color: transparent;
border-color: hsla(353, 92%, 39%, 1);
}
.share-button--pinterest.share-button--outline:hover {
background-color: transparent;
border-color: hsla(353, 92%, 39%, 0.9);
}
.share-button--pinterest.share-button--outline .share-button__text {
color: hsla(353, 92%, 39%, 1);
}
.share-button--pinterest.share-button--outline:hover .share-button__text {
color: hsla(353, 92%, 39%, 0.9);
}
.share-button--pinterest.share-button--outline .share-button__icon path {
fill: hsla(353, 92%, 39%, 1);
}
.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);
}

51
src/style/pocketButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Pocket */
.share-button--pocket {
background-color: hsla(352, 85%, 59%, 1);
}
.share-button--pocket:focus {
box-shadow: 0 0 0 3px hsla(352, 79%, 84%, 0.4);
}
.share-button--pocket:hover {
background-color: hsla(352, 85%, 59%, 0.9);
}
.share-button--pocket .share-button__icon path {
fill: #fff;
}
.share-button--pocket.share-button--outline {
background-color: transparent;
border-color: hsla(352, 85%, 59%, 1);
}
.share-button--pocket.share-button--outline:hover {
background-color: transparent;
border-color: hsla(352, 85%, 59%, 0.9);
}
.share-button--pocket.share-button--outline .share-button__text {
color: hsla(352, 85%, 59%, 1);
}
.share-button--pocket.share-button--outline:hover .share-button__text {
color: hsla(352, 85%, 59%, 0.9);
}
.share-button--pocket.share-button--outline .share-button__icon path {
fill: hsla(352, 85%, 59%, 1);
}
.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);
}

51
src/style/redditButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Reddit */
.share-button--reddit {
background-color: hsla(16, 100%, 50%, 1);
}
.share-button--reddit:focus {
box-shadow: 0 0 0 3px hsla(16, 94%, 75%, 0.4);
}
.share-button--reddit:hover {
background-color: hsla(16, 100%, 50%, 0.9);
}
.share-button--reddit .share-button__icon path {
fill: #fff;
}
.share-button--reddit.share-button--outline {
background-color: transparent;
border-color: hsla(16, 100%, 50%, 1);
}
.share-button--reddit.share-button--outline:hover {
background-color: transparent;
border-color: hsla(16, 100%, 50%, 0.9);
}
.share-button--reddit.share-button--outline .share-button__text {
color: hsla(16, 100%, 50%, 1);
}
.share-button--reddit.share-button--outline:hover .share-button__text {
color: hsla(16, 100%, 50%, 0.9);
}
.share-button--reddit.share-button--outline .share-button__icon path {
fill: hsla(16, 100%, 50%, 1);
}
.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);
}

51
src/style/renrenButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Renren */
.share-button--renren {
background-color: hsla(207, 71%, 45%, 1);
}
.share-button--renren:focus {
box-shadow: 0 0 0 3px hsla(207, 65%, 50%, 0.4);
}
.share-button--renren:hover {
background-color: hsla(207, 71%, 45%, 0.9);
}
.share-button--renren .share-button__icon path {
fill: #fff;
}
.share-button--renren.share-button--outline {
background-color: transparent;
border-color: hsl(207, 71%, 45%, 1);
}
.share-button--renren.share-button--outline:hover {
background-color: transparent;
border-color: hsla(207, 71%, 45%, 0.9);
}
.share-button--renren.share-button--outline .share-button__text {
color: hsla(207, 71%, 45%, 1);
}
.share-button--renren.share-button--outline:hover .share-button__text {
color: hsla(207, 71%, 45%, 0.9);
}
.share-button--renren.share-button--outline .share-button__icon path {
fill: hsla(207, 71%, 45%, 1);
}
.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);
}

51
src/style/telegramButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

65
src/style/tumblrButton.css
Unescape View File

@ -1,65 +0,0 @@
/* Tumblr */
.share-button--tumblr {
background-color: hsla(215, 27%, 29%, 1);
}
.share-button--tumblr:focus {
box-shadow: 0 0 0 3px hsla(215, 21%, 54%, 0.4);
}
.share-button--tumblr:hover {
background-color: hsla(215, 27%, 29%, 0.9);
}
.share-button--tumblr .share-button__icon path {
fill: #fff;
}
.share-button--tumblr.share-button--outline {
background-color: transparent;
border-color: hsla(215, 27%, 29%, 1);
}
.share-button--tumblr.share-button--outline:hover {
background-color: transparent;
border-color: hsla(215, 27%, 29%, 0.9);
}
.share-button--tumblr.share-button--outline .share-button__text {
color: hsla(215, 27%, 29%, 1);
}
.share-button--tumblr.share-button--outline:hover .share-button__text {
color: hsla(215, 27%, 29%, 0.9);
}
.share-button--tumblr.share-button--outline .share-button__icon path {
fill: hsla(215, 27%, 29%, 1);
}
.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);
}

65
src/style/twitterButton.css
Unescape View File

@ -1,65 +0,0 @@
/* Twitter */
.share-button--twitter {
background-color: hsla(203, 89%, 53%, 1);
}
.share-button--twitter:focus {
box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4);
}
.share-button--twitter:hover {
background-color: hsla(203, 89%, 53%, 0.9);
}
.share-button--twitter .share-button__icon path {
fill: #fff;
}
.share-button--twitter.share-button--outline {
background-color: transparent;
border-color: hsla(203, 89%, 53%, 1);
}
.share-button--twitter.share-button--outline:hover {
background-color: transparent;
border-color: hsla(203, 89%, 53%, 0.9);
}
.share-button--twitter.share-button--outline .share-button__text {
color: hsla(203, 89%, 53%, 1);
}
.share-button--twitter.share-button--outline:hover .share-button__text {
color: hsla(203, 89%, 53%, 0.9);
}
.share-button--twitter.share-button--outline .share-button__icon path {
fill: hsla(203, 89%, 53%, 1);
}
.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);
}

51
src/style/viberButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

65
src/style/vkontakteButton.css
Unescape View File

@ -1,65 +0,0 @@
/* vk */
.share-button--vk {
background-color: hsla(212, 28%, 52%, 1);
}
.share-button--vk:focus {
box-shadow: 0 0 0 3px hsla(212, 22%, 77%, 0.4);
}
.share-button--vk:hover {
background-color: hsla(212, 28%, 52%, 0.9);
}
.share-button--vk .share-button__icon path {
fill: #fff;
}
.share-button--vk.share-button--outline {
background-color: transparent;
border-color: hsla(212, 28%, 52%, 1);
}
.share-button--vk.share-button--outline:hover {
background-color: transparent;
border-color: hsla(212, 28%, 52%, 0.9);
}
.share-button--vk.share-button--outline .share-button__text {
color: hsla(212, 28%, 52%, 1);
}
.share-button--vk.share-button--outline:hover .share-button__text {
color: hsla(212, 28%, 52%, 0.9);
}
.share-button--vk.share-button--outline .share-button__icon path {
fill: hsla(212, 28%, 52%, 1);
}
.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);
}

51
src/style/weiboButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Weibo */
.share-button--weibo {
background-color: hsl(353, 83%, 49%);
}
.share-button--weibo:focus {
box-shadow: 0 0 0 3px hsla(353, 100%, 74%, 0.4);
}
.share-button--weibo:hover {
background-color: hsla(353, 83%, 49%, 0.9);
}
.share-button--weibo .share-button__icon path {
fill: #fff;
}
.share-button--weibo.share-button--outline {
background-color: transparent;
border-color: hsl(353, 83%, 49%, 1);
}
.share-button--weibo.share-button--outline:hover {
background-color: transparent;
border-color: hsla(353, 83%, 49%, 0.9);
}
.share-button--weibo.share-button--outline .share-button__text {
color: hsla(353, 83%, 49%, 1);
}
.share-button--weibo.share-button--outline:hover .share-button__text {
color: hsla(353, 83%, 49%, 0.9);
}
.share-button--weibo.share-button--outline .share-button__icon path {
fill: hsla(353, 83%, 49%, 1);
}
.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);
}

51
src/style/whatsAppButton.css
Unescape View File

@ -1,51 +0,0 @@
/* 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);
}

51
src/style/xingButton.css
Unescape View File

@ -1,51 +0,0 @@
/* Xing */
.share-button--xing {
background-color: hsla(181, 100%, 20%, 1);
}
.share-button--xing:focus {
box-shadow: 0 0 0 3px hsla(181, 94%, 45%, 0.4);
}
.share-button--xing:hover {
background-color: hsla(181, 100%, 20%, 0.9);
}
.share-button--xing .share-button__icon path {
fill: #fff;
}
.share-button--xing.share-button--outline {
background-color: transparent;
border-color: hsla(181, 100%, 20%, 1);
}
.share-button--xing.share-button--outline:hover {
background-color: transparent;
border-color: hsla(181, 100%, 20%, 0.9);
}
.share-button--xing.share-button--outline .share-button__text {
color: hsla(181, 100%, 20%, 1);
}
.share-button--xing.share-button--outline:hover .share-button__text {
color: hsla(181, 100%, 20%, 0.9);
}
.share-button--xing.share-button--outline .share-button__icon path {
fill: hsla(181, 100%, 20%, 1);
}
.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);
}
Write Preview
Loading…
Cancel
Save