134 lines
8.5 KiB
SCSS
134 lines
8.5 KiB
SCSS
$button-size: 36px;
|
|
$icon-size: 20px;
|
|
|
|
$padding-ver: 0.3*$icon-size;
|
|
$padding-hor: $icon-size / 2;
|
|
$padding-icon: ($button-size - $icon-size) / 2;
|
|
|
|
$height: $button-size - 2*$padding-ver;
|
|
$width: $button-size - 2*$padding-hor;
|
|
|
|
.shareon {
|
|
& > * {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
height: $height;
|
|
min-width: $width;
|
|
|
|
padding: $padding-ver $padding-hor;
|
|
|
|
background-color: #ccc;
|
|
border-radius: $icon-size / 6;
|
|
border: none;
|
|
box-sizing: content-box;
|
|
color: white;
|
|
line-height: 1.5;
|
|
transition: opacity 300ms ease;
|
|
vertical-align: middle;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
opacity: .7;
|
|
}
|
|
|
|
&:not(:empty) {
|
|
font-size: 0.8 * $icon-size;
|
|
text-decoration: none;
|
|
|
|
&::before {
|
|
position: relative;
|
|
|
|
height: 100%;
|
|
width: $icon-size+$padding-icon;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
display: inline-block;
|
|
position: absolute;
|
|
|
|
height: $icon-size;
|
|
width: $icon-size;
|
|
|
|
top: $padding-icon;
|
|
left: $padding-icon;
|
|
|
|
background-repeat: no-repeat;
|
|
background-size: $icon-size $icon-size;
|
|
content: '';
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
|
|
&.facebook {
|
|
background-color: #1877F2;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.messenger {
|
|
background-color: #0099FF;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.odnoklassniki {
|
|
background-color: #EE8208;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.pinterest {
|
|
background-color: #e60023;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.telegram {
|
|
background-color: #179CDE;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='4.4 5 14 14' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M4.987 11.948c3.69-1.487 6.151-2.468 7.382-2.941 3.515-1.352 4.245-1.587 4.721-1.595.105-.002.339.022.491.136a.482.482 0 01.18.317c.017.091.038.299.021.461-.19 1.851-1.015 6.343-1.434 8.417-.177.877-.529 1.065-.867 1.094-.736.062-1.291-.343-2.003-.775-1.114-.675-1.788-.987-2.869-1.646-1.25-.762-.15-1.118.562-1.802.186-.179 3.371-3.042 3.357-3.128-.005-.032-.099-.34-.173-.401s-.184-.04-.262-.024c-.112.024-1.892 1.112-5.339 3.264-.506.321-.963.477-1.373.469-.452-.009-1.321-.236-1.968-.43-.792-.239-1.085-.351-1.03-.756.028-.211.23-.431.604-.66z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.twitter {
|
|
background-color: #1da1f2;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.vkontakte {
|
|
background-color: #4680C2;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M97.647 24.37c.741-2.33 0-4.024-3.283-4.024H83.455c-2.753 0-4.024 1.483-4.766 3.071 0 0-5.613 13.556-13.45 22.347-2.542 2.541-3.707 3.389-5.083 3.389-.742 0-1.695-.848-1.695-3.177V24.264c0-2.753-.847-4.024-3.177-4.024H38.127c-1.695 0-2.754 1.271-2.754 2.542 0 2.647 3.919 3.283 4.342 10.696v16.098c0 3.495-.635 4.131-2.012 4.131-3.707 0-12.709-13.662-18.11-29.231-1.059-3.071-2.118-4.236-4.872-4.236H3.707C.53 20.24 0 21.723 0 23.311c0 2.86 3.707 17.263 17.263 36.327 9.002 13.026 21.817 20.016 33.361 20.016 6.99 0 7.837-1.588 7.837-4.236v-9.85c0-3.177.635-3.706 2.86-3.706 1.588 0 4.448.847 10.908 7.095 7.414 7.414 8.684 10.803 12.815 10.803h10.908c3.178 0 4.66-1.589 3.813-4.66-.953-3.071-4.554-7.519-9.214-12.815-2.542-2.965-6.354-6.248-7.519-7.837-1.589-2.118-1.165-2.965 0-4.872-.106 0 13.238-18.851 14.615-25.206' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&.whatsapp {
|
|
background-color: #25D366;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
}
|
|
}
|