asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

perf(ui): improve hover effect of trending tags

Browse source
This commit is contained in:
Cotes Chung 2023-03-21 08:59:17 +08:00
parent aadf9393d5
commit 34499f0c92
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
3 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/trending-tags.html
View file

@ -1,6 +1,4 @@
{% comment %} <!-- The trending tags list -->
The trending tags list
{% endcomment %}
{% assign MAX = 10 %} {% assign MAX = 10 %}
@ -41,7 +39,7 @@
<div class="d-flex flex-wrap mt-3 mb-1 mr-3"> <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
{% for tag_name in trending_tags %} {% for tag_name in trending_tags %}
{% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
<a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a> <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

25
_sass/addon/commons.scss
View file

@ -260,20 +260,15 @@ i {
} }
.post-tag { .post-tag {
display: inline-block; line-height: 1.05rem;
line-height: 1rem;
font-size: 0.85rem; font-size: 0.85rem;
background: none;
border: 1px solid var(--btn-border-color); border: 1px solid var(--btn-border-color);
border-radius: 0.8rem; border-radius: 0.8rem;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
margin: 0 0.35rem 0.5rem 0; margin: 0 0.35rem 0.5rem 0;
&:hover { &:hover {
background-color: #2a408e; transition: all 0.3s ease-in;
border-color: #2a408e;
color: #ffffff;
transition: none;
} }
} }
@ -522,7 +517,6 @@ i {
display: inline-block; display: inline-block;
min-width: 2rem; min-width: 2rem;
text-align: center; text-align: center;
background: var(--tag-bg);
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0 0.4rem; padding: 0 0.4rem;
color: inherit; color: inherit;
@ -531,14 +525,6 @@ i {
&:not(:last-child) { &:not(:last-child) {
margin-right: 0.2rem; margin-right: 0.2rem;
} }
&:hover {
@extend %tag-hover;
border-bottom: none;
text-decoration: none;
color: #d2603a;
}
} }
.rounded-10 { .rounded-10 {
@ -678,6 +664,13 @@ i {
text-align: left; text-align: left;
} }
/* Overwrite bootstrap outline button */
.btn.btn-outline-primary {
&:hover {
border-color: #007bff !important;
}
}
.disabled { .disabled {
color: rgb(206, 196, 196); color: rgb(206, 196, 196);
pointer-events: auto; pointer-events: auto;

10
_sass/layout/post.scss
View file

@ -155,6 +155,16 @@ h1 + .post-meta {
.post-tags { .post-tags {
line-height: 2rem; line-height: 2rem;
.post-tag {
background: var(--tag-bg);
&:hover {
@extend %link-hover;
@extend %tag-hover;
@extend %no-bottom-border;
}
}
} }
.post-navigation { .post-navigation {