editor.js/src/styles/ui.css
Polina Shneider b9d6a81f2d
Add loader (#575)
* Add loader

* Remove preloader after onReady

* Remove frame from loader

* Remove extra css property

* Make methods not async, commit production bundle

* update version, improve style

* Update loader styles

* Temporarily remove bundle to resolve conflicts

* Commit bundle

* Bundle
2018-12-27 23:21:31 +03:00

88 lines
1.4 KiB
CSS

/**
* Editor wrapper
*/
.codex-editor {
position: relative;
box-sizing: border-box;
z-index: 1;
.hide {
display: none;
}
&__redactor {
padding-bottom: 300px;
&--hidden {
display: none;
}
}
&__loader {
position: relative;
height: 30vh;
&::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 2px solid var(--color-gray-border);
border-top-color: transparent;
box-sizing: border-box;
animation: editor-loader-spin 800ms infinite linear;
will-change: transform;
}
}
&-copyable {
position: absolute;
height: 1px;
width: 1px;
top: -400%;
opacity: 0.001;
}
svg {
fill: currentColor;
vertical-align: middle;
max-height: 100%;
}
}
/**
* Set color for native selection
*/
::selection{
background-color: var(--selectionColor);
}
/**
* Add placeholder to content editable elements with data attribute
* data-placeholder="Hello world!"
*/
[contentEditable=true][data-placeholder]:empty::before{
content: attr(data-placeholder);
color: var(--grayText);
font-weight: normal;
}
[contentEditable=true][data-placeholder]:empty:focus::before {
opacity: 0.3;
}
@keyframes editor-loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}