Moved styles to components and delete files

package.json

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

src/components/BloggerButton.vue

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

src/components/DiggButton.vue

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

src/components/EmailButton.vue

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

src/components/EvernoteButton.vue

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

src/components/FacebookButton.vue

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

src/components/FacebookMessengerButton.vue

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

src/components/HatenaButton.vue

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

src/components/InstapaperButton.vue

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

src/components/LinkedInButton.vue

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

src/components/LiveJournalButton.vue

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

src/components/OdnoklassnikiButton.vue

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

src/components/PinterestButton.vue

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

src/components/PocketButton.vue

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

src/components/RedditButton.vue

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

src/components/RenrenButton.vue

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

src/components/TelegramButton.vue

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

src/components/TumblrButton.vue

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

src/components/TwitterButton.vue

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

src/components/ViberButton.vue

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

src/components/VkontakteButton.vue

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

src/components/WeiboButton.vue

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

src/components/WhatsAppButton.vue

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

src/components/XingButton.vue

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

src/style/bloggerButton.css

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

src/style/diggButton.css

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

src/style/emailButton.css

@@ -1,51 +0,0 @@
-/* Email */
-.share-button--email {
-  background-color: hsla(194, 77%, 56%, 1);
-}
-
-.share-button--email:focus {
-  box-shadow: 0 0 0 3px hsla(194, 77%, 81%, 0.4);
-}
-
-.share-button--email:hover {
-  background-color: hsla(194, 77%, 56%, 0.9);
-}
-
-.share-button--email .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--email.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(194, 77%, 56%, 1);
-}
-
-.share-button--email.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(194, 77%, 56%, 0.9);
-}
-
-.share-button--email.share-button--outline .share-button__text {
-  color: hsla(194, 77%, 56%, 1);
-}
-
-.share-button--email.share-button--outline:hover .share-button__text {
-  color: hsla(194, 77%, 56%, 0.9);
-}
-
-.share-button--email.share-button--outline .share-button__icon path {
-  fill: hsla(194, 77%, 56%, 1);
-}
-
-.share-button--email.share-button--outline:hover .share-button__icon path {
-  fill: hsla(194, 77%, 56%, 0.9);
-}
-
-.share-button--email.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(193, 54%, 46%, 1);
-}
-
-.share-button--email.share-button--painted::before {
-  background-color: hsla(194, 77%, 56%, 1);
-}

src/style/evernoteButton.css

@@ -1,51 +0,0 @@
-/* Evernote */
-.share-button--evernote {
-  background-color: hsla(136, 100%, 33%, 1);
-}
-
-.share-button--evernote:focus {
-  box-shadow: 0 0 0 3px hsla(136, 94%, 58%, 0.4);
-}
-
-.share-button--evernote:hover {
-  background-color: hsla(136, 100%, 33%, 0.9);
-}
-
-.share-button--evernote .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--evernote.share-button--outline {
-  background-color: transparent;
-  border-color: hsl(136, 100%, 33%, 1);
-}
-
-.share-button--evernote.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(136, 100%, 33%, 0.9);
-}
-
-.share-button--evernote.share-button--outline .share-button__text {
-  color: hsla(136, 100%, 33%, 1);
-}
-
-.share-button--evernote.share-button--outline:hover .share-button__text {
-  color: hsla(136, 100%, 33%, 0.9);
-}
-
-.share-button--evernote.share-button--outline .share-button__icon path {
-  fill: hsla(136, 100%, 33%, 1);
-}
-
-.share-button--evernote.share-button--outline:hover .share-button__icon path {
-  fill: hsla(136, 100%, 33%, 0.9);
-}
-
-.share-button--evernote.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(135, 77%, 23%, 1);
-}
-
-.share-button--evernote.share-button--painted::before {
-  background-color: hsla(136, 100%, 33%, 1);
-}

src/style/facebookButton.css

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

src/style/facebookMessengerButton.css

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

src/style/hatenaButton.css

