github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 09:42:07 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

UX: update styling for related/suggested (#23213)

Browse Source 
This PR updates the styling for the related & suggested topics to distract less from the Reply buttons and clearly indicate its usage as tabs, also referred to as pills.
This commit is contained in:
Ty Correll 2023-08-23 19:28:14 -05:00 committed by GitHub
parent 10c25e9b86
commit 7c12f7d50a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/stylesheets/common/components/more-topics.scss
View File

@ -1,17 +1,45 @@
.more-topics__container {
position: relative;
padding-bottom: max(env(safe-area-inset-bottom), 1em);
max-width: calc(var(--d-max-width) * 0.87);
.nav {
margin: 0 0 1em 0;
margin-block: 0;
li {
.btn {
padding: 0.5em 0.65em;
color: var(--primary);
background-color: transparent;
border-bottom: 2px solid transparent;
padding: 0.5em 5px;
&:hover {
border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
}
&.active {
border-bottom: 2px solid var(--tertiary);
.d-icon {
color: var(--primary-low);
}
}
}
}
}
.btn.active .d-icon {
color: var(--primary-low);
@media screen and (min-width: 550px) {
.nav {
position: absolute;
top: 0;
li {
margin-right: 0;
.btn {
font-size: var(--font-0);
line-height: var(--line-height-large);
padding: 1em 0.65em;
}
}
}
.more-topics__lists:not(.single-list) {
.topic-list-header .default {
visibility: hidden;
}
}
}