mirror of
https://github.com/codex-team/editor.js
synced 2024-06-18 13:45:20 +02:00
* Add new popover class * Add flipper * confirmation * confirmation * Add confirmation support * Add search * Add toggle group support and update popover tests * Add custom content support * Fix scroll issue * Add mobile version * Integration * Fix animation * Cleanup * Fix popover position for narrow mode * Fix tests * Update version and changelog * Rename css classes * Move files * Stop using PopoverItem from outside of popover context * Fix jsdoc * Move error animation to popover item * Update css variables * Update docs/CHANGELOG.md Co-authored-by: Ilya Maroz <37909603+ilyamore88@users.noreply.github.com> * Update src/components/block-tunes/block-tune-move-down.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Update src/components/block-tunes/block-tune-move-up.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Fixes * Fix imports * Fix toolbox close event * Move search-input file * Fix comment * Rename method * Cleanup * Remove onFlip callback from popover item * Rename * Fix removing event listener * Move popover animations to popover.css file * Cleanup styles * Fix jsdoc * Fix confirmation chains * Close toolbox oly when it's open * Change activation error animation * Update version and changelog * Fix overlay * Update icon border-radius on mobile * Disable item text select * Update changelog * Update yarn.lock * Add rc postfix to version --------- Co-authored-by: Ilya Maroz <37909603+ilyamore88@users.noreply.github.com> Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
376 lines
6.7 KiB
CSS
376 lines
6.7 KiB
CSS
/**
|
|
* Popover styles
|
|
*/
|
|
.ce-popover {
|
|
--border-radius: 6px;
|
|
--width: 200px;
|
|
--max-height: 270px;
|
|
--padding: 6px;
|
|
--offset-from-target: 8px;
|
|
--color-border: #e8e8eb;
|
|
--color-shadow: rgba(13,20,33,0.13);
|
|
--color-background: white;
|
|
--color-text-primary: black;
|
|
--color-text-secondary: #707684;
|
|
--color-border-icon: rgb(201 201 204 / 48%);
|
|
--color-border-icon-disabled: #EFF0F1;
|
|
--color-text-icon-active: #388AE5;
|
|
--color-background-icon-active: rgba(56, 138, 229, 0.1);
|
|
--color-background-item-focus: rgba(34, 186, 255, 0.08);
|
|
--color-shadow-item-focus: rgba(7, 161, 227, 0.08);
|
|
--color-background-item-hover: #eff2f5;
|
|
--color-background-item-confirm: #E24A4A;
|
|
--color-background-item-confirm-hover: #CE4343;
|
|
|
|
min-width: var(--width);
|
|
width: var(--width);
|
|
max-height: var(--max-height);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 3px 15px -3px var(--color-shadow);
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc(100% + var(--offset-from-target));
|
|
background: var(--color-background);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 4;
|
|
|
|
opacity: 0;
|
|
max-height: 0;
|
|
pointer-events: none;
|
|
padding: 0;
|
|
border: none;
|
|
|
|
&--opened {
|
|
opacity: 1;
|
|
padding: var(--padding);
|
|
max-height: var(--max-height);
|
|
pointer-events: auto;
|
|
animation: panelShowing 100ms ease;
|
|
border: 1px solid var(--color-border);
|
|
|
|
@media (--mobile) {
|
|
animation: panelShowingMobile 250ms ease;
|
|
}
|
|
}
|
|
|
|
&__items {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
&__overlay {
|
|
@media (--mobile) {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-dark);
|
|
z-index: 3;
|
|
opacity: 0.5;
|
|
transition: opacity 0.12s ease-in;
|
|
will-change: opacity;
|
|
visibility: visible;
|
|
}
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--open-top {
|
|
top: calc(-1 * (var(--offset-from-target) + var(--popover-height)));
|
|
}
|
|
|
|
@media (--mobile) {
|
|
--offset: 5px;
|
|
|
|
position: fixed;
|
|
max-width: none;
|
|
min-width: calc(100% - var(--offset) * 2);
|
|
left: var(--offset);
|
|
right: var(--offset);
|
|
bottom: calc(var(--offset) + env(safe-area-inset-bottom));
|
|
top: auto;
|
|
border-radius: 10px;
|
|
|
|
.ce-popover__search {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__search, &__custom-content:not(:empty) {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
&__nothing-found-message {
|
|
color: var(--grayText);
|
|
display: none;
|
|
cursor: default;
|
|
padding: 3px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&--displayed {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&__custom-content:not(:empty) {
|
|
padding: 4px;
|
|
|
|
@media (--not-mobile) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&__custom-content--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Popover item styles
|
|
*/
|
|
.ce-popover-item {
|
|
--border-radius: 6px;
|
|
--icon-size: 20px;
|
|
--icon-size-mobile: 28px;
|
|
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px;
|
|
color: var(--color-text-primary);
|
|
user-select: none;
|
|
|
|
@media (--mobile) {
|
|
padding: 4px;
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
&__icon {
|
|
border-radius: 5px;
|
|
width: 26px;
|
|
height: 26px;
|
|
box-shadow: 0 0 0 1px var(--color-border-icon);
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10px;
|
|
|
|
svg {
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
}
|
|
|
|
@media (--mobile){
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
|
|
svg {
|
|
width: var(--icon-size-mobile);
|
|
height: var(--icon-size-mobile);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 500;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@media (--mobile) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
&__secondary-title {
|
|
color: var(--color-text-secondary);
|
|
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;
|
|
}
|
|
}
|
|
|
|
&--active {
|
|
background: var(--color-background-icon-active);
|
|
color: var(--color-text-icon-active);
|
|
|
|
.ce-popover-item__icon {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&--disabled {
|
|
color: var(--color-text-secondary);
|
|
cursor: default;
|
|
pointer-events: none;
|
|
|
|
.ce-popover-item__icon {
|
|
box-shadow: 0 0 0 1px var(--color-border-icon-disabled);
|
|
}
|
|
}
|
|
|
|
&--focused {
|
|
&:not(.ce-popover-item--no-focus) {
|
|
box-shadow: inset 0 0 0px 1px var(--color-shadow-item-focus);
|
|
background: var(--color-background-item-focus) !important;
|
|
}
|
|
}
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
|
|
@media (--can-hover) {
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
&:not(.ce-popover-item--no-hover) {
|
|
background-color: var(--color-background-item-hover);
|
|
}
|
|
|
|
.ce-popover-item__icon {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--confirmation {
|
|
background: var(--color-background-item-confirm);
|
|
|
|
.ce-popover-item__icon {
|
|
color: var(--color-background-item-confirm);
|
|
}
|
|
|
|
.ce-popover-item__title {
|
|
color: white;
|
|
}
|
|
|
|
/* confirmation hover */
|
|
&:not(.ce-popover-item--no-hover) {
|
|
@media (--can-hover) {
|
|
&:hover {
|
|
background: var(--color-background-item-confirm-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* confirmation focus */
|
|
&:not(.ce-popover-item--no-focus) {
|
|
&.ce-popover-item--focused {
|
|
background: var(--color-background-item-confirm-hover) !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&--confirmation, &--active, &--focused {
|
|
.ce-popover-item__icon {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Animations
|
|
*/
|
|
@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);
|
|
}
|
|
}
|
|
|
|
|
|
.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(-9%, 0, 0);
|
|
}
|
|
|
|
30% {
|
|
transform: translate3d(9%, 0, 0);
|
|
}
|
|
|
|
45% {
|
|
transform: translate3d(-4%, 0, 0);
|
|
}
|
|
|
|
60% {
|
|
transform: translate3d(4%, 0, 0);
|
|
}
|
|
|
|
75% {
|
|
transform: translate3d(-1%, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|