UNPKG

@ckeditor/ckeditor5-list

Version:

Ordered and unordered lists feature to CKEditor 5.

305 lines (270 loc) • 8.93 kB
/** * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck-editor__editable .ck-list-bogus-paragraph { display: block; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-list-styles-list { display: grid; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-content-list-marker-color: var(--ck-content-font-color); --ck-content-list-marker-font-family: var(--ck-content-font-family); --ck-content-list-marker-font-size: var(--ck-content-font-size); } /* Opinionated list content styling: prevents content shift * when a list becomes multi-block (Enter + Backspace scenario). * See: https://github.com/ckeditor/ckeditor5/pull/18801 */ .ck-content li > p:first-of-type { margin-top: 0; } /* Prevents margins from appearing when a bogus paragraph * receives line height or text alignment. * Ensures a consistent experience with the first paragraph. * See: https://github.com/ckeditor/ckeditor5/pull/18801 */ .ck-content li > p:only-child { margin-top: 0; margin-bottom: 0; } .ck-content li.ck-list-marker-bold::marker { font-weight: bold; } .ck-content li.ck-list-marker-italic::marker { font-style: italic; } .ck-content li.ck-list-marker-color::marker { color: var(--ck-content-list-marker-color); } .ck-content li.ck-list-marker-font-family::marker { font-family: var(--ck-content-list-marker-font-family); } .ck-content li.ck-list-marker-font-size::marker { font-size: var(--ck-content-list-marker-font-size); } .ck-content li.ck-list-marker-font-size-tiny::marker { font-size: var(--ck-content-font-size-tiny); } .ck-content li.ck-list-marker-font-size-small::marker { font-size: var(--ck-content-font-size-small); } .ck-content li.ck-list-marker-font-size-big::marker { font-size: var(--ck-content-font-size-big); } .ck-content li.ck-list-marker-font-size-huge::marker { font-size: var(--ck-content-font-size-huge); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck-content ol { list-style-type: decimal; } .ck-content ol ol { list-style-type: lower-latin; } .ck-content ol ol ol { list-style-type: lower-roman; } .ck-content ol ol ol ol { list-style-type: upper-latin; } .ck-content ol ol ol ol ol { list-style-type: upper-roman; } .ck-content ul { list-style-type: disc; } .ck-content ul ul { list-style-type: circle; } .ck-content ul ul ul { list-style-type: square; } .ck-content ul ul ul ul { list-style-type: square; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-content-todo-list-checkmark-size: 16px; } /* * To-do list content styles. */ .ck-content .todo-list { list-style: none; } .ck-content .todo-list li { position: relative; margin-bottom: 5px; } .ck-content .todo-list li .todo-list { margin-top: 5px; } .ck-content .todo-list .todo-list__label > input { -webkit-appearance: none; display: inline-block; position: relative; width: var(--ck-content-todo-list-checkmark-size); height: var(--ck-content-todo-list-checkmark-size); vertical-align: middle; /* Needed on iOS */ border: 0; /* LTR styles */ left: -25px; margin-right: -15px; right: 0; margin-left: 0; /* RTL styles */ } .ck-content[dir=rtl] .todo-list .todo-list__label > input { left: 0; margin-right: 0; right: -25px; margin-left: -15px; } .ck-content .todo-list .todo-list__label > 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; } @media (prefers-reduced-motion: reduce) { .ck-content .todo-list .todo-list__label > input::before { transition: none; } } .ck-content .todo-list .todo-list__label > input::after { display: block; position: absolute; box-sizing: content-box; pointer-events: none; content: ''; /* Calculate tick position, size and border-width proportional to the checkmark size. */ left: calc( var(--ck-content-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-content-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-content-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-content-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-content-todo-list-checkmark-size) / 8 ) calc( var(--ck-content-todo-list-checkmark-size) / 8 ) 0; transform: rotate(45deg); } .ck-content .todo-list .todo-list__label > input[checked]::before { background: hsl(126, 64%, 41%); border-color: hsl(126, 64%, 41%); } .ck-content .todo-list .todo-list__label > input[checked]::after { border-color: hsl(0, 0%, 100%); } .ck-content .todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; } .ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] { position: absolute; } /* * To-do list editing view styles. */ /* * To-do list should be interactive only during the editing * (https://github.com/ckeditor/ckeditor5/issues/2090). */ .ck-editor__editable.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input { cursor: pointer; } .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before { box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1); } /* * Document Lists - editing view has an additional span around checkbox. */ .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-content-todo-list-checkmark-size); height: var(--ck-content-todo-list-checkmark-size); vertical-align: middle; /* Needed on iOS */ border: 0; /* LTR styles */ left: -25px; margin-right: -15px; right: 0; margin-left: 0; /* RTL styles */ } .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; } @media (prefers-reduced-motion: reduce) { .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before { transition: none; } } .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: ''; /* Calculate tick position, size and border-width proportional to the checkmark size. */ left: calc( var(--ck-content-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-content-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-content-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-content-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-content-todo-list-checkmark-size) / 8 ) calc( var(--ck-content-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; } /*# sourceMappingURL=index.css.map */