@@ -1,51 +0,0 @@
-/* Hatena */
-.share-button--hatena {
-  background-color: hsla(196, 100%, 44%, 1);
-}
-
-.share-button--hatena:focus {
-  box-shadow: 0 0 0 3px hsla(196, 94%, 69%, 0.4);
-}
-
-.share-button--hatena:hover {
-  background-color: hsla(196, 100%, 44%, 0.9);
-}
-
-.share-button--hatena .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--hatena.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(196, 100%, 44%, 1);
-}
-
-.share-button--hatena.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(196, 100%, 44%, 0.9);
-}
-
-.share-button--hatena.share-button--outline .share-button__text {
-  color: hsla(196, 100%, 44%, 1);
-}
-
-.share-button--hatena.share-button--outline:hover .share-button__text {
-  color: hsla(196, 100%, 44%, 0.9);
-}
-
-.share-button--hatena.share-button--outline .share-button__icon path {
-  fill: hsla(196, 100%, 44%, 1);
-}
-
-.share-button--hatena.share-button--outline:hover .share-button__icon path {
-  fill: hsla(196, 100%, 44%, 0.9);
-}
-
-.share-button--hatena.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(195, 77%, 34%, 1);
-}
-
-.share-button--hatena.share-button--painted::before {
-  background-color: hsla(196, 100%, 44%, 1);
-}

src/style/index.css

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

src/style/instapaperButton.css

@@ -1,51 +0,0 @@
-/* Instapaper */
-.share-button--instapaper {
-  background-color: hsla(0, 0%, 12%, 1);
-}
-
-.share-button--instapaper:focus {
-  box-shadow: 0 0 0 3px hsla(0, 0%, 37%, 0.4);
-}
-
-.share-button--instapaper:hover {
-  background-color: hsla(0, 0%, 12%, 0.9);
-}
-
-.share-button--instapaper .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--instapaper.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(0, 0%, 12%, 1);
-}
-
-.share-button--instapaper.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(0, 0%, 12%, 0.9);
-}
-
-.share-button--instapaper.share-button--outline .share-button__text {
-  color: hsla(0, 0%, 12%, 1);
-}
-
-.share-button--instapaper.share-button--outline:hover .share-button__text {
-  color: hsla(0, 0%, 12%, 0.9);
-}
-
-.share-button--instapaper.share-button--outline .share-button__icon path {
-  fill: hsla(0, 0%, 12%, 1);
-}
-
-.share-button--instapaper.share-button--outline:hover .share-button__icon path {
-  fill: hsla(0, 0%, 12%, 0.9);
-}
-
-.share-button--instapaper.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(0, 0%, 0%, 1);
-}
-
-.share-button--instapaper.share-button--painted::before {
-  background-color: hsla(0, 0%, 12%, 1);
-}

src/style/linkedInButton.css

@@ -1,65 +0,0 @@
-/* LinkedIn */
-.share-button--linkedIn {
-  background-color: hsla(201, 100%, 35%, 1);
-}
-
-.share-button--linkedIn:focus {
-  box-shadow: 0 0 0 3px hsla(201, 94%, 60%, 0.4);
-}
-
-.share-button--linkedIn:hover {
-  background-color: hsla(201, 100%, 35%, 0.9);
-}
-
-.share-button--linkedIn .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--linkedIn.share-button--outline {
-  background-color: transparent;
-  border-color: hsl(201, 100%, 35%, 1);
-}
-
-.share-button--linkedIn.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(201, 100%, 35%, 0.9);
-}
-
-.share-button--linkedIn.share-button--outline .share-button__text {
-  color: hsla(201, 100%, 35%, 1);
-}
-
-.share-button--linkedIn.share-button--outline:hover .share-button__text {
-  color: hsla(201, 100%, 35%, 0.9);
-}
-
-.share-button--linkedIn.share-button--outline .share-button__icon path {
-  fill: hsla(201, 100%, 35%, 1);
-}
-
-.share-button--linkedIn.share-button--outline:hover .share-button__icon path {
-  fill: hsla(201, 100%, 35%, 0.9);
-}
-
-.share-button--linkedIn.share-button--outline .share-button__counter {
-  color: hsla(201, 100%, 35%, 0.9);
-  border-color: hsla(201, 100%, 35%, 0.9);
-}
-
-.share-button--linkedIn.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(200, 77%, 25%, 1);
-}
-
-.share-button--linkedIn.share-button--painted::before {
-  background-color: hsla(201, 100%, 35%, 1);
-}
-
-.share-button--linkedIn.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(200, 77%, 25%, 1);
-}
-
-.share-button--linkedIn.share-button--painted .share-button__counter::before {
-  background-color: hsla(201, 100%, 35%, 1);
-}

src/style/livejournalButton.css

