-
Notifications
You must be signed in to change notification settings - Fork 30
Scrollable highlights design tweaks #14381
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
Conversation
background-color: ${palette('--highlights-container-separator')}; | ||
transform: translateX(-50%); | ||
${from.tablet} { | ||
:not(:first-child)::before { |
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.
This ::after
to ::before
switcheroo seems to align the vertical bar perfectly!
06f78f3
to
0867eb8
Compare
0867eb8
to
e00f4eb
Compare
e00f4eb
to
80387ec
Compare
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
Seen on PROD (merged by @domlander 7 minutes and 51 seconds ago) Please check your changes! |
What does this change?
Mobile:
mobileLandscape
breakpoint to align with the rest of the pagemobileMedium
andtablet
breakpointsmobile
andmobileMedium
breakpoints. It is now 150px, but this can be lower at a very small screen size, as the minimum card width is 180px.mobile
breakpoint, the height of all cards is set to 100%, bringing parity with all other breakpointsDesktop
Where possible, the container is given responsibility for internal spacing.
Why?
Design tweaks
Screenshots
Chromatic diffs: https://www.chromatic.com/build?appId=63e251470cfbe61776b0ef19&number=12790