-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Adjust borders on gallery to prevent overlap #27312
Changes from 6 commits
8a9302c
398334b
5e0d13d
9c3e00a
43734a9
213b890
6297915
ca043e6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -38,13 +38,25 @@ figure.wp-block-gallery { | |
} | ||
|
||
figure.is-selected { | ||
box-shadow: 0 0 0 $border-width $white, 0 0 0 3px var(--wp-admin-theme-color); | ||
|
||
border-radius: $radius-block-ui; | ||
outline: 2px solid transparent; | ||
|
||
img { | ||
border-radius: $radius-block-ui; | ||
} | ||
|
||
&::before { | ||
border-radius: $radius-block-ui; | ||
bottom: 0; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know I'm being extremely nitpicky here, but I trust you'll forgive me. I like to group related CSS together, so for example:
— That is, the position is first, and then the directions shown one by one, clockwise, top right bottom left. |
||
box-shadow: 0 0 0 $border-width $white inset, 0 0 0 3px var(--wp-admin-theme-color) inset; | ||
content: ""; | ||
left: 0; | ||
outline: 2px solid transparent; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe add after this line, |
||
position: absolute; | ||
right: 0; | ||
top: 0; | ||
z-index: 1; | ||
} | ||
} | ||
|
||
figure.is-transient img { | ||
|
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 noticed this during our 🍐 'ing session @karmatosed . The corners of the image seem to be peaking out from the focus ring. I think that would be resolved if we add this back in
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.
Unfortunately when I add that back in the overlap returns. There is the option of doing 'box-shadow: 0 0 0 $border-width $white;' but it then gives a slightly weird white outline. I'm very open to any ideas here as would love to get this smooth visually.