@dodlhuat/basix 1.0.0

package/css/dropdown.scss

@@ -0,0 +1,137 @@
+@use "parameters" as *;
+@use "properties";
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+
+  &.active {
+    > .dropdown-menu {
+      opacity: 1;
+      display: block;
+      transform: translateY(0);
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    background: var(--background);
+    border-radius: 8px;
+    box-shadow: $shadow;
+    min-width: 220px;
+    padding: 8px 0;
+    list-style: none;
+    opacity: 0;
+    display: none;
+    transform: translateY(-10px);
+    transition:
+      opacity 0.2s,
+      transform 0.2s;
+    z-index: 100;
+
+    li {
+      position: relative;
+      list-style: none;
+
+      &.open {
+        > .dropdown-item {
+          background-color: var(--background);
+          color: var(--accent-color);
+
+          &.has-children::after {
+            transform: rotate(90deg);
+          }
+        }
+
+        > ul {
+          opacity: 1;
+          display: block;
+          transform: translateX(0);
+        }
+      }
+    }
+
+    ul {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      margin-left: 4px;
+      background-color: var(--background);
+      border-radius: 8px;
+      box-shadow: $shadow;
+      min-width: 220px;
+      padding: 8px 0;
+      list-style: none;
+      opacity: 0;
+      display: none;
+      transform: translateX(-10px);
+      transition:
+        opacity 0.2s,
+        transform 0.2s;
+    }
+  }
+
+  .dropdown-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 16px;
+    color: var(--primary-text);
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--background);
+      color: var(--accent-color);
+    }
+
+    &.has-children::after {
+      content: "›";
+      font-size: 16px;
+      font-weight: bold;
+      margin-left: 10px;
+      transition: transform 0.2s;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .dropdown-menu {
+      width: 100%;
+      min-width: 250px;
+
+      ul {
+        position: static;
+        box-shadow: none;
+        background-color: transparent;
+        transform: none;
+        margin-left: 0;
+        padding-left: 15px;
+        border-left: 2px solid var(--secondary-text);
+        border-radius: 0;
+        opacity: 0;
+        display: none;
+        transition: none;
+      }
+
+      li.open > ul {
+        display: block;
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .dropdown-item.has-children::after {
+      transform: rotate(90deg);
+    }
+
+    .dropdown-menu li.open > .dropdown-item.has-children::after {
+      transform: rotate(-90deg);
+    }
+  }
+}

package/css/editor.css

@@ -0,0 +1,413 @@
+/* ── Editor Component ───────────────────────────────────────────────── */
+
+.editor {
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(56, 65, 74, 0.08), 0 1px 2px rgba(56, 65, 74, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── Toolbar ───────────────────────────────────────────────────────── */
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid var(--divider);
+  background: var(--secondary-background);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.editor-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--divider);
+  margin: 0 0.35rem;
+  flex-shrink: 0;
+}
+
+.toolbar-end {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
+
+.editor-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--secondary-text);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  transition: background 0.12s ease, color 0.12s ease;
+  flex-shrink: 0;
+}
+.editor-toolbar button .icon {
+  font-size: 1.15rem;
+}
+.editor-toolbar button:hover {
+  background: var(--divider);
+  color: var(--primary-text);
+  filter: none;
+}
+.editor-toolbar button.active {
+  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
+  color: var(--accent-color);
+}
+
+.toolbar-btn-accent {
+  color: var(--accent-color) !important;
+}
+.toolbar-btn-accent:hover {
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
+}
+
+.toolbar-btn-danger:hover {
+  background: color-mix(in srgb, var(--error) 12%, transparent) !important;
+  color: var(--error) !important;
+}
+
+/* ── Editor Body ───────────────────────────────────────────────────── */
+
+.editor-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.editor-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.editable {
+  flex: 1;
+  padding: 1.25rem 1.5rem;
+  outline: none;
+  overflow-y: auto;
+  min-height: 360px;
+  max-height: 70vh;
+  color: var(--primary-text);
+  line-height: 1.7;
+  font-size: 1rem;
+  background: var(--background);
+}
+.editable:empty::before {
+  content: "Start typing...";
+  color: var(--disabled);
+  pointer-events: none;
+}
+.editable h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0.6rem 0 0.5rem;
+  line-height: 1.3;
+}
+.editable h2 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  margin: 0.5rem 0 0.4rem;
+  line-height: 1.3;
+}
+.editable p {
+  margin-bottom: 0.5rem;
+}
+.editable ul,
+.editable ol {
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.editable ul {
+  list-style: disc;
+}
+.editable ol {
+  list-style: decimal;
+}
+.editable li {
+  margin-bottom: 0.2rem;
+  line-height: 1.6;
+}
+.editable img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.35rem;
+  margin: 0.5rem 0;
+}
+.editable a {
+  color: var(--accent-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.editable blockquote {
+  border-left: 3px solid var(--accent-color);
+  padding-left: 1rem;
+  margin: 0.5rem 0;
+  color: var(--secondary-text);
+}
+
+/* ── Side Panel ────────────────────────────────────────────────────── */
+
+.editor-side {
+  width: 340px;
+  min-width: 260px;
+  border-left: 1px solid var(--divider);
+  display: flex;
+  flex-direction: column;
+  background: var(--secondary-background);
+}
+.editor-side.hidden {
+  display: none;
+}
+
+.side-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--divider);
+  padding: 0 0.5rem;
+}
+.side-tab {
+  padding: 0.5rem 0.85rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--secondary-text);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.side-tab:hover {
+  color: var(--primary-text);
+  filter: none;
+}
+.side-tab.active {
+  color: var(--accent-color);
+  border-bottom-color: var(--accent-color);
+}
+
+.side-panels {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.side-panel {
+  display: none;
+  flex-direction: column;
+  flex: 1;
+  padding: 0.75rem;
+  overflow: hidden;
+}
+.side-panel.active {
+  display: flex;
+}
+
+.side-panel textarea {
+  flex: 1;
+  min-height: 200px;
+  font-family: "Courier New", monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  resize: none;
+  border-color: var(--divider);
+  background: var(--background);
+  color: var(--primary-text);
+  border-radius: 0.3rem;
+  padding: 0.75rem;
+  tab-size: 2;
+}
+
+.code-actions {
+  display: flex;
+  gap: 0.35rem;
+  margin-top: 0.5rem;
+}
+.code-actions button {
+  flex: 1;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  background: var(--divider);
+  color: var(--primary-text);
+  border: none;
+  cursor: pointer;
+  transition: filter 0.12s ease;
+}
+.code-actions button:hover {
+  filter: brightness(110%);
+}
+
+.preview-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: 0.3rem;
+  line-height: 1.6;
+  font-size: 0.9rem;
+  color: var(--primary-text);
+}
+.preview-content h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+}
+.preview-content h2 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+}
+.preview-content p {
+  margin-bottom: 0.4rem;
+}
+.preview-content ul,
+.preview-content ol {
+  margin-left: 1.25rem;
+  margin-bottom: 0.4rem;
+}
+.preview-content ul {
+  list-style: disc;
+}
+.preview-content ol {
+  list-style: decimal;
+}
+.preview-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── Footer ────────────────────────────────────────────────────────── */
+
+.editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.75rem;
+  border-top: 1px solid var(--divider);
+  background: var(--secondary-background);
+  font-size: 0.75rem;
+  color: var(--secondary-text);
+  gap: 1rem;
+}
+
+.editor-wordcount {
+  white-space: nowrap;
+}
+
+.editor-shortcuts {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.editor-shortcuts kbd {
+  display: inline-block;
+  padding: 0.1rem 0.35rem;
+  font-family: inherit;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--secondary-text);
+  background: var(--divider);
+  border-radius: 0.2rem;
+  margin-right: 0.15rem;
+}
+
+/* ── Icon overrides (Material Symbols not in style.css) ──────────── */
+
+.icon-strikethrough::before {
+  content: "\e257";
+}
+.icon-format_paragraph::before {
+  content: "\e264";
+}
+.icon-link::before {
+  content: "\e157";
+}
+.icon-format_clear::before {
+  content: "\e239";
+}
+.icon-undo::before {
+  content: "\e166";
+}
+.icon-redo::before {
+  content: "\e15a";
+}
+.icon-code::before {
+  content: "\e86f";
+}
+
+/* ── Responsive ────────────────────────────────────────────────────── */
+
+@media screen and (max-width: 768px) {
+  .editor-body {
+    flex-direction: column;
+  }
+  .editor-side {
+    width: 100%;
+    min-width: 0;
+    border-left: none;
+    border-top: 1px solid var(--divider);
+    max-height: 50vh;
+  }
+  .editable {
+    min-height: 220px;
+    max-height: 50vh;
+    padding: 1rem;
+  }
+  .editor-toolbar {
+    gap: 1px;
+    padding: 0.25rem;
+  }
+  .editor-toolbar button {
+    width: 1.85rem;
+    height: 1.85rem;
+  }
+  .toolbar-separator {
+    margin: 0 0.2rem;
+  }
+  .editor-shortcuts {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .toolbar-end {
+    padding-left: 0.25rem;
+  }
+  .editor-toolbar button {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .editor-toolbar button .icon {
+    font-size: 1.05rem;
+  }
+}