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

remove sass dependens

master
artem 4 years ago
parent
c3447bbb2c
commit
60786b3807
23 changed files with 4163 additions and 5267 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 410
      src/components/BloggerButton.vue
  2. 410
      src/components/DiggButton.vue
  3. 410
      src/components/EmailButton.vue
  4. 410
      src/components/EvernoteButton.vue
  5. 410
      src/components/FacebookButton.vue
  6. 410
      src/components/FacebookMessengerButton.vue
  7. 410
      src/components/HatenaButton.vue
  8. 410
      src/components/InstapaperButton.vue
  9. 410
      src/components/LinkedInButton.vue
  10. 410
      src/components/LiveJournalButton.vue
  11. 410
      src/components/OdnoklassnikiButton.vue
  12. 410
      src/components/PinterestButton.vue
  13. 410
      src/components/PocketButton.vue
  14. 410
      src/components/RedditButton.vue
  15. 410
      src/components/RenrenButton.vue
  16. 410
      src/components/TelegramButton.vue
  17. 410
      src/components/TumblrButton.vue
  18. 410
      src/components/TwitterButton.vue
  19. 410
      src/components/ViberButton.vue
  20. 410
      src/components/VkontakteButton.vue
  21. 410
      src/components/WeiboButton.vue
  22. 410
      src/components/WhatsAppButton.vue
  23. 410
      src/components/XingButton.vue

410
src/components/BloggerButton.vue
Unescape View File

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

410
src/components/DiggButton.vue
Unescape View File

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

410
src/components/EmailButton.vue
Unescape View File

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

410
src/components/EvernoteButton.vue
Unescape View File

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

410
src/components/FacebookButton.vue
Unescape View File

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

410
src/components/FacebookMessengerButton.vue
Unescape View File

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

410
src/components/HatenaButton.vue
Unescape View File

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

410
src/components/InstapaperButton.vue
Unescape View File

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

410
src/components/LinkedInButton.vue
Unescape View File

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

410
src/components/LiveJournalButton.vue
Unescape View File

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

410
src/components/OdnoklassnikiButton.vue
Unescape View File

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

410
src/components/PinterestButton.vue
Unescape View File

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

410
src/components/PocketButton.vue
Unescape View File

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

410
src/components/RedditButton.vue
Unescape View File

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

410
src/components/RenrenButton.vue
Unescape View File

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

410
src/components/TelegramButton.vue
Unescape View File

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

410
src/components/TumblrButton.vue
Unescape View File

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

410
src/components/TwitterButton.vue
Unescape View File

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

410
src/components/ViberButton.vue
Unescape View File

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

410
src/components/VkontakteButton.vue
Unescape View File

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

410
src/components/WeiboButton.vue
Unescape View File

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

410
src/components/WhatsAppButton.vue
Unescape View File

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

410
src/components/XingButton.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save