UNPKG

@ckeditor/ckeditor5-list

Version:

Ordered and unordered lists feature to CKEditor 5.

167 lines (140 loc) • 5.09 kB
/** * @license Copyright (c) 2003-2026, 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; } :root{ --ck-list-style-button-size:44px; } .ck.ck-list-styles-list{ row-gap:var(--ck-spacing-medium); column-gap:var(--ck-spacing-medium); padding:var(--ck-spacing-large); grid-template-columns:repeat(3, auto); } .ck.ck-list-styles-list .ck-button{ width:var(--ck-list-style-button-size); height:var(--ck-list-style-button-size); box-sizing:content-box; margin:0; padding:0; } .ck.ck-list-styles-list .ck-button .ck-icon{ width:var(--ck-list-style-button-size); height:var(--ck-list-style-button-size); } .ck.ck-list-styles-list{ display:grid; } .ck.ck-list-properties.ck-list-properties_without-styles{ padding:var(--ck-spacing-large); } .ck.ck-list-properties.ck-list-properties_without-styles > *{ min-width:14em; } .ck.ck-list-properties.ck-list-properties_without-styles > * + *{ margin-top:var(--ck-spacing-standard); } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-list-styles-list{ grid-template-columns:repeat(4, auto); } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible{ border-top:1px solid var(--ck-color-base-border); } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > *{ width:100%; } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * + *{ margin-top:var(--ck-spacing-standard); } .ck.ck-list-properties .ck.ck-numbered-list-properties__start-index .ck-input{ width:100%; min-width:auto; } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order{ margin-bottom:calc(-1 * var(--ck-spacing-tiny)); background:none; padding-left:0; padding-right:0; } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:active, .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:hover{ box-shadow:none; background:none; border-color:#0000; } :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); } :root{ --ck-content-todo-list-checkmark-size:16px; } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input{ -webkit-appearance:none; width:var(--ck-content-todo-list-checkmark-size); height:var(--ck-content-todo-list-checkmark-size); vertical-align:middle; border:0; margin-left:0; margin-right:-15px; display:inline-block; position:relative; left:-25px; right:0; } [dir="rtl"]:is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input){ margin-left:-15px; margin-right:0; left:0; right:-25px; } :is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):before{ box-sizing:border-box; content:""; border:1px solid #333; border-radius:2px; width:100%; height:100%; transition:box-shadow .25s ease-in-out; display:block; position:absolute; } @media (prefers-reduced-motion: reduce){ :is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):before{ transition:none; } } :is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):after{ box-sizing:content-box; pointer-events:none; content:""; 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:#0000; border-width:0 calc(var(--ck-content-todo-list-checkmark-size) / 8) calc(var(--ck-content-todo-list-checkmark-size) / 8) 0; display:block; position:absolute; transform:rotate(45deg); } :is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:before{ background:#26ab33; border-color:#26ab33; } :is( .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:after{ border-color:#fff; } .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; } :is(.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):hover:before{ box-shadow:0 0 0 5px #0000001a; } .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type="checkbox"]{ position:absolute; }