-
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
Cover: Allow drag n drop media replacement #29813
Changes from 1 commit
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 |
---|---|---|
|
@@ -65,3 +65,42 @@ | |
// Important is used to have higher specificity than the inline style set by re-resizable library. | ||
height: auto !important; | ||
} | ||
|
||
// Only target direct dropzone. | ||
.wp-block-cover > .components-drop-zone { | ||
&.is-active { | ||
transition: 0.3s opacity, 0.3s border; | ||
} | ||
|
||
&.is-dragging-over-element { | ||
background-color: transparent; | ||
border: $grid-unit-60 solid var(--wp-admin-theme-color); | ||
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. Nice 👌 |
||
|
||
.components-drop-zone__content { | ||
transform: none; | ||
} | ||
} | ||
|
||
.components-drop-zone__content { | ||
display: flex; | ||
align-items: center; | ||
top: -36px; | ||
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 wonder if we should round this number up to 40px ($grid-unit-50), or down to 32 ($grid-unit-40). It's a small thing, but might be slightly more griddy. Alternately, I see the grid as being fundamentally base12, even though we leverage an 8px base. You could do 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. Tested with both I've updated styles to use |
||
left: -36px; | ||
transform: none; | ||
} | ||
|
||
.components-drop-zone__content-icon, | ||
.components-drop-zone__content-text { | ||
display: inline; | ||
} | ||
|
||
.components-drop-zone__content-icon { | ||
// Reset margin. | ||
margin: 0; | ||
margin-right: $grid-unit; | ||
} | ||
|
||
.components-drop-zone__content-text { | ||
font-size: $default-font-size; | ||
} | ||
} |
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.
Nice. We use 0.2s in most other places to make it snappy — if that feels okay to you, might be a good change. If it feels too snappy, okay to keep 0.3, but worth a shot.
Might want to include this right below the transition rule:
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 think 0.2s looks better, and it isn't too snappy.
Wasn't aware of the
reduce-motion
mixin, Thanks for mentioning it.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.
Yep, it's easily missed. We have one for the animation property as well, and if you basically output it on the line right after either transition or animation both, you'll be sure that for people to check the system level setting have their needs met. It's a nice little trick, it just sets the duration to about zero.