CheckboxItem.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. @import "../css/variables.module";
  2. .excalidraw {
  3. .Checkbox {
  4. margin: 4px 0.3em;
  5. display: flex;
  6. align-items: center;
  7. cursor: pointer;
  8. user-select: none;
  9. -webkit-tap-highlight-color: transparent;
  10. &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
  11. box-shadow: 0 0 0 2px #{$oc-blue-4};
  12. }
  13. &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
  14. svg {
  15. display: block;
  16. opacity: 0.3;
  17. }
  18. }
  19. &:active {
  20. .Checkbox-box {
  21. box-shadow: 0 0 2px 1px inset #{$oc-blue-7} !important;
  22. }
  23. }
  24. &:hover {
  25. .Checkbox-box {
  26. background-color: fade-out($oc-blue-1, 0.8);
  27. }
  28. }
  29. &.is-checked {
  30. .Checkbox-box {
  31. background-color: #{$oc-blue-1};
  32. svg {
  33. display: block;
  34. }
  35. }
  36. &:hover .Checkbox-box {
  37. background-color: #{$oc-blue-2};
  38. }
  39. }
  40. .Checkbox-box {
  41. width: 22px;
  42. height: 22px;
  43. padding: 0;
  44. flex: 0 0 auto;
  45. margin: 0 1em;
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. box-shadow: 0 0 0 2px #{$oc-blue-7};
  50. background-color: transparent;
  51. border-radius: 4px;
  52. color: #{$oc-blue-7};
  53. &:focus {
  54. box-shadow: 0 0 0 3px #{$oc-blue-7};
  55. }
  56. svg {
  57. display: none;
  58. width: 16px;
  59. height: 16px;
  60. stroke-width: 3px;
  61. }
  62. }
  63. .Checkbox-label {
  64. display: flex;
  65. align-items: center;
  66. }
  67. .excalidraw-tooltip-icon {
  68. width: 1em;
  69. height: 1em;
  70. }
  71. }
  72. }