-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Reduce gap between block library and preview #20777
Reduce gap between block library and preview #20777
Conversation
Size Change: +414 B (0%) Total Size: 864 kB
ℹ️ View Unchanged
|
@jasmussen I'd love to know if there's a better way to add the border radius and box-shadow styles from I attempeted to add |
|
||
@include break-medium { | ||
position: absolute; | ||
top: 0; | ||
left: calc(100% + 20px); | ||
top: -1px; |
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 could do -$border-width
here instead of -1px, because the reason it's offset by one is because of the border, as best I can tell, that helps "document" the code.
top: 0; | ||
left: calc(100% + 20px); | ||
top: -1px; | ||
left: calc(100% + 12px); |
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 can use $grid-unit-15
here instead of 12px, as it's part of the grid spacing!
Because it's part of a calc rule, you may have to do this: left: calc(100% + #{$grid-unit-15});
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 left two followup comments to fix. But this is very nice work! Well done. Ship it!
Thank you so much @jasmussen! |
Description
Closes #20747. These are minor CSS changes that reduce the gap between the block library and the preview popover.
It also adds border radius and box shadow to the preview popover.
Screenshots
Before:
After:
Types of changes
CSS changes.