8
0

list.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. :root {
  2. --ck-todo-list-checkmark-size: 16px;
  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. }
  9. .ck .todo-list > li {
  10. margin-bottom: 5px;
  11. }
  12. .ck .todo-list > li > .todo-list {
  13. margin-top: 5px;
  14. }
  15. /*
  16. * Let's hide native checkbox and make a fancy one.
  17. *
  18. * Note: Checkbox element cannot be hidden using `display: block` or `visibility: hidden`.
  19. * It has to be clickable to not steal the focus after clicking on it.
  20. */
  21. .ck .todo-list__checkmark input[type='checkbox'] {
  22. display: block;
  23. width: 100%;
  24. height: 100%;
  25. opacity: 0;
  26. margin: 0;
  27. }
  28. .ck .todo-list__checkmark {
  29. cursor: pointer;
  30. width: var(--ck-todo-list-checkmark-size);
  31. height: var(--ck-todo-list-checkmark-size);
  32. position: relative;
  33. display: inline-block;
  34. left: -23px;
  35. margin-right: -16px;
  36. top: 2px;
  37. }
  38. .ck .todo-list__checkmark::before {
  39. content: '';
  40. position: absolute;
  41. display: block;
  42. width: 100%;
  43. height: 100%;
  44. border: 1px solid var(--ck-color-base-text);
  45. border-radius: var(--ck-border-radius);
  46. transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
  47. box-sizing: border-box;
  48. }
  49. .ck .todo-list__checkmark::after {
  50. box-sizing: content-box;
  51. pointer-events: none;
  52. content: '';
  53. position: absolute;
  54. left: 5px;
  55. top: 3px;
  56. display: block;
  57. width: 3px;
  58. height: 6px;
  59. border: solid #fff;
  60. border-width: 0 2px 2px 0;
  61. transform: rotate(45deg);
  62. }
  63. .ck .todo-list__checkmark:hover::before {
  64. box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1)
  65. }
  66. .ck .todo-list__checkmark_checked::before {
  67. background: var(--ck-color-todo-list-checkmark-background);
  68. border-color: var(--ck-color-todo-list-checkmark-border);
  69. }