UNPKG

@ckeditor/ckeditor5-list

Version:

Ordered and unordered lists feature to CKEditor 5.

75 lines (74 loc) 2.49 kB
/** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-todo-list-checkmark-size: 16px; } .ck-editor__editable .ck-list-bogus-paragraph { display: block; } .ck.ck-list-styles-list { display: grid; } .ck-editor__editable.ck-content .todo-list .todo-list__label > input { cursor: pointer; } .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before { box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1); } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input { -webkit-appearance: none; display: inline-block; position: relative; width: var(--ck-todo-list-checkmark-size); height: var(--ck-todo-list-checkmark-size); vertical-align: middle; border: 0; left: -25px; margin-right: -15px; right: 0; margin-left: 0; } .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input { left: 0; margin-right: 0; right: -25px; margin-left: -15px; } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before { display: block; position: absolute; box-sizing: border-box; content: ''; width: 100%; height: 100%; border: 1px solid hsl(0, 0%, 20%); border-radius: 2px; transition: 250ms ease-in-out box-shadow; } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after { display: block; position: absolute; box-sizing: content-box; pointer-events: none; content: ''; left: calc( var(--ck-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0; transform: rotate(45deg); } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before { background: hsl(126, 64%, 41%); border-color: hsl(126, 64%, 41%); } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after { border-color: hsl(0, 0%, 100%); } .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] { position: absolute; }