-
Notifications
You must be signed in to change notification settings - Fork 1
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
Adds gradients for breakpoints larger than xs #795
Conversation
brick: 'xs:su-from-brick su-to-brick/30', | ||
'palo-alto-dark': 'xs:su-from-palo-alto-dark su-to-palo-alto-dark/30', | ||
white: 'xs:su-from-white su-to-white/30', |
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.
You removed the xs from these here: 048f9a3#r1443322032 in #710
But they are not working as intended on the current site. This is to fix that. Can you look at this again please?
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.
Going to review this now - thanks for the ping @sherakama !
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.
I see - so using xs:
to increase CSS specificity to override the default su-from-saa-black
gradient start color 🤔 We usually do a conditional check to add a class instead of counting on the override, but this works so I'm going to approve! 😄
It is live :) |
Thank you @yvonnetangsu and @sherakama ! |
Thank you for the fix @shc314 ! Sorry I messed it up 😂 |
READY FOR REVIEW
Summary
Review By (Date)
Review Tasks
Setup tasks and/or behavior to test
At the xs breakpoint, the gradient starts at the top with the specified color at 30% opacity and then goes to #181D1C 100% opacity at the bottom.
For all widths larger than xs, the gradient starts at #181D1C 0% opacity at the top and then goes to the specified color 100% opacity at the bottom.
Associated Issues and/or People