94 lines
4.4 KiB
SCSS
94 lines
4.4 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;
|
|
}
|
|
|
|
|
|
&.telegram {
|
|
background-color: #27A7E5;
|
|
|
|
&::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");
|
|
}
|
|
}
|
|
|
|
&.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");
|
|
}
|
|
}
|
|
}
|
|
}
|