Use mask-image for overflow shadows
#2088
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 tasks
thompsongl
reviewed
Jul 3, 2019
thompsongl
approved these changes
Jul 3, 2019
snide
approved these changes
Jul 8, 2019
| @@ -54,6 +54,14 @@ | |||
| } | |||
| } | |||
|
|
|||
| // The full overflow shadow plus scrollbars | |||
| @mixin euiOverflowYScroll { | |||
There was a problem hiding this comment.
Maybe euiYScrollWithShadows would be a little more descriptive?
| /** | ||
| * Overflow scrolling | ||
| */ | ||
| .euiOverflowYScroll { |
There was a problem hiding this comment.
And then might want to change it here if you change it.
added 6 commits
July 8, 2019 17:02
cchaos
force-pushed
the
overflow-fixes-again
branch
from
03a066f
to
9f30618
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I know this is like the hundredth iteration of this thing, but it came to my attention that the overflow shadows can be hideous if you temporarily change the background color of the containing element:
@flash1293 Had a great idea to use
mask-imageinstead of actual drop shadows. The only lack of support is in IE, but since this is really just a flourish anyway, 🤷♀ meh.Example from EuiSelectable:
Dark mode
Modals, flyouts, selectable, CSS utility
This new overflow pattern has been updated where the original was used and still needs those extra elements so it was really just a matter of updating the shadow mixin. However, there were also duplicative styles being applied in most of those instances for adding the scrollbar and overflow properties, so I added a new SASS mixin for that as well:
euiOverflowYScroll()and a CSS utility class.euiOverflowYScrolland documented both.Also, fixed some padding on modals
Before, there was always a lot of padding between the body and the footer of the modal because it didn't take into account if both were present. This just reduces the top and bottom padding of the body by default, but adds more bottom padding if the body is the last element. If there is no body, it will reduce the top padding of the modal footer so it doesn't get doubled up from the header.
Checklist
[ ] Any props added have proper autodocs[ ] This was checked for breaking changes and labeled appropriately[ ] This was checked against keyboard-only and screenreader scenarios[ ] This required updates to Framer X components