UNPKG

@ckeditor/ckeditor5-list

Version:

Ordered and unordered lists feature to CKEditor 5.

182 lines (149 loc) • 3.78 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 */ :root, :host { --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); --ck-content-todo-list-checkmark-size: 16px; } .ck-content li { & > p:first-of-type { margin-top: 0; } & > p:only-of-type { margin-top: 0; margin-bottom: 0; } &.ck-list-marker-bold::marker { font-weight: bold; } &.ck-list-marker-italic::marker { font-style: italic; } &.ck-list-marker-color::marker { color: var(--ck-content-list-marker-color); } &.ck-list-marker-font-family::marker { font-family: var(--ck-content-list-marker-font-family); } &.ck-list-marker-font-size::marker { font-size: var(--ck-content-list-marker-font-size); } &.ck-list-marker-font-size-tiny::marker { font-size: var(--ck-content-font-size-tiny); } &.ck-list-marker-font-size-small::marker { font-size: var(--ck-content-font-size-small); } &.ck-list-marker-font-size-big::marker { font-size: var(--ck-content-font-size-big); } &.ck-list-marker-font-size-huge::marker { font-size: var(--ck-content-font-size-huge); } } .ck-content ol { list-style-type: decimal; & ol { list-style-type: lower-latin; & ol { list-style-type: lower-roman; & ol { list-style-type: upper-latin; & ol { list-style-type: upper-roman; } } } } } .ck-content ul { list-style-type: disc; & ul { list-style-type: circle; & ul { list-style-type: square; & ul { list-style-type: square; } } } } .ck-content .todo-list .todo-list__label > 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"]& { margin-left: -15px; margin-right: 0; left: 0; right: -25px; } &: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) { transition: none; } } &: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); } &[checked] { &:before { background: #26ab33; border-color: #26ab33; } &:after { border-color: #fff; } } } .ck-content .todo-list { list-style: none; & li { margin-bottom: 5px; position: relative; & .todo-list { margin-top: 5px; } } & .todo-list__label { & .todo-list__label__description { vertical-align: middle; } &.todo-list__label_without-description input[type="checkbox"] { position: absolute; } } } /*# sourceMappingURL=index-content.css.map */