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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      src/components/BloggerButton.vue
  2. 172
      src/components/DiggButton.vue
  3. 172
      src/components/EmailButton.vue
  4. 172
      src/components/EvernoteButton.vue
  5. 172
      src/components/FacebookButton.vue
  6. 172
      src/components/FacebookMessengerButton.vue
  7. 172
      src/components/HatenaButton.vue
  8. 172
      src/components/InstapaperButton.vue
  9. 172
      src/components/LinkedInButton.vue
  10. 172
      src/components/LiveJournalButton.vue
  11. 172
      src/components/OdnoklassnikiButton.vue
  12. 172
      src/components/PinterestButton.vue
  13. 172
      src/components/PocketButton.vue
  14. 172
      src/components/RedditButton.vue
  15. 172
      src/components/RenrenButton.vue
  16. 172
      src/components/TelegramButton.vue
  17. 172
      src/components/TumblrButton.vue
  18. 172
      src/components/TwitterButton.vue
  19. 172
      src/components/ViberButton.vue
  20. 172
      src/components/VkontakteButton.vue
  21. 172
      src/components/WeiboButton.vue
  22. 172
      src/components/WhatsAppButton.vue
  23. 172
      src/components/XingButton.vue

172
src/components/BloggerButton.vue
Unescape View File

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

172
src/components/DiggButton.vue
Unescape View File

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

172
src/components/EmailButton.vue
Unescape View File

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

172
src/components/EvernoteButton.vue
Unescape View File

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

172
src/components/FacebookButton.vue
Unescape View File

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

172
src/components/FacebookMessengerButton.vue
Unescape View File

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

172
src/components/HatenaButton.vue
Unescape View File

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

172
src/components/InstapaperButton.vue
Unescape View File

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

172
src/components/LinkedInButton.vue
Unescape View File

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

172
src/components/LiveJournalButton.vue
Unescape View File

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

172
src/components/OdnoklassnikiButton.vue
Unescape View File

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

172
src/components/PinterestButton.vue
Unescape View File

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

172
src/components/PocketButton.vue
Unescape View File

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

172
src/components/RedditButton.vue
Unescape View File

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

172
src/components/RenrenButton.vue
Unescape View File

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

172
src/components/TelegramButton.vue
Unescape View File

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

172
src/components/TumblrButton.vue
Unescape View File

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

172
src/components/TwitterButton.vue
Unescape View File

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

172
src/components/ViberButton.vue
Unescape View File

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

172
src/components/VkontakteButton.vue
Unescape View File

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

172
src/components/WeiboButton.vue
Unescape View File

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

172
src/components/WhatsAppButton.vue
Unescape View File

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

172
src/components/XingButton.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save