@ckeditor/ckeditor5-list
Version:
Ordered and unordered lists feature to CKEditor 5.
116 lines (107 loc) • 2.79 kB
CSS
/**
* @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
*/
.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-todo-list-checkmark-size:16px;
}
.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-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-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:'';
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-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;
}