1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | :root {
|
7 | --ck-todo-list-checkmark-size: 16px;
|
8 | }
|
9 |
|
10 | .ck-content .todo-list {
|
11 | list-style: none;
|
12 |
|
13 | & li {
|
14 | margin-bottom: 5px;
|
15 |
|
16 | & .todo-list {
|
17 | margin-top: 5px;
|
18 | }
|
19 | }
|
20 |
|
21 | & .todo-list__label {
|
22 | & > input {
|
23 | -webkit-appearance: none;
|
24 | display: inline-block;
|
25 | position: relative;
|
26 | width: var(--ck-todo-list-checkmark-size);
|
27 | height: var(--ck-todo-list-checkmark-size);
|
28 | vertical-align: middle;
|
29 |
|
30 |
|
31 | border: 0;
|
32 |
|
33 |
|
34 | left: -25px;
|
35 | margin-right: -15px;
|
36 | right: 0;
|
37 | margin-left: 0;
|
38 |
|
39 | &::before {
|
40 | display: block;
|
41 | position: absolute;
|
42 | box-sizing: border-box;
|
43 | content: '';
|
44 | width: 100%;
|
45 | height: 100%;
|
46 | border: 1px solid hsl(0, 0%, 20%);
|
47 | border-radius: 2px;
|
48 | transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
|
49 | }
|
50 |
|
51 | &::after {
|
52 | display: block;
|
53 | position: absolute;
|
54 | box-sizing: content-box;
|
55 | pointer-events: none;
|
56 | content: '';
|
57 |
|
58 |
|
59 | left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
60 | top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
61 | width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
62 | height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
63 | border-style: solid;
|
64 | border-color: transparent;
|
65 | border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
66 | transform: rotate(45deg);
|
67 | }
|
68 |
|
69 | &[checked] {
|
70 | &::before {
|
71 | background: hsl(126, 64%, 41%);
|
72 | border-color: hsl(126, 64%, 41%);
|
73 | }
|
74 |
|
75 | &::after {
|
76 | border-color: hsl(0, 0%, 100%);
|
77 | }
|
78 | }
|
79 | }
|
80 |
|
81 | & .todo-list__label__description {
|
82 | vertical-align: middle;
|
83 | }
|
84 | }
|
85 | }
|
86 |
|
87 |
|
88 | [dir="rtl"] .todo-list .todo-list__label > input {
|
89 | left: 0;
|
90 | margin-right: 0;
|
91 | right: -25px;
|
92 | margin-left: -15px;
|
93 | }
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | .ck-editor__editable .todo-list .todo-list__label > input {
|
100 | cursor: pointer;
|
101 |
|
102 | &:hover::before {
|
103 | box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
|
104 | }
|
105 | }
|