list.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. :root {
  2. --ck-todo-list-checkmark-size: 14px;
  3. --ck-color-todo-list-checkmark-background: hsl(120, 100%, 42%);
  4. --ck-color-todo-list-checkmark-border: hsl( 120, 100%, 27%);
  5. }
  6. .ck .todo-list {
  7. list-style: none;
  8. position: relative;
  9. }
  10. .ck .todo-list > li {
  11. margin-bottom: 5px;
  12. }
  13. .ck .todo-list > li > .todo-list {
  14. margin-top: 5px;
  15. }
  16. /* Let's hide native checkbox and make a fancy one. */
  17. .ck .todo-list__checkmark input[type='checkbox'] {
  18. display: block;
  19. width: 100%;
  20. height: 100%;
  21. opacity: 0;
  22. }
  23. .ck .todo-list__checkmark {
  24. cursor: pointer;
  25. width: var(--ck-todo-list-checkmark-size);
  26. height: var(--ck-todo-list-checkmark-size);
  27. position: relative;
  28. display: inline-block;
  29. left: -20px;
  30. margin-right: -10px;
  31. }
  32. .ck .todo-list__checkmark::before {
  33. content: '';
  34. position: absolute;
  35. display: block;
  36. width: 100%;
  37. height: 100%;
  38. border: 1px solid var(--ck-color-base-text);
  39. border-radius: var(--ck-border-radius);
  40. transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
  41. }
  42. .ck .todo-list__checkmark::after {
  43. pointer-events: none;
  44. content: '';
  45. position: absolute;
  46. left: 5px;
  47. top: 3px;
  48. display: block;
  49. width: 3px;
  50. height: 6px;
  51. border: solid #fff;
  52. border-width: 0 2px 2px 0;
  53. transform: rotate(45deg);
  54. }
  55. .ck .todo-list__checkmark:hover::before {
  56. box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1)
  57. }
  58. .ck .todo-list__checkmark_checked::before {
  59. background: var(--ck-color-todo-list-checkmark-background);
  60. border-color: var(--ck-color-todo-list-checkmark-border);
  61. }