@@ -1,53 +0,0 @@
-/* Livejournal */
-.share-button--livejournal {
-  background-color: hsla(195, 100%, 46%, 1);
-}
-
-.share-button--livejournal:focus {
-  box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4);
-}
-
-.share-button--livejournal:hover {
-  background-color: hsla(195, 100%, 46%, 0.9);
-}
-
-.share-button--livejournal .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--livejournal.share-button--outline {
-  background-color: transparent;
-  border-color: hsl(195, 100%, 46%, 1);
-}
-
-.share-button--livejournal.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(195, 100%, 46%, 0.9);
-}
-
-.share-button--livejournal.share-button--outline .share-button__text {
-  color: hsla(195, 100%, 46%, 1);
-}
-
-.share-button--livejournal.share-button--outline:hover .share-button__text {
-  color: hsla(195, 100%, 46%, 0.9);
-}
-
-.share-button--livejournal.share-button--outline .share-button__icon path {
-  fill: hsla(195, 100%, 46%, 1);
-}
-
-.share-button--livejournal.share-button--outline:hover
-  .share-button__icon
-  path {
-  fill: hsla(195, 100%, 46%, 0.9);
-}
-
-.share-button--livejournal.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(194, 77%, 36%, 1);
-}
-
-.share-button--livejournal.share-button--painted::before {
-  background-color: hsla(195, 100%, 46%, 1);
-}

src/style/odnoklassnikiButton.css

@@ -1,68 +0,0 @@
-/* Odnoklassniki */
-.share-button--odnoklassniki {
-  background-color: hsla(24, 91%, 53%, 1);
-}
-
-.share-button--odnoklassniki:focus {
-  box-shadow: 0 0 0 3px hsla(24, 85%, 78%, 0.4);
-}
-
-.share-button--odnoklassniki:hover {
-  background-color: hsla(24, 91%, 53%, 0.9);
-}
-
-.share-button--odnoklassniki .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--odnoklassniki.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(24, 91%, 53%, 1);
-}
-
-.share-button--odnoklassniki.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(24, 91%, 53%, 0.9);
-}
-
-.share-button--odnoklassniki.share-button--outline .share-button__text {
-  color: hsla(24, 91%, 53%, 1);
-}
-
-.share-button--odnoklassniki.share-button--outline:hover .share-button__text {
-  color: hsla(24, 91%, 53%, 0.9);
-}
-
-.share-button--odnoklassniki.share-button--outline .share-button__icon path {
-  fill: hsla(24, 91%, 53%, 1);
-}
-
-.share-button--odnoklassniki.share-button--outline:hover
-  .share-button__icon
-  path {
-  fill: hsla(24, 91%, 53%, 0.9);
-}
-
-.share-button--odnoklassniki.share-button--outline .share-button__counter {
-  color: hsla(24, 91%, 53%, 0.9);
-  border-color: hsla(24, 91%, 53%, 0.9);
-}
-
-.share-button--odnoklassniki.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(23, 68%, 43%, 1);
-}
-
-.share-button--odnoklassniki.share-button--painted::before {
-  background-color: hsla(24, 91%, 53%, 1);
-}
-
-.share-button--odnoklassniki.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(23, 68%, 43%, 1);
-}
-
-.share-button--odnoklassniki.share-button--painted
-  .share-button__counter::before {
-  background-color: hsla(24, 91%, 53%, 1);
-}

src/style/pinterestButton.css

@@ -1,65 +0,0 @@
-/* Pinterest */
-.share-button--pinterest {
-  background-color: hsla(353, 92%, 39%, 1);
-}
-
-.share-button--pinterest:focus {
-  box-shadow: 0 0 0 3px hsla(353, 86%, 64%, 0.4);
-}
-
-.share-button--pinterest:hover {
-  background-color: hsla(353, 92%, 39%, 0.9);
-}
-
-.share-button--pinterest .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--pinterest.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(353, 92%, 39%, 1);
-}
-
-.share-button--pinterest.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(353, 92%, 39%, 0.9);
-}
-
-.share-button--pinterest.share-button--outline .share-button__text {
-  color: hsla(353, 92%, 39%, 1);
-}
-
-.share-button--pinterest.share-button--outline:hover .share-button__text {
-  color: hsla(353, 92%, 39%, 0.9);
-}
-
-.share-button--pinterest.share-button--outline .share-button__icon path {
-  fill: hsla(353, 92%, 39%, 1);
-}
-
-.share-button--pinterest.share-button--outline:hover .share-button__icon path {
-  fill: hsla(353, 92%, 39%, 0.9);
-}
-
-.share-button--pinterest.share-button--outline .share-button__counter {
-  color: hsla(353, 92%, 39%, 0.9);
-  border-color: hsla(353, 92%, 39%, 0.9);
-}
-
-.share-button--pinterest.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(352, 69%, 29%, 1);
-}
-
-.share-button--pinterest.share-button--painted::before {
-  background-color: hsla(353, 92%, 39%, 1);
-}
-
-.share-button--pinterest.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(352, 69%, 29%, 1);
-}
-
-.share-button--pinterest.share-button--painted .share-button__counter::before {
-  background-color: hsla(353, 92%, 39%, 1);
-}

