| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- :root {
- --ck-todo-list-checkmark-size: 14px;
- --ck-color-todo-list-checkmark-background: hsl(120, 100%, 42%);
- --ck-color-todo-list-checkmark-border: hsl( 120, 100%, 27%);
- }
- .ck .todo-list {
- list-style: none;
- position: relative;
- }
- .ck .todo-list > li {
- margin-bottom: 5px;
- }
- .ck .todo-list > li > .todo-list {
- margin-top: 5px;
- }
- /* Let's hide native checkbox and make a fancy one. */
- .ck .todo-list__checkmark input[type='checkbox'] {
- display: block;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- .ck .todo-list__checkmark {
- cursor: pointer;
- width: var(--ck-todo-list-checkmark-size);
- height: var(--ck-todo-list-checkmark-size);
- position: relative;
- display: inline-block;
- left: -20px;
- margin-right: -10px;
- }
- .ck .todo-list__checkmark::before {
- content: '';
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- border: 1px solid var(--ck-color-base-text);
- border-radius: var(--ck-border-radius);
- transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
- }
- .ck .todo-list__checkmark::after {
- pointer-events: none;
- content: '';
- position: absolute;
- left: 5px;
- top: 3px;
- display: block;
- width: 3px;
- height: 6px;
- border: solid #fff;
- border-width: 0 2px 2px 0;
- transform: rotate(45deg);
- }
- .ck .todo-list__checkmark:hover::before {
- box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1)
- }
- .ck .todo-list__checkmark_checked::before {
- background: var(--ck-color-todo-list-checkmark-background);
- border-color: var(--ck-color-todo-list-checkmark-border);
- }
|