social.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .social {
  2. &--fixed {
  3. position: fixed;
  4. right: 10px;
  5. top: 25%;
  6. transform: translateY(-50%);
  7. @media screen and (max-width: 1300px) {
  8. display: none;
  9. }
  10. }
  11. &--static {
  12. display: -webkit-flex;
  13. display: -ms-flex;
  14. display: flex;
  15. flex-direction: row;
  16. margin-bottom: 10px;
  17. }
  18. &__item {
  19. width: 25px;
  20. height: 25px;
  21. margin: 0 2px;
  22. border-radius: 50%;
  23. overflow: hidden;
  24. margin-bottom: 5px;
  25. }
  26. &__link {
  27. display: block;
  28. width: 25px;
  29. height: 25px;
  30. background-repeat: no-repeat;
  31. background-size: 27px 27px;
  32. background-position: center center;
  33. &--fb {
  34. background-image: url("../img/icon_facebook.svg");
  35. }
  36. &--vk {
  37. background-image: url("../img/icon_vkontakte.svg");
  38. }
  39. &--ok {
  40. background-image: url("../img/icon_odnoklassniki.svg");
  41. }
  42. &--tw {
  43. background-image: url("../img/icon_twitter.svg");
  44. }
  45. &:hover {
  46. opacity: .75;
  47. }
  48. }
  49. }