src/style/pocketButton.css

@@ -1,51 +0,0 @@
-/* Pocket */
-.share-button--pocket {
-  background-color: hsla(352, 85%, 59%, 1);
-}
-
-.share-button--pocket:focus {
-  box-shadow: 0 0 0 3px hsla(352, 79%, 84%, 0.4);
-}
-
-.share-button--pocket:hover {
-  background-color: hsla(352, 85%, 59%, 0.9);
-}
-
-.share-button--pocket .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--pocket.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(352, 85%, 59%, 1);
-}
-
-.share-button--pocket.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(352, 85%, 59%, 0.9);
-}
-
-.share-button--pocket.share-button--outline .share-button__text {
-  color: hsla(352, 85%, 59%, 1);
-}
-
-.share-button--pocket.share-button--outline:hover .share-button__text {
-  color: hsla(352, 85%, 59%, 0.9);
-}
-
-.share-button--pocket.share-button--outline .share-button__icon path {
-  fill: hsla(352, 85%, 59%, 1);
-}
-
-.share-button--pocket.share-button--outline:hover .share-button__icon path {
-  fill: hsla(352, 85%, 59%, 0.9);
-}
-
-.share-button--pocket.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(351, 62%, 49%, 1);
-}
-
-.share-button--pocket.share-button--painted::before {
-  background-color: hsla(352, 85%, 59%, 1);
-}

src/style/redditButton.css

@@ -1,51 +0,0 @@
-/* Reddit */
-.share-button--reddit {
-  background-color: hsla(16, 100%, 50%, 1);
-}
-
-.share-button--reddit:focus {
-  box-shadow: 0 0 0 3px hsla(16, 94%, 75%, 0.4);
-}
-
-.share-button--reddit:hover {
-  background-color: hsla(16, 100%, 50%, 0.9);
-}
-
-.share-button--reddit .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--reddit.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(16, 100%, 50%, 1);
-}
-
-.share-button--reddit.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(16, 100%, 50%, 0.9);
-}
-
-.share-button--reddit.share-button--outline .share-button__text {
-  color: hsla(16, 100%, 50%, 1);
-}
-
-.share-button--reddit.share-button--outline:hover .share-button__text {
-  color: hsla(16, 100%, 50%, 0.9);
-}
-
-.share-button--reddit.share-button--outline .share-button__icon path {
-  fill: hsla(16, 100%, 50%, 1);
-}
-
-.share-button--reddit.share-button--outline:hover .share-button__icon path {
-  fill: hsla(16, 100%, 50%, 0.9);
-}
-
-.share-button--reddit.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(15, 77%, 40%, 1);
-}
-
-.share-button--reddit.share-button--painted::before {
-  background-color: hsla(16, 100%, 50%, 1);
-}

src/style/renrenButton.css

@@ -1,51 +0,0 @@
-/* Renren */
-.share-button--renren {
-  background-color: hsla(207, 71%, 45%, 1);
-}
-
-.share-button--renren:focus {
-  box-shadow: 0 0 0 3px hsla(207, 65%, 50%, 0.4);
-}
-
-.share-button--renren:hover {
-  background-color: hsla(207, 71%, 45%, 0.9);
-}
-
-.share-button--renren .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--renren.share-button--outline {
-  background-color: transparent;
-  border-color: hsl(207, 71%, 45%, 1);
-}
-
-.share-button--renren.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(207, 71%, 45%, 0.9);
-}
-
-.share-button--renren.share-button--outline .share-button__text {
-  color: hsla(207, 71%, 45%, 1);
-}
-
-.share-button--renren.share-button--outline:hover .share-button__text {
-  color: hsla(207, 71%, 45%, 0.9);
-}
-
-.share-button--renren.share-button--outline .share-button__icon path {
-  fill: hsla(207, 71%, 45%, 1);
-}
-
-.share-button--renren.share-button--outline:hover .share-button__icon path {
-  fill: hsla(207, 71%, 45%, 0.9);
-}
-
-.share-button--renren.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(206, 48%, 35%, 1);
-}
-
-.share-button--renren.share-button--painted::before {
-  background-color: hsla(207, 71%, 45%, 1);
-}

