Optimize the tooltip position of sharing icons.
This commit is contained in:
parent
0425b1058f
commit
01fe877ebb
2 changed files with 19 additions and 11 deletions
|
@ -9,7 +9,7 @@
|
|||
|
||||
<div class="share-wrapper">
|
||||
<span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
|
||||
<span class="share-icon">
|
||||
<span class="share-icons">
|
||||
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
|
||||
{% assign url = page.url | relative_url | prepend: site.url %}
|
||||
|
||||
|
@ -17,11 +17,11 @@
|
|||
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
|
||||
<a href="{{ link }}" data-toggle="tooltip" data-placement="top"
|
||||
title="{{ share.type }}" target="_blank">
|
||||
<i class="fa-fw {{ share.icon }} mr-1"></i>
|
||||
<i class="fa-fw {{ share.icon }}"></i>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()"
|
||||
<i class="fa-fw fas fa-link small" onclick="copyLink()"
|
||||
data-toggle="tooltip" data-placement="top" title="Copy link"></i>
|
||||
|
||||
</span>
|
||||
|
|
|
@ -216,16 +216,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
.share-wrapper {
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
.share-icon {
|
||||
.share-icons {
|
||||
font-size: 1.2rem;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
>i {
|
||||
@extend %btn-share-hovor;
|
||||
a {
|
||||
&:not(:last-child) {
|
||||
margin-right: .25rem;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
>i {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
}
|
||||
i:hover {
|
||||
@extend %btn-share-hovor;
|
||||
>i {
|
||||
padding-top: .35rem;
|
||||
&:hover {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
.fab {
|
||||
&.fa-twitter {
|
||||
|
@ -242,7 +250,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
}
|
||||
}
|
||||
|
||||
} // .share-icon
|
||||
} // .share-icons
|
||||
|
||||
.fas.fa-link {
|
||||
@include btn-sharing-color(rgb(171, 171, 171));
|
||||
|
|
Loading…
Reference in a new issue