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.
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
UX: update styling for related/suggested #23231
Conversation
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.
Link new desktop/scss
Will be re-opened after running some screen size tests |
Add breathing space on mobile.
} | ||
} | ||
|
||
@media screen and (min-width: 550px) { |
There was a problem hiding this comment.
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
@@ -9,38 +9,23 @@ | |||
.btn { | |||
color: var(--primary); | |||
background-color: transparent; | |||
border-bottom: 2px solid transparent; |
There was a problem hiding this comment.
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
.more-topics__container { | ||
.nav { | ||
position: absolute; | ||
top: 2px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needs offset without border
This PR follows the previous updated of related/suggested buttons and addresses a couple issues:
Wide Mobile:
Before
After -- based on mobile.scss instead of media query, absolute positioning is used in desktop.scss instead
Narrow Mobile:
Before
After
Button State Icons:
Before
After
![CleanShot 2023-08-24 at 13 40 30]