src/style/telegramButton.css

@@ -1,51 +0,0 @@
-/* Telegram */
-.share-button--telegram {
-  background-color: hsla(200, 74%, 53%, 1);
-}
-
-.share-button--telegram:focus {
-  box-shadow: 0 0 0 3px hsla(200, 68%, 78%, 0.4);
-}
-
-.share-button--telegram:hover {
-  background-color: hsla(200, 74%, 53%, 0.9);
-}
-
-.share-button--telegram .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--telegram.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(200, 74%, 53%, 1);
-}
-
-.share-button--telegram.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(200, 74%, 53%, 0.9);
-}
-
-.share-button--telegram.share-button--outline .share-button__text {
-  color: hsla(200, 74%, 53%, 1);
-}
-
-.share-button--telegram.share-button--outline:hover .share-button__text {
-  color: hsla(200, 74%, 53%, 0.9);
-}
-
-.share-button--telegram.share-button--outline .share-button__icon path {
-  fill: hsla(200, 74%, 53%, 1);
-}
-
-.share-button--telegram.share-button--outline:hover .share-button__icon path {
-  fill: hsla(200, 74%, 53%, 0.9);
-}
-
-.share-button--telegram.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(199, 51%, 43%, 1);
-}
-
-.share-button--telegram.share-button--painted::before {
-  background-color: hsla(200, 74%, 53%, 1);
-}

src/style/tumblrButton.css

@@ -1,65 +0,0 @@
-/* Tumblr */
-.share-button--tumblr {
-  background-color: hsla(215, 27%, 29%, 1);
-}
-
-.share-button--tumblr:focus {
-  box-shadow: 0 0 0 3px hsla(215, 21%, 54%, 0.4);
-}
-
-.share-button--tumblr:hover {
-  background-color: hsla(215, 27%, 29%, 0.9);
-}
-
-.share-button--tumblr .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--tumblr.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(215, 27%, 29%, 1);
-}
-
-.share-button--tumblr.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(215, 27%, 29%, 0.9);
-}
-
-.share-button--tumblr.share-button--outline .share-button__text {
-  color: hsla(215, 27%, 29%, 1);
-}
-
-.share-button--tumblr.share-button--outline:hover .share-button__text {
-  color: hsla(215, 27%, 29%, 0.9);
-}
-
-.share-button--tumblr.share-button--outline .share-button__icon path {
-  fill: hsla(215, 27%, 29%, 1);
-}
-
-.share-button--tumblr.share-button--outline:hover .share-button__icon path {
-  fill: hsla(215, 27%, 29%, 0.9);
-}
-
-.share-button--tumblr.share-button--outline .share-button__counter {
-  color: hsla(215, 27%, 29%, 0.9);
-  border-color: hsla(215, 27%, 29%, 0.9);
-}
-
-.share-button--tumblr.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(214, 4%, 19%, 1);
-}
-
-.share-button--tumblr.share-button--painted::before {
-  background-color: hsla(215, 27%, 29%, 1);
-}
-
-.share-button--tumblr.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(214, 4%, 19%, 1);
-}
-
-.share-button--tumblr.share-button--painted .share-button__counter::before {
-  background-color: hsla(215, 27%, 29%, 1);
-}

src/style/twitterButton.css

