@lapis-notes/lapis-plugin-docs 0.0.0-stage → 0.2.0

package/dist/docs/sidebar/DocsSidebar.css

@@ -0,0 +1,346 @@
+.docs-sidebar {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  background: var(--sidebar, var(--muted, #f6f6f6));
+  color: var(--sidebar-foreground, var(--foreground, #111));
+  font-size: 0.82rem;
+}
+
+.docs-sidebar__header,
+.docs-sidebar__toolbar,
+.docs-sidebar__filters {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.docs-sidebar__header,
+.docs-sidebar__toolbar,
+.docs-sidebar__filters {
+  padding: 0.45rem 0.6rem 0;
+}
+
+.docs-sidebar__header {
+  justify-content: space-between;
+}
+
+.docs-sidebar__title {
+  margin: 0;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-foreground, #636363);
+}
+
+.docs-sidebar__actions {
+  display: flex;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+.docs-sidebar__views,
+.docs-sidebar__segment {
+  display: flex;
+  align-self: stretch;
+  gap: 0.25rem;
+  border: 1px solid var(--sidebar-border, var(--border, #e4e4e7));
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--sidebar-accent, var(--muted, #f4f4f5)) 40%, transparent);
+  padding: 0.25rem;
+}
+
+.docs-sidebar__views {
+  margin: 0.4rem 0.6rem 0;
+}
+
+.docs-sidebar__views > button.docs-sidebar__view[data-ui-component="button"],
+.docs-sidebar__segment > button.docs-sidebar__view[data-ui-component="button"] {
+  display: inline-flex;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 1.75rem;
+  min-height: 1.75rem;
+  overflow: hidden;
+  padding-inline: 0.35rem;
+  font-size: 0.75rem;
+}
+
+.docs-sidebar__views > button.docs-sidebar__view[data-ui-component="button"]:hover,
+.docs-sidebar__segment > button.docs-sidebar__view[data-ui-component="button"]:hover,
+.docs-sidebar__views > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"],
+.docs-sidebar__segment > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"],
+.docs-sidebar__views > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"]:hover,
+.docs-sidebar__segment > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"]:hover {
+  background-color: var(--background, #fff);
+}
+
+.docs-sidebar__views > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"],
+.docs-sidebar__segment > button.docs-sidebar__view[data-ui-component="button"][aria-pressed="true"] {
+  border-color: var(--sidebar-border, var(--border, #e4e4e7));
+  color: var(--sidebar-accent-foreground, var(--foreground, #111));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
+}
+
+.docs-sidebar__view-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"] {
+  min-width: 0;
+  flex: 1 1 0;
+  height: 1.75rem;
+  min-height: 1.75rem;
+  justify-content: flex-start;
+  gap: 0.35rem;
+  overflow: hidden;
+  padding-inline: 0.4rem;
+  font-size: 0.75rem;
+}
+
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 auto;
+}
+
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"]:hover,
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-pressed="true"],
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-pressed="true"]:hover,
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-current="page"],
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-current="page"]:hover {
+  border-color: var(--sidebar-border, var(--border, #e4e4e7));
+  background-color: var(--background, #fff);
+  color: var(--sidebar-accent-foreground, var(--foreground, #111));
+}
+
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-pressed="true"],
+.docs-sidebar__filters > button.docs-sidebar__filter[data-ui-component="button"][aria-current="page"] {
+  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
+}
+
+.docs-sidebar__icon-button {
+  display: inline-flex;
+  min-height: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  border: 0;
+  border-radius: 0.35rem;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0 0.4rem;
+}
+
+.docs-sidebar__icon-button:hover,
+.docs-sidebar__row:hover,
+.docs-sidebar__panel:hover {
+  background: color-mix(in srgb, var(--foreground, #111) 6%, transparent);
+}
+
+.docs-sidebar__search {
+  min-width: 0;
+  flex: 1;
+  width: auto;
+  border: 1px solid var(--border, #e4e4e7);
+  border-radius: 0.4rem;
+  background: var(--background, #fff);
+  color: inherit;
+  font: inherit;
+  font-size: 0.78rem;
+  padding: 0.28rem 0.45rem;
+}
+
+.docs-sidebar__sort {
+  flex: 0 0 auto;
+  height: 1.8rem;
+  min-height: 1.8rem;
+  gap: 0.25rem;
+  padding-inline: 0.5rem;
+  font-size: 0.78rem;
+}
+
+.docs-sidebar__sort :global(svg) {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.docs-sidebar__scroll {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.docs-sidebar__scroll-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.35rem 0.35rem 0.8rem;
+}
+
+.docs-tags {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.docs-tags__tools {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.docs-tags__tools .docs-sidebar__search {
+  flex: 1;
+}
+
+button.docs-tags__mode[data-ui-component="button"] {
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: 0 0 auto;
+  border-color: var(--sidebar-border, var(--border, #e4e4e7));
+  background: var(--background, #fff);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
+}
+
+button.docs-tags__mode[data-ui-component="button"] svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.docs-tags__row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.docs-tags__spacer {
+  width: 1rem;
+  flex: 0 0 auto;
+}
+
+.docs-sidebar__selected-tags {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--sidebar-border, var(--border, #e4e4e7));
+  border-radius: 0.4rem;
+  background: color-mix(in srgb, var(--background, #fff) 55%, transparent);
+  padding: 0.3rem 0.35rem;
+}
+
+.docs-sidebar__tag-list {
+  min-width: 0;
+  flex: 1;
+}
+
+button.docs-sidebar__clear-tags[data-ui-component="button"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: 0 0 auto;
+}
+
+.docs-sidebar__status,
+.docs-sidebar__empty {
+  margin: 0.4rem 0.4rem 0;
+  color: var(--muted-foreground, #636363);
+  font-size: 0.75rem;
+}
+
+.docs-sidebar__status--error {
+  color: var(--destructive, #dc2626);
+}
+
+.docs-sidebar__group,
+.docs-sidebar__children {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.docs-sidebar__row,
+.docs-sidebar__panel {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.3rem;
+  border: 0;
+  border-radius: 0.35rem;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+  padding: 0.22rem 0.35rem;
+}
+
+.docs-sidebar__row[aria-current="true"],
+.docs-sidebar__row[aria-pressed="true"],
+.docs-sidebar__panel[aria-current="true"] {
+  background: var(--background, #fff);
+  box-shadow: inset 0 0 0 1px var(--border, #e4e4e7);
+}
+
+.docs-sidebar__hash {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 auto;
+  color: var(--muted-foreground, #636363);
+}
+
+.docs-sidebar__label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-sidebar__count {
+  flex: 0 0 auto;
+  color: var(--muted-foreground, #636363);
+  font-size: 0.68rem;
+  font-weight: 650;
+}
+
+.docs-sidebar__chevron {
+  display: inline-grid;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--muted-foreground, #636363);
+  padding: 0;
+}
+
+.docs-sidebar__chevron svg,
+.docs-sidebar__icon-button svg {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.docs-sidebar__chevron[data-open="true"] svg {
+  rotate: 90deg;
+}
+
+.docs-sidebar__file {
+  display: none;
+}