editor.js/src/styles/animations.css
Peter Savchenko 8f156a87ea
feat(ui): the toolbox became vertical (#2014)
* the popover component, vertical toolbox

* toolbox position improved

* popover width improved

* always show the plus button

* search field added

* search input in popover

* trying to create mobile toolbox

* feat(toolbox): popover adapted for mobile devices (#2004)

* FIx mobile popover fixed positioning

* Add mobile popover overlay

* Hide mobile popover on scroll

* Alter toolbox buttons hover

* Fix closing popover on overlay click

* Tests fix

* Fix onchange test

* restore focus after toolbox closing by ESC

* don't move toolbar by block-hover on mobile

Resolves #1972

* popover mobile styles improved

* Cleanup

* Remove scroll event listener

* Lock scroll on mobile

* don't show shortcuts in mobile popover

* Change data attr name

* Remove unused styles

* Remove unused listeners

* disable hover on mobile popover

* Scroll fix

* Lint

* Revert "Scroll fix"

This reverts commit 82deae543e.

* Return back background color for active state of toolbox buttons

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

* Vertical toolbox fixes (#2017)

* Replace visibility property with display for hiding popover

* Disable arrow right and left keys for popover

* Revert "Replace visibility property with display for hiding popover"

This reverts commit af521cf6f2.

* Hide popover via setting max-height to 0 to fix animation in safari

* Remove redundant condition

* Extend element interface to avoid ts errors

* Do not subscribe to block hovered if mobile

* Add unsubscribing from overlay click event

* Rename isMobile to isMobileScreen

* Cleanup

* fix: popover opening direction (#2022)

* Change popover opening direction based on available space below it

* Update check

* Use cacheable decorator

* Update src/components/flipper.ts

Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>

* Fixes

* Fix test

* Clear search on popover hide

* Fix popover width

* Fix for tests

* Update todos

* Linter fixes

* rm todo about beforeInsert

because I have no idea what does it mean

* i18n for search labels done

* rm methods for hiding/showing of +

* some code style update

* Update CHANGELOG.md

* make the list items a little bit compact

* fix z-index issue caused by block-appearing animation

also, improve popover padding for two reasons:

- make the popover more consistent with the Table tool popover (in future, it can be done with the same api method)
- make popover looks better

Co-authored-by: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>
2022-04-25 18:28:58 +03:00

137 lines
1.9 KiB
CSS

.wobble {
animation-name: wobble;
animation-duration: 400ms;
}
/**
* @author Nick Pettit - https://github.com/nickpettit/glide
*/
@keyframes wobble {
from {
transform: translate3d(0, 0, 0);
}
15% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-1%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
transform: scale3d(0.9, 0.9, 0.9);
}
20% {
transform: scale3d(1.03, 1.03, 1.03);
}
60% {
transform: scale3d(1, 1, 1);
}
}
@keyframes selectionBounce {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
50% {
transform: scale3d(1.01, 1.01, 1.01);
}
70% {
transform: scale3d(1, 1, 1);
}
}
@keyframes buttonClicked {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
transform: scale3d(0.95, 0.95, 0.95);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
80% {
transform: scale3d(1, 1, 1);
}
}
@keyframes panelShowing {
from {
opacity: 0;
transform: translateY(-8px) scale(0.9);
}
70% {
opacity: 1;
transform: translateY(2px);
}
to {
transform: translateY(0);
}
}
@keyframes panelShowingMobile {
from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
70% {
opacity: 1;
transform: translateY(-4px);
}
to {
transform: translateY(0);
}
}