share page todos

1 files changed, 71 insertions, 0 deletions

diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css
index ef4507340..895a38a95 100644
--- a/packages/web/src/components/share.module.css
+++ b/packages/web/src/components/share.module.css
@@ -535,3 +535,74 @@
     font-size: 0.75rem;
   }
 }
+
+.todos {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--sl-color-divider);
+  border-radius: 0.25rem;
+
+  li {
+    margin: 0;
+    position: relative;
+    padding-left: 1.5rem;
+    font-size: 0.75rem;
+    padding: 0.375rem 0.625rem 0.375rem 1.75rem;
+    border-bottom: 1px solid var(--sl-color-divider);
+    line-height: 1.5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    & > span {
+      position: absolute;
+      display: inline-block;
+      left: 0.5rem;
+      top: calc(0.5rem + 1px);
+      width: 0.75rem;
+      height: 0.75rem;
+      border: 1px solid var(--sl-color-divider);
+      border-radius: 0.15rem;
+
+      &::before {
+      }
+    }
+
+    &[data-status="pending"] {
+      color: var(--sl-color-text);
+    }
+    &[data-status="in_progress"] {
+      color: var(--sl-color-text);
+
+      & > span { border-color: var(--sl-color-orange); }
+      & > span::before {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: calc(0.75rem - 2px - 4px);
+        height: calc(0.75rem - 2px - 4px);
+        box-shadow: inset 1rem 1rem var(--sl-color-orange-low);
+      }
+    }
+    &[data-status="completed"] {
+      color: var(--sl-color-text-dimmed);
+
+      & > span { border-color: var(--sl-color-hairline); }
+      & > span::before {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: calc(0.75rem - 2px - 4px);
+        height: calc(0.75rem - 2px - 4px);
+        box-shadow: inset 1rem 1rem var(--sl-color-divider);
+
+        transform-origin: bottom left;
+        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      }
+    }
+  }
+}