editor.js/src/styles/popover.css

143 lines
2.3 KiB
CSS
Raw Normal View History

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 82deae543eadd5c76b9466e7533bf3070d82ac4c. * 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 af521cf6f29fb06b71a0e2e8ec88d6a757f9144f. * 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 17:28:58 +02:00
.ce-popover {
position: absolute;
opacity: 0;
will-change: opacity, transform;
display: flex;
flex-direction: column;
padding: 6px;
min-width: 200px;
overflow: hidden;
box-sizing: border-box;
flex-shrink: 0;
max-height: 0;
@apply --overlay-pane;
z-index: 4;
flex-wrap: nowrap;
&--opened {
opacity: 1;
max-height: 270px;
animation: panelShowing 100ms ease;
@media (--mobile) {
animation: panelShowingMobile 250ms ease;
}
}
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
box-sizing: border-box;
box-shadow: inset 0 0 2px 2px var(--bg-light);
border: 3px solid transparent;
border-left-width: 0px;
border-top-width: 4px;
border-bottom-width: 4px;
}
@media (--mobile) {
position: fixed;
max-width: none;
min-width: auto;
left: 5px;
right: 5px;
bottom: calc(5px + env(safe-area-inset-bottom));
top: auto;
border-radius: 10px;
}
&__items {
overflow-y: auto;
overscroll-behavior: contain;
@media (--not-mobile) {
margin-top: 5px;
}
}
&__item {
@apply --popover-button;
&--focused {
@apply --button-focused;
}
&--hidden {
display: none;
}
&-icon {
@apply --tool-icon;
}
&-label {
&::after {
content: '';
width: 25px;
display: inline-block;
}
}
&-secondary-label {
color: var(--grayText);
font-size: 12px;
margin-left: auto;
white-space: nowrap;
letter-spacing: -0.1em;
padding-right: 5px;
margin-bottom: -2px;
opacity: 0.6;
@media (--mobile){
display: none;
}
}
}
&__no-found {
@apply --popover-button;
color: var(--grayText);
display: none;
cursor: default;
&--shown {
display: block;
}
&:hover {
background-color: transparent;
}
}
@media (--mobile) {
&__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--color-dark);
opacity: 0.5;
z-index: 3;
transition: opacity 0.12s ease-in;
will-change: opacity;
visibility: visible;
}
.cdx-search-field {
display: none;
}
}
&__overlay--hidden {
z-index: 0;
opacity: 0;
visibility: hidden;
}
}