@@ -1,65 +0,0 @@
-/* Twitter */
-.share-button--twitter {
-  background-color: hsla(203, 89%, 53%, 1);
-}
-
-.share-button--twitter:focus {
-  box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4);
-}
-
-.share-button--twitter:hover {
-  background-color: hsla(203, 89%, 53%, 0.9);
-}
-
-.share-button--twitter .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--twitter.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(203, 89%, 53%, 1);
-}
-
-.share-button--twitter.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(203, 89%, 53%, 0.9);
-}
-
-.share-button--twitter.share-button--outline .share-button__text {
-  color: hsla(203, 89%, 53%, 1);
-}
-
-.share-button--twitter.share-button--outline:hover .share-button__text {
-  color: hsla(203, 89%, 53%, 0.9);
-}
-
-.share-button--twitter.share-button--outline .share-button__icon path {
-  fill: hsla(203, 89%, 53%, 1);
-}
-
-.share-button--twitter.share-button--outline:hover .share-button__icon path {
-  fill: hsla(203, 89%, 53%, 0.9);
-}
-
-.share-button--twitter.share-button--outline .share-button__counter {
-  color: hsla(203, 89%, 53%, 0.9);
-  border-color: hsla(203, 89%, 53%, 0.9);
-}
-
-.share-button--twitter.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(202, 66%, 43%, 1);
-}
-
-.share-button--twitter.share-button--painted::before {
-  background-color: hsla(203, 89%, 53%, 1);
-}
-
-.share-button--twitter.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(202, 66%, 43%, 1);
-}
-
-.share-button--twitter.share-button--painted .share-button__counter::before {
-  background-color: hsla(203, 89%, 53%, 1);
-}

src/style/viberButton.css

@@ -1,51 +0,0 @@
-/* Viber */
-.share-button--viber {
-  background-color: hsla(248, 33%, 52%, 1);
-}
-
-.share-button--viber:focus {
-  box-shadow: 0 0 0 3px hsla(248, 27%, 77%, 0.4);
-}
-
-.share-button--viber:hover {
-  background-color: hsla(248, 33%, 52%, 0.9);
-}
-
-.share-button--viber .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--viber.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(248, 33%, 52%, 1);
-}
-
-.share-button--viber.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(248, 33%, 52%, 0.9);
-}
-
-.share-button--viber.share-button--outline .share-button__text {
-  color: hsla(248, 33%, 52%, 1);
-}
-
-.share-button--viber.share-button--outline:hover .share-button__text {
-  color: hsla(248, 33%, 52%, 0.9);
-}
-
-.share-button--viber.share-button--outline .share-button__icon path {
-  fill: hsla(248, 33%, 52%, 1);
-}
-
-.share-button--viber.share-button--outline:hover .share-button__icon path {
-  fill: hsla(248, 33%, 52%, 0.9);
-}
-
-.share-button--viber.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(247, 10%, 42%, 1);
-}
-
-.share-button--viber.share-button--painted::before {
-  background-color: hsla(248, 33%, 52%, 1);
-}

src/style/vkontakteButton.css

@@ -1,65 +0,0 @@
-/* vk */
-.share-button--vk {
-  background-color: hsla(212, 28%, 52%, 1);
-}
-
-.share-button--vk:focus {
-  box-shadow: 0 0 0 3px hsla(212, 22%, 77%, 0.4);
-}
-
-.share-button--vk:hover {
-  background-color: hsla(212, 28%, 52%, 0.9);
-}
-
-.share-button--vk .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--vk.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(212, 28%, 52%, 1);
-}
-
-.share-button--vk.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(212, 28%, 52%, 0.9);
-}
-
-.share-button--vk.share-button--outline .share-button__text {
-  color: hsla(212, 28%, 52%, 1);
-}
-
-.share-button--vk.share-button--outline:hover .share-button__text {
-  color: hsla(212, 28%, 52%, 0.9);
-}
-
-.share-button--vk.share-button--outline .share-button__icon path {
-  fill: hsla(212, 28%, 52%, 1);
-}
-
-.share-button--vk.share-button--outline:hover .share-button__icon path {
-  fill: hsla(212, 28%, 52%, 0.9);
-}
-
-.share-button--vk.share-button--outline .share-button__counter {
-  color: hsla(212, 28%, 52%, 0.9);
-  border-color: hsla(212, 28%, 52%, 0.9);
-}
-
-.share-button--vk.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(211, 5%, 42%, 1);
-}
-
-.share-button--vk.share-button--painted::before {
-  background-color: hsla(212, 28%, 52%, 1);
-}
-
-.share-button--vk.share-button--painted .share-button__counter {
-  color: #fff;
-  border-color: hsla(211, 5%, 42%, 1);
-}
-
-.share-button--vk.share-button--painted .share-button__counter::before {
-  background-color: hsla(212, 28%, 52%, 1);
-}

src/style/weiboButton.css

