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

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

Browse Source 
* UX: update styling for related/suggested

This PR addresses state issues for icons of the Related & Suggested buttons, as well as well as fixes alignment issues for folding phones / tablets, wider mobile devices by moving styling to the desktop scss file; also replaces border with box-shadow.
This commit is contained in:
Ty Correll 2023-08-24 15:23:35 -05:00 committed by GitHub
parent d7538d7c99
commit 0944666232
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,36 +9,21 @@
.btn {
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);
box-shadow: inset 0px -3px 0px 0px rgba(var(--tertiary-rgb), 0.5);
.d-icon {
color: var(--primary-high);
}
}
&.active {
border-bottom: 2px solid var(--tertiary);
box-shadow: inset 0px -3px 0px 0px var(--tertiary);
.d-icon {
color: var(--primary-high);
}
}
}
}
@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;
}
}
}
.more-topics__lists {
@ -92,11 +77,3 @@
max-width: 150px;
}
}
#main-outlet .regular {
@media screen and (min-width: 550px) {
.more-topics__container .nav li .btn {
padding: 0.75em 0.65em;
}
}
}

1
app/assets/stylesheets/desktop/components/_index.scss
View File

@ -1,3 +1,4 @@
@import "more-topics";
@import "user-card";
@import "user-info";
@import "user-stream-item";

27
app/assets/stylesheets/desktop/components/more-topics.scss Normal file
View File

@ -0,0 +1,27 @@
.more-topics__container {
.nav {
position: absolute;
top: 2px;
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;
}
}
}
#main-outlet .regular {
.more-topics__container .nav {
li .btn {
padding: 0.75em 0.65em;
}
}
}

4
app/assets/stylesheets/mobile/components/more-topics.scss
View File

@ -1,4 +1,8 @@
.more-topics__container {
.nav {
margin-block: 0.5em 1em;
}
.more-content-topics {
padding: 15px 0 15px 0;