editor.js/src/styles/inline-toolbar.css
2019-07-01 14:10:30 +03:00

93 lines
1.6 KiB
CSS

.ce-inline-toolbar {
@apply --overlay-pane;
padding: 3px;
transform: translateX(-50%) translateY(8px) scale(0.9);
box-shadow: 0 6px 12px -6px rgba(131, 147, 173, 0.46),
5px -12px 34px -13px rgba(97, 105, 134, 0.6),
0 26px 52px 3px rgba(147, 165, 186, 0.24);
opacity: 0;
visibility: hidden;
transition: transform 150ms ease, opacity 250ms ease;
will-change: transform, opacity;
&--showed {
opacity: 1;
visibility: visible;
transform: translateX(-50%)
}
&--left-oriented {
transform: translateX(-23px) translateY(8px) scale(0.9);
}
&--left-oriented&--showed {
transform: translateX(-23px);
}
&--right-oriented {
transform: translateX(-100%) translateY(8px) scale(0.9);
margin-left: 23px;
}
&--right-oriented&--showed {
transform: translateX(-100%);
}
[hidden] {
display: none !important;
}
&__buttons {
display: flex;
}
}
.ce-inline-tool {
@apply --toolbar-button;
line-height: normal;
&:not(:last-of-type) {
margin-right: 2px;
}
&--last {
margin-right: 0 !important;
}
&--link {
.icon--unlink {
display: none;
}
}
&--unlink {
.icon--link {
display: none;
}
.icon--unlink {
display: inline-block;
}
}
&-input {
background-color: var(--bg-light);
outline: none;
border: 0;
border-radius: 3px;
margin: 3px 0 0;
font-size: 13px;
padding: 8px;
width: 100%;
box-sizing: border-box;
display: none;
&::placeholder {
color: var(--grayText);
}
&--showed {
display: block;
}
}
}