mirror of
https://github.com/codex-team/editor.js
synced 2024-06-28 02:10:31 +02:00
* update * Toolbar, Toolbox, UI (#239) * Toolbox making * Add Toolbox buttons click handler * Toolbar, Toolbox, UI * Updates * update css prefix * trying to write docs * append callback behaviour * update request * update * empty initial data * initial saver * some requested changes * update request * requested changes * upgrade saver * new improvements * update * Caret module: initial * improvements * moving caret initial * small improvements * last changes, added docs * requested changes * implement getters instead of functions in block cursors * last requested changes * caret module docs and last improvements * update docs * upgrade request * update docs * upd * todo on delays * Sanitizer docs * split func upd * split blocks update * up docs * Listeners Module: initial * listener module updates * split is ready * update * start to make merge * upd * split general upd split is ready * ups * keyboard module update * BlockManager removed keyboard handler * commit before merging rewriting2.0 * general upd split * Documentation upd * document + listener upd * upd doc * documentation upd * doc upd * listener upd * update algh extract fragm * upd extractRangeContent * upd dom.js * keyboard upd (shift + enter & enableLineBreaks) * upd enter pressed * keyboard.js upd * enter pressed upd * documenation added * documentation upd * Toolbar: settings zone added. (#252) * Toolbar: settings zone added. * update some comments * Making a Toolbar * delete block * dom improvements and merging blocks * merge and split improvements * fix merging * do not remove block if block contains media * optimize code * caret behaviour improved * up * up * merging blocks. Now plugins handles this cases * mergeable getter * save * up * dom getdeepestnode improvements * improve getDeepest node method one more time * upd * Deal with it * improve isAtStart * improve docs * use smart isAtStart and isAtEnt method in navigateNext/navigatePrevious * improve docs * fix bug in $.isEmpty, improve keydown * fix isAtEnd * rollback setCaret code duplication * improve backspace * Debug tree walker * fix tree walker * small caret fix * queue ordering * update bundle * improve first letter checkup * doc upd * update current block index setter * TypeScript support, Webpack 4, Inline Toolbar beginning (#257) * Create UI * Support TypeScript Modules * remove tmp files * migrate to 2-spaced tabs * Add TS Linter * Inline Toolbar moving (#258) * Inline Toolbar moving * simplify code * Check is need to show Inline Toolbar * remove duplicate from doc * fix doc * open/close IT * Close IT by clicks on Redactor * @guryn going strange * default settings initial * add move up button to default tunes area * need to figure out with assets * Inline Toolbar Tools base example (#260) * Inline Toolbar Tools base example * texts fixed * imrpove texts * little fixes * save * tunes with interface * add tool settings * initial api methods * api is ready * started writing docs * Create svg sprite (#261) * API * requested changes * fix conflicts * add docs * doc fixes and interface improvements * update * API scopes improved * Deleting block: Initial * Delete block with confirmation * Event subscription&unsubscription * deletion trigger improvements * small improvements * Link Inline Tool (#264) * Link Inline Tool * api injected * text improved * Clear input on the reselection * little improvements * Delete tune fixes * UI: Block Settings, show Plus after Enter keydown (#265) * Some UI improvements: icons settigns * Show plus button after split * decrease autoprefixer * rename variable * Revert "Merge branch 'delete-tune-fixes' into rewriting-version2.0" * Delete Tune improvements * upd * upd comments * actualize API docs * Allow to connect external Inline Tools (#269) * Allow to connect external Inline Tools * unhardcode tool's api settings * Italic inline tool * update icon size * upgrade findParentTag function * add interface selection * fix cs * save marker * bundles * add todo * removing wrapper * update styles * market -> term * add comments * improve code * descrease margin * add text block to example * add line brakes * remove space * fix bugs * fix bug * umd as a library target * background -> background-color * Clear API (#274) * blockManager.clear * upd * api bez ebanoj knopki api * fix assignment * insert empty block with clear method * clear and render methods improved * open saver.save() * add comments * update comments * fix data returned by editor * rename plugin name field in data object (#276) * Text tool refactored (#277) Now it returns strict data format. * do not add block if tool is not exist (#278) * do not add block if tool is not exist * show warning * add todo * update warning message * put message into variable * Revert "put message into variable" * update comment * Module Keyboard rewrited to BlockEvents (#279) * Module Keydown rewrited to BlockEvents * move keyup and mouseup to the Block Events * Move-up tune (#268) * Move up tune initial * move up tune initial behaviour* moving up formula, docs and code cleaned * do not close the toolbar if moving block up* move nagivate methods to Caret Module* navigations returns boolean if caret is set * code improved * update comments * Eslint --fix for project files (#280) * Header plugin (#281) * header initial * fix styles * eslint fix * add appendCallback * add comments * update styles * add svgs * highlight settings buttons * do not show text plugin in the toolbar * remove svg * Fixing caret behaviour. (#282) Plugins can change their state so that affect on Block's pluginsContent property which is in memory. * remove useless code * fix merge * "MoveDown" tune (#283) * move down initial Swap current block with next block and scroll window screen * check if block is last added new method to the blocks API that returns blocks count * fix comments * animate tune * add animation when tune is disabled * requested changes * remove unused css * Fix merge function and rename Block's wrapper (#284) * Fix merge function and rename wrapper * update * renew condition * update * upd * Merging blocks: Restore caret position 🤟🤟💪 (#286) * Merging blocks: Restore caret position 🤟🤟💪 * requested changes * update removing shadow caret * hide toolbar and selection on typing (#289) * Editor Instance config Interface (#285) * create interface for editor config * use IEditorConfig * create some interfaces * add comments * editor interface * updates * update editor interface (#293) * При перемещении по стрелочкам убирать выделение блока (#296) * При перемещении по стрелочкам убирать выделение блока * Add comments * update comments * update comment * update toolbar design (#301) * Set caret at the end if clicked outsite the block (#305) * Set caret at last block or create new block at end * update comment * fix comments * Insert new Block when enter pressed on editor area (#307) * insert new block when enter pressed on editor zone * extra conditions. Enter must be handled on editors area * move at editor condition to the Selection method * closes can return null * fixing editor area * do not create new block * clean example * updates due to the requested changes * Add placeholder to contentEditable elements (#306) * add placeholder to contentEditable elements * store selection color in a variable * add placeholder to header block * Add placeholder to contenteditable only if attribute data-placeholder exists * remove tool config * Close toolbar after block is removed (#314) * makeSettings -> renderSettings (#315) * Term: new icon, new style. + margin between settings buttons (#316) * remove useless span wrapper * update linters * update styles * process click on svg by closest * remove commented code * rename function: svgIcon -> toolboxIcon * add toolboxIcon to docs * Paste (#259) * Paste module * Rewrite paste logic * Update due comments * Docs * Add all block elements * Sanitize content on paste * Remove logs and add header handler * Add comment to dom.js * Add comment to tools.js * Split block if paste not at the end * Update docs * Update docs * Take Tool name from config * Update docs * Label onPaste handler as private * Resolve conflict * Replace current block if it is empty (#320) * Improve Header line-height (#321) * Fix typo (#324) * CodeX Editor 2.0 * Module Shortcuts (#317) * import shortcuts * node modules works * enable shortcut for inline tools * check shortcut existance * enable shortcuts to Block tools * set caret to block if block replaced * enable shortcuts on inline-tools * improve code * last changes * update * fix * insert returns block so we can set caret * use Map instead own structure * disable shortcut if iniline-toolbar disabled * update code styles * remove todo * upd * update * remove settings from insert function * create interface * code improvements * use const instead of let * upd * Simple Image Tool (#326) * Simple Image * fix pattern * show tunes` state * update code * update code * upd * Fix toolbox appearance, tools boxed are clickable (#331) * Remove toolsConfig from Editor's config (#327) * fix linters * remove toolsConfig * update tool's interfaces * add comments * bundles * remove test headers * restore commented code * update tool's interface * toolConfig -> toolSetting * fix typos * update code comments * update installation doc * update docs * update dev dep packages (#333) * Check is paste handler a function only if it exists (#328) * Toolbar with tab (#330) * toolbar tabs initial * leaf initial * save state * flip back toolbox items * enter on toolbox item * update * requested changes * new condfition * update * improve animation on leaf * fix shift+tab flip * up * update * updates * Consecutive blank lines are forbidden * Correct choosing next toolbox item * update * update comment * Validate editor's config before initing (#341) * validate editor's config before initing * update readme * @ * update comments * add function _.isClass * Styles API (#343) * StylesAPI * use styles api in plugins * add inline styles * List Tool [new] (#344) * list tool initial * list class with settings * make tool reactive * final List improvements * reorder * tmp update * unhadrcode enter handler * updates * enableLineBreaks also checks * skip empty items * select LI by CMD+A, fix backspace in the last item * improve check for emptiness * Example page improved (#347) * Update new example * imrpove example.html * updates * improve code * Header plugin (#348) * isFunction function * use header from cdn * Improve paste behaviour (#346) * Improve paste behaviour * Done * Don't pass empty items * Update comment * move public up * Remove disallow paste option * Quote Tool (#329) * Quote Tool * Add icon * Upd * fix ENTER on quote * Remove useless code * items -> blocks (#351) * use SimpleImage from cdn (#355) * use simpleimage from cdn * add comments * fix spaces * fix comments * remove comments * update simple-image script * Update text on the example.html (#356) * use Paragraph Tool from CDN (#357) * use Paragraph Tool from CDN * add line brakes * rename block: paragraph -> text * Remove _callbacks.js (#358) * Clear unused files (#359) * TOOLBAR_ICON_CLASS -> TOOLBAR_ICON (#360) * TOOLBAR_ICON_CLASS -> TOOLBAR_ICON * remove defaultConfig * Delimiter tool (#362) * Delimiter added * ашч * use delimiter from cdn * Enter on editor (#363) * Enterpress on editor * use additional property * check enter on body * update * fix toolbar behaviour * upd * update bundle * remove useless ui property * update comment * add Element.prepend() function (#365) * add Element.prepend() function * allow to pass element of array to prepend() polyfill * use List Tool from cdn (#366) * use List Tool from cdn * add missing </div> in example.html * Pass "config" from Tool's settings to Tool's constructor (#367) * pass config from Tool's settings to Tool's constructor * reorder elements * add apiSettings.CONFIG property * use string as a object's key 😔 (#368) * update placeholder's styles (#369) * Add shortcuts for internal tools (#370) * Add shortcuts for internal tools * upd doc * remove articles * ☹️ guryn asked * use quote from cdn (#371) * Add cache to the inline tools (#372) * use Inline Code Tool from cdn (#375) * Issue 354 inline tools filter (#376) * Allow to filter inline tools. * update example * update header * fix endless cycle (#378) * Destructured options for Inline Tools (#379) * add destructured options for inline-tools * temporary disable inlineCode * remove term sources * Fix toolbar moving after arrow navigation (#380) * Fix toolbar moving after arrow navigation * move before open * fix error on Enter after block removing * add example Tools as submodules (#381) * add destructured options for inline-tools * temporary disable inlineCode * remove term sources * add inline code Tool as a submodule * update version of inline-code package * add Tools as submodules * update Tools and use destructured params object * Add constructor() docs * update package Paragraph Tool * update installation docs * Input navigation (#339) * Quote Tool * Add icon * Upd * Initial setup * Save changes * Add scroll and fix input focus * Add comments * Rebuild bundle * fix ENTER on quote * Fix split behaviour * Fix * Navigate only to contentful blocks * add comments * Fix backspace on last block * Remove log * It works * Resolve comments * Use constants * New readme 🦅 (#386) * New readme 🦅 * upd text * Issue 374 (#385) * Fix issue #374 * Set current block index to -1 if there is no blocks left * Insert new block if first one was removed by default * Paragraph as a default Tool in editor; Zero-conf (#389) * git commit -m "Removed submodule Paragraph" * add paragraph to core + zero-config * update bundle * update comment * remove log * enable minifying (#390) * Drop current block index only if there is no selection at the Editor (#388) * Drop current block index only if there is no selection at the Editor * Set current node if click ended out of editor * Small backspace behaviour improvement (#391) * Small backspace behaviour improvement * fix caret position * update from base branch * Update webpack config * Migrate to Yarn (#393) * Migrate to yarn * Update scripts * Rewrite helpers classes to TypeScript (#396) * Add docs and isReady promise (#394) * set default holderId value (#404) * Destroyer (#392) * Initial destroy method * Add destroy method to api docs * Export isReady promise in CodexEditor constructor 👨🎓 Co-authored-by: Murod Khaydarov <murod.haydarov@gmail.com> Co-authored-by: George Berezhnoy <gohabereg@gmail.com> Co-authored-by: Taly <vitalik7tv@yandex.ru>
628 lines
11 KiB
CSS
628 lines
11 KiB
CSS
/**
|
|
* Editor wrapper
|
|
*/
|
|
.codex-editor{
|
|
position: relative;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Working zone - redactor
|
|
*/
|
|
.ce-redactor{
|
|
position: relative;
|
|
padding-bottom: 120px;
|
|
min-height: 350px;
|
|
border: 1px dotted #ccc;
|
|
}
|
|
|
|
.ce-block__content a {
|
|
color: #186baa;
|
|
}
|
|
|
|
/*.ce-redactor * {
|
|
box-sizing: border-box;
|
|
}*/
|
|
|
|
/**
|
|
* Remove outlines from inputs
|
|
*/
|
|
.ce-redactor [contenteditable]{
|
|
outline: none !important;
|
|
}
|
|
|
|
/**
|
|
* Toolbar
|
|
*/
|
|
.ce-toolbar{
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
|
|
/* hidden by default */
|
|
display: none;
|
|
}
|
|
.ce-toolbar.opened{
|
|
display: block;
|
|
}
|
|
|
|
.ce-toolbar__content {
|
|
position: relative;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
/**
|
|
* Plus button
|
|
*/
|
|
.ce-toolbar__plus{
|
|
position: absolute;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
transition: transform 100ms ease;
|
|
will-change: transform;
|
|
|
|
margin-left: -50px;
|
|
}
|
|
.ce-toolbar__plus.clicked{
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/**
|
|
* Tools list
|
|
*/
|
|
.ce-toolbar__tools{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
/* hidden by default */
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateX(-100px);
|
|
transition: all 150ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
|
}
|
|
.ce-toolbar__tools.opened{
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
}
|
|
|
|
.ce-toolbar__plus,
|
|
.ce-toolbar__tools li {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #eff2f5;
|
|
/*box-shadow: 0 0 0 1px #6d748c;*/
|
|
margin-right: 17px;
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
|
|
will-change: transform, margin-right;
|
|
transition: transform 200ms cubic-bezier(0.600, -0.280, 0.735, 0.045), margin 200ms ease-out;
|
|
}
|
|
.ce-toolbar__tools li i{
|
|
line-height: 32px;
|
|
}
|
|
.ce-toolbar__tools li:hover,
|
|
.ce-toolbar__tools .selected{
|
|
background: #383b5d;
|
|
box-shadow: none;
|
|
color: #fff;
|
|
}
|
|
|
|
/* animation for tools opening */
|
|
.ce-toolbar__tools li{
|
|
transform: rotate(-180deg) scale(.7);
|
|
margin-right: -15px;
|
|
}
|
|
.ce-toolbar__tools.opened li{
|
|
transform: none;
|
|
margin-right: 17px;
|
|
}
|
|
|
|
/**
|
|
* Toolbar right zone with SETTINGS and DELETE
|
|
*/
|
|
.ce-toolbar__actions{
|
|
position: absolute;
|
|
right: 15px;
|
|
border-radius: 2px;
|
|
padding: 6px 5px;
|
|
line-height: 1em;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
}
|
|
|
|
|
|
/**
|
|
* Settings button
|
|
*/
|
|
.ce-toolbar__settings-btn{
|
|
margin-right: .3em;
|
|
cursor: pointer;
|
|
}
|
|
.ce-toolbar__settings-btn,
|
|
.ce-toolbar__remove-btn{
|
|
color: #5e6475;
|
|
}
|
|
.ce-toolbar__settings-btn:hover,
|
|
.ce-toolbar__remove-btn:hover{
|
|
color: #272b35
|
|
}
|
|
|
|
/**
|
|
* Settigns panel
|
|
*/
|
|
.ce-settings,
|
|
.ce-toolbar__remove-confirmation{
|
|
position: absolute;
|
|
right: 0;
|
|
margin-top: 10px;
|
|
min-width: 200px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #e7e9f1;
|
|
box-shadow: 0px 2px 5px 0px rgba(16, 23, 49, 0.05);
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
color: #2b2d31;
|
|
font-size: 13.4px;
|
|
|
|
/* hidden by default */
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Settings and remove-confirmation corner
|
|
*/
|
|
.ce-settings:before,
|
|
.ce-toolbar__remove-confirmation:before,
|
|
.ce-settings:after,
|
|
.ce-toolbar__remove-confirmation:after{
|
|
content: "";
|
|
position: absolute;
|
|
top: -14px;
|
|
right: 10px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.ce-settings:before,
|
|
.ce-toolbar__remove-confirmation:before {
|
|
margin: -2px -1px 0;
|
|
border-width: 8px;
|
|
border-color: transparent transparent #e7e9f1 transparent;
|
|
}
|
|
.ce-settings:after,
|
|
.ce-toolbar__remove-confirmation:after {
|
|
border-width: 7px;
|
|
border-color: transparent transparent #fff transparent;
|
|
}
|
|
.ce-settings:before,
|
|
.ce-settings:after{
|
|
right: 31px;
|
|
}
|
|
.ce-toolbar__remove-confirmation:before,
|
|
.ce-toolbar__remove-confirmation:after{
|
|
right: 10px;
|
|
}
|
|
.ce-toolbar__remove-confirmation{
|
|
right: -3px;
|
|
}
|
|
|
|
|
|
/**
|
|
* Plugins settings style helper
|
|
*/
|
|
.cdx-plugin-settings--horisontal {
|
|
display: -webkit-flex;
|
|
display: -moz-flex;
|
|
display: -ms-flex;
|
|
display: -o-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.cdx-plugin-settings--horisontal .cdx-plugin-settings__item {
|
|
flex: 1 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.ce-settings__item,
|
|
.ce-toolbar__remove-confirm,
|
|
.ce-toolbar__remove-cancel,
|
|
.cdx-plugin-settings__item {
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.ce-settings__item:hover,
|
|
.ce-toolbar__remove-cancel:hover,
|
|
.cdx-plugin-settings__item:hover {
|
|
background: #edf0f5;
|
|
}
|
|
|
|
.ce-settings.opened,
|
|
.ce-toolbar__remove-confirmation.opened{
|
|
display: block;
|
|
}
|
|
|
|
.ce-settings_plugin{
|
|
border-bottom: 1px solid #e7e9f1;
|
|
}
|
|
|
|
.ce-settings_plugin:empty{
|
|
display: none;
|
|
}
|
|
|
|
.ce-settings__item:not(:last-of-type) {
|
|
border-bottom: 1px solid #e7e9f1;
|
|
}
|
|
|
|
.ce-settings__item i,
|
|
.cdx-plugin-settings__item i {
|
|
min-width: 16px;
|
|
margin-right: 1.3em;
|
|
}
|
|
|
|
.ce-settings__item i::before {
|
|
min-width: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/**
|
|
* Trash button
|
|
*/
|
|
.ce-toolbar__remove-btn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ce-toolbar__remove-confirm{
|
|
color: #ea5c5c;
|
|
}
|
|
|
|
.ce-toolbar__remove-confirm:hover{
|
|
background: #e23d3d;
|
|
color: #fff;
|
|
}
|
|
|
|
/** Anchor input */
|
|
.ce-settings__anchor-wrapper:hover {
|
|
background: none;
|
|
}
|
|
|
|
.ce-settings__anchor-input {
|
|
max-width: 100%;
|
|
border: 0;
|
|
outline: none;
|
|
padding: 14px 0;
|
|
margin: -15px 0;
|
|
font-size: inherit;
|
|
color: #000;
|
|
height: 1em;
|
|
}
|
|
|
|
.ce-settings__anchor-input::-webkit-input-placeholder {color: rgba(112, 118, 132, 0.5);}
|
|
.ce-settings__anchor-input::-moz-placeholder {color: rgba(112, 118, 132, 0.5);}
|
|
.ce-settings__anchor-input:-moz-placeholder {color: rgba(112, 118, 132, 0.5);}
|
|
.ce-settings__anchor-input:-ms-input-placeholder {color: rgba(112, 118, 132, 0.5);}
|
|
|
|
.ce-settings__anchor-hash {
|
|
display: inline-block;
|
|
background-size: contain;
|
|
height: 11px;
|
|
width: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/**
|
|
* Overlayed inline toolbar
|
|
*/
|
|
.ce-toolbar-inline{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 3;
|
|
background: #242533;
|
|
border-radius: 3px;
|
|
padding: 0 5px;
|
|
margin-top: -.5em;
|
|
|
|
will-change: transform;
|
|
transition: transform .2s cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
|
|
|
color: #fff;
|
|
|
|
/* hidden by default */
|
|
display: none;
|
|
}
|
|
.ce-toolbar-inline.opened {
|
|
display: block;
|
|
}
|
|
.ce-toolbar-inline__buttons{
|
|
}
|
|
.ce-toolbar-inline__buttons button{
|
|
background: none;
|
|
border: 0;
|
|
margin: 0 !important;
|
|
height: auto !important;
|
|
padding: 13px 9px;
|
|
line-height: 1em;
|
|
color: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.ce-toolbar-inline__buttons button:hover{
|
|
background: #171827;
|
|
color: #428bff;
|
|
}
|
|
.ce-toolbar-inline__actions{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-radius: 3px;
|
|
background: #242533;
|
|
display: none;
|
|
}
|
|
.ce-toolbar-inline__actions.opened{
|
|
display: block;
|
|
}
|
|
.ce-toolbar-inline__actions input{
|
|
background: transparent !important;
|
|
border : 0 !important;
|
|
box-sizing: border-box !important;
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.ce-toolbar-inline__actions input::-moz-placeholder{ color: #afb4c3 !important;}
|
|
.ce-toolbar-inline__actions input::-webkit-input-placeholder{ color: #afb4c3 !important;}
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Base blocks
|
|
*/
|
|
.ce-block {
|
|
margin: 0 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ce-block--focused {
|
|
background: #f9f9fb;
|
|
}
|
|
|
|
.ce-block--feed-mode {
|
|
position: relative;
|
|
}
|
|
|
|
.ce-block--feed-mode:before {
|
|
content: '\e81b';
|
|
font-family: "codex_editor";
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 13px;
|
|
font-size: 16px;
|
|
color: #7d6060;
|
|
}
|
|
|
|
.ce-block--anchor {
|
|
position: relative;
|
|
}
|
|
|
|
.ce-block--anchor::after {
|
|
display: inline-block;
|
|
content: "#" attr(data-anchor);
|
|
color: #868896;
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 13px;
|
|
max-width: 100px;
|
|
word-wrap: break-word;
|
|
font-size: 12px;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Block content holder
|
|
*/
|
|
.ce-block__content{
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 1px;
|
|
}
|
|
.ce-block--stretched{
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.cdx-unavailable-block {
|
|
display: block;
|
|
margin: 10px 0;
|
|
padding: 80px;
|
|
background-color: #fff7f7;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
color: #ce5f5f;
|
|
}
|
|
|
|
/**
|
|
* Typographycs
|
|
*/
|
|
.ce-redactor p{
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Loading bar class
|
|
*/
|
|
.ce-redactor__loader {
|
|
background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, #f5f9ff 4px, #eaedef 8px) !important;
|
|
background-size: 56px 56px;
|
|
animation: loading-bar 600ms infinite linear;
|
|
}
|
|
|
|
@keyframes loading-bar {
|
|
100% { background-position: -56% 0 }
|
|
}
|
|
|
|
/**
|
|
* Notifications
|
|
*/
|
|
|
|
.cdx-notifications-block {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
|
|
.cdx-notification__notification-appending div {
|
|
animation: notification 100ms infinite ease-in;
|
|
}
|
|
|
|
@keyframes notification {
|
|
|
|
0% { transform: translateY(20px); }
|
|
100% { transform: translateY(0px); }
|
|
|
|
}
|
|
|
|
|
|
.cdx-notification {
|
|
width: 250px;
|
|
margin-top: 15px;
|
|
padding: 15px;
|
|
background: #fff;
|
|
border: 1px solid #e7e9f1;
|
|
box-shadow: 0px 2px 5px 0px rgba(16, 23, 49, 0.05);
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cdx-notification__message {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.cdx-notification__ok-btn,
|
|
.cdx-notification__cancel-btn {
|
|
padding: 4px 7px;
|
|
cursor: pointer;
|
|
background: #4584d8;
|
|
color: #fff;
|
|
min-width: 50px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.cdx-notification__cancel-btn {
|
|
margin-left: 10px;
|
|
background: #dae0e8;
|
|
color: inherit;
|
|
}
|
|
|
|
.cdx-notification__cancel-btn {
|
|
background: #cad5e2;
|
|
}
|
|
|
|
.cdx-notification__ok-btn:hover {
|
|
background: #3d77c3;
|
|
}
|
|
|
|
.cdx-notification__input {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
border: none;
|
|
outline: none;
|
|
padding: 2px 0;
|
|
font-size: inherit;
|
|
border-bottom: 2px solid #d1d3da;
|
|
}
|
|
|
|
.cdx-notification-error {
|
|
border-left: 4px solid rgb(255, 112, 112);
|
|
}
|
|
|
|
.cdx-notification-warn {
|
|
border-left: 4px solid rgb(79, 146, 247);
|
|
}
|
|
|
|
|
|
/**
|
|
* Mobile viewport styles
|
|
* =================================
|
|
*/
|
|
@media all and (max-width: 1000px){
|
|
|
|
.ce-block{
|
|
margin: 0;
|
|
}
|
|
.ce-block__content,
|
|
.ce-toolbar__content
|
|
{
|
|
padding: 0 25px;
|
|
}
|
|
|
|
.ce-toolbar {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.ce-toolbar__actions {
|
|
right: 0;
|
|
top: -10px;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.ce-toolbar__settings-btn {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.ce-toolbar__plus {
|
|
margin-left: -25px;
|
|
}
|
|
|
|
.ce-toolbar__plus,
|
|
.ce-toolbar__tools li {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.ce-toolbar__tools li i {
|
|
line-height: 22px;
|
|
}
|
|
|
|
.ce-toolbar__tools {
|
|
left: 30px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ce-block--anchor::after {
|
|
display: none;
|
|
}
|
|
|
|
} |