@@ -1,51 +0,0 @@
-/* Weibo */
-.share-button--weibo {
-  background-color: hsl(353, 83%, 49%);
-}
-
-.share-button--weibo:focus {
-  box-shadow: 0 0 0 3px hsla(353, 100%, 74%, 0.4);
-}
-
-.share-button--weibo:hover {
-  background-color: hsla(353, 83%, 49%, 0.9);
-}
-
-.share-button--weibo .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--weibo.share-button--outline {
-  background-color: transparent;
-  border-color: hsl(353, 83%, 49%, 1);
-}
-
-.share-button--weibo.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(353, 83%, 49%, 0.9);
-}
-
-.share-button--weibo.share-button--outline .share-button__text {
-  color: hsla(353, 83%, 49%, 1);
-}
-
-.share-button--weibo.share-button--outline:hover .share-button__text {
-  color: hsla(353, 83%, 49%, 0.9);
-}
-
-.share-button--weibo.share-button--outline .share-button__icon path {
-  fill: hsla(353, 83%, 49%, 1);
-}
-
-.share-button--weibo.share-button--outline:hover .share-button__icon path {
-  fill: hsla(353, 83%, 49%, 0.9);
-}
-
-.share-button--weibo.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(352, 60%, 39%, 1);
-}
-
-.share-button--weibo.share-button--painted::before {
-  background-color: hsla(353, 83%, 49%, 1);
-}

src/style/whatsAppButton.css

@@ -1,51 +0,0 @@
-/* WhatsApp */
-.share-button--whatsApp {
-  background-color: hsla(142, 70%, 49%, 1);
-}
-
-.share-button--whatsApp:focus {
-  box-shadow: 0 0 0 3px hsla(142, 64%, 74%, 0.4);
-}
-
-.share-button--whatsApp:hover {
-  background-color: hsla(142, 70%, 49%, 0.9);
-}
-
-.share-button--whatsApp .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--whatsApp.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(142, 70%, 49%, 1);
-}
-
-.share-button--whatsApp.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(142, 70%, 49%, 0.9);
-}
-
-.share-button--whatsApp.share-button--outline .share-button__text {
-  color: hsla(142, 70%, 49%, 1);
-}
-
-.share-button--whatsApp.share-button--outline:hover .share-button__text {
-  color: hsla(142, 70%, 49%, 0.9);
-}
-
-.share-button--whatsApp.share-button--outline .share-button__icon path {
-  fill: hsla(142, 70%, 49%, 1);
-}
-
-.share-button--whatsApp.share-button--outline:hover .share-button__icon path {
-  fill: hsla(142, 70%, 49%, 0.9);
-}
-
-.share-button--whatsApp.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(141, 47%, 39%, 1);
-}
-
-.share-button--whatsApp.share-button--painted::before {
-  background-color: hsla(142, 70%, 49%, 1);
-}

src/style/xingButton.css

@@ -1,51 +0,0 @@
-/* Xing */
-.share-button--xing {
-  background-color: hsla(181, 100%, 20%, 1);
-}
-
-.share-button--xing:focus {
-  box-shadow: 0 0 0 3px hsla(181, 94%, 45%, 0.4);
-}
-
-.share-button--xing:hover {
-  background-color: hsla(181, 100%, 20%, 0.9);
-}
-
-.share-button--xing .share-button__icon path {
-  fill: #fff;
-}
-
-.share-button--xing.share-button--outline {
-  background-color: transparent;
-  border-color: hsla(181, 100%, 20%, 1);
-}
-
-.share-button--xing.share-button--outline:hover {
-  background-color: transparent;
-  border-color: hsla(181, 100%, 20%, 0.9);
-}
-
-.share-button--xing.share-button--outline .share-button__text {
-  color: hsla(181, 100%, 20%, 1);
-}
-
-.share-button--xing.share-button--outline:hover .share-button__text {
-  color: hsla(181, 100%, 20%, 0.9);
-}
-
-.share-button--xing.share-button--outline .share-button__icon path {
-  fill: hsla(181, 100%, 20%, 1);
-}
-
-.share-button--xing.share-button--outline:hover .share-button__icon path {
-  fill: hsla(181, 100%, 20%, 0.9);
-}
-
-.share-button--xing.share-button--painted {
-  background-color: transparent;
-  border-color: hsla(180, 77%, 10%, 1);
-}
-
-.share-button--xing.share-button--painted::before {
-  background-color: hsla(181, 100%, 20%, 1);
-}