@ckeditor/ckeditor5-list
Version:
Ordered and unordered lists feature to CKEditor 5.
271 lines (218 loc) • 7.49 kB
CSS
/**
* @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);
}
.ck-content li > p:first-of-type {
margin-top: 0;
}
.ck-content li > p:only-of-type {
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);
}
.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;
}
:root {
--ck-content-todo-list-checkmark-size: 16px;
}
.ck-content .todo-list .todo-list__label > input, .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-content .todo-list .todo-list__label > input, .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-content .todo-list .todo-list__label > input, .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-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):before {
transition: none;
}
}
:is(.ck-content .todo-list .todo-list__label > input, .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-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:before {
background: #26ab33;
border-color: #26ab33;
}
:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:after {
border-color: #fff;
}
.ck-content .todo-list {
list-style: none;
}
.ck-content .todo-list li {
margin-bottom: 5px;
position: relative;
}
.ck-content .todo-list li .todo-list {
margin-top: 5px;
}
.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;
}
.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;
}
/*# sourceMappingURL=index.css.map */