Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UX: update styling for related/suggested #23231

Merged
merged 6 commits into from Aug 24, 2023
Merged

UX: update styling for related/suggested #23231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
606c4ab
UX: update styling for related/suggested
tytekkit Aug 24, 2023
d0dffbd
Create more-topics.scss
tytekkit Aug 24, 2023
2c5e318
Update _index.scss
tytekkit Aug 24, 2023
0b6a85b
Update more-topics.scss
tytekkit Aug 24, 2023
2c4505e
UX: use box shadow
tytekkit Aug 24, 2023
6e227d8
Update more-topics.scss
tytekkit Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 8 additions & 31 deletions app/assets/stylesheets/common/components/more-topics.scss
View file
Open in desktop
Expand Up @@ -9,38 +9,23 @@
.btn {
color: var(--primary);
background-color: transparent;
border-bottom: 2px solid transparent;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed borders in lieu of box-shadows

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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed media query -> desktop.scss

.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 {
&:not(.single-list) {
.more-topics__list-title {
Expand Down Expand Up @@ -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 change: 1 addition & 0 deletions app/assets/stylesheets/desktop/components/_index.scss
View file
Open in desktop
@@ -1,3 +1,4 @@
@import "more-topics";
@import "user-card";
@import "user-info";
@import "user-stream-item";
27 changes: 27 additions & 0 deletions app/assets/stylesheets/desktop/components/more-topics.scss
View file
Open in desktop
@@ -0,0 +1,27 @@
.more-topics__container {
.nav {
position: absolute;
top: 2px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs offset without border

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 changes: 4 additions & 0 deletions app/assets/stylesheets/mobile/components/more-topics.scss
View file
Open in desktop
@@ -1,4 +1,8 @@
.more-topics__container {
.nav {
margin-block: 0.5em 1em;
}

.more-content-topics {
padding: 15px 0 15px 0;

Expand Down