@kubex/zinc 1.1.68 → 1.1.70

package/src/components/theme-editor/theme-editor.scss

@@ -0,0 +1,309 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  // Matches page-builder's --palette-col.
+  --zn-theme-editor-controls-width: 343px;
+}
+
+.editor {
+  --controls-col: var(--zn-theme-editor-controls-width);
+
+  display: flex;
+  align-items: stretch;
+
+  &--controls-collapsed {
+    --controls-col: 0px;
+
+    .editor__controls {
+      border-right: none;
+    }
+
+    .editor__controls-header,
+    .editor__controls-body {
+      padding: 0;
+    }
+  }
+}
+
+// Clips the sidebar's left corners and the toolbar's top-right corner to the panel's own radius.
+:host([standalone]) .editor {
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+// Same box model as .editor__controls-header so the tab strip lines up with the preview's top edge.
+.editor__toolbar {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
+
+.editor__toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  margin-left: auto;
+}
+
+.editor__caption {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16px;
+  color: rgb(var(--zn-text));
+}
+
+.editor__controls {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 var(--controls-col);
+  min-width: 0;
+  max-width: 100%;
+  background: rgb(var(--zn-panel));
+  border-right: 1px solid rgb(var(--zn-border-color));
+  overflow: hidden;
+  transition: flex-basis 0.2s ease;
+}
+
+.editor__controls-header {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+}
+
+.editor__controls-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+  flex: 1 1 auto;
+}
+
+.editor__main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.editor__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+}
+
+// Supports an author hand-slotting a bare zn-collapsible into the default slot.
+::slotted(zn-collapsible) {
+  width: 100%;
+}
+
+// Nothing above the first section, so its divider would double the toolbar's.
+.editor__fields--sections-only .editor__section:first-of-type {
+  border-top: none;
+}
+
+.editor__section {
+  display: block;
+  border-top: 1px solid rgba(var(--zn-border-color), .5);
+
+  // The !important beats zn-collapsible's internal .header class specificity.
+  &::part(header) {
+    align-items: center !important;
+    padding-block: calc(var(--zn-base-px) * 2) !important;
+  }
+
+  &::part(caption) {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 16px;
+    color: rgb(var(--zn-text));
+  }
+}
+
+.editor__section-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+}
+
+// zn-tabs owns the tablist's presentation, keyboard behaviour and overflow.
+.editor__tabs {
+  display: block;
+}
+
+.editor__section-slot {
+  padding-top: var(--zn-spacing-sm);
+}
+
+.editor__tab-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.editor__footer {
+  display: flex;
+  gap: var(--zn-spacing-small);
+  padding-top: var(--zn-spacing-small);
+  border-top: 1px solid rgb(var(--zn-border-color));
+  margin-top: auto;
+}
+
+.editor__preview {
+  overflow: visible;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+// A pull tab flush against the controls/main seam, rather than a dot floating
+// over it, positioned against .editor__main (not .editor__preview) so it stays
+// centred on the full-height seam rather than just the preview's portion of it.
+// Collapsed there is no seam to attach to, so it becomes a small pill.
+.panel-toggle {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 6;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  color: rgb(var(--zn-color-muted-text));
+  background: rgb(var(--zn-panel));
+  cursor: pointer;
+  transition: left 0.2s ease, color 0.12s ease, border-color 0.12s ease;
+
+  &:hover {
+    color: rgb(var(--zn-text));
+    background: rgba(var(--zn-border-color), 0.4);
+  }
+
+  &--tucked {
+    left: var(--zn-spacing-small);
+    border-left: 1px solid rgb(var(--zn-border-color));
+    border-radius: 6px;
+  }
+}
+
+.editor__devices {
+  display: flex;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.editor__device,
+.editor__mode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgb(var(--zn-text));
+  cursor: pointer;
+}
+
+.editor__device + .editor__device {
+  border-left: 1px solid rgb(var(--zn-border-color));
+}
+
+.editor__device:hover,
+.editor__mode:hover {
+  background: rgba(var(--zn-border-color), 0.5);
+}
+
+.editor__device[aria-pressed="true"] {
+  background: rgb(var(--zn-primary));
+  color: white;
+}
+
+.editor__mode {
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: 4px;
+  // Sole occupant of .editor__controls-header's right side, beside the caption.
+  margin-left: auto;
+}
+
+.editor__sources {
+  width: auto;
+  max-width: 160px;
+
+  // Accessible name only - the label text stays out of the compact toolbar row.
+  &::part(form-control-label) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+}
+
+.editor__error {
+  padding: var(--zn-spacing-small);
+  margin-bottom: var(--zn-spacing-small);
+  border-radius: 4px;
+  background: rgba(var(--zn-color-error), 0.1);
+  border: 1px solid rgb(var(--zn-color-error));
+  color: rgb(var(--zn-color-error));
+  font-size: 0.8125rem;
+}
+
+// 768 must match STACKED_QUERY in theme-editor.component.ts.
+@media (max-width: 768px) {
+  .editor {
+    flex-direction: column;
+  }
+
+  .editor__controls {
+    flex-basis: auto;
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  .editor--controls-collapsed .editor__controls {
+    display: none;
+  }
+
+  .editor__main {
+    width: 100%;
+    // Gap between the stacked controls' bottom border and the toolbar below.
+    padding-top: var(--zn-spacing-medium);
+  }
+
+  // Stacked: the seam is horizontal, so the tab attaches to the top edge instead.
+  .panel-toggle {
+    top: 0;
+    left: 50%;
+    width: 44px;
+    height: 18px;
+    border: 1px solid rgb(var(--zn-border-color));
+    border-top: 0;
+    border-radius: 0 0 6px 6px;
+    transform: translateX(-50%);
+  }
+
+  .panel-toggle--tucked {
+    top: var(--zn-spacing-small);
+    left: 50%;
+    border-top: 1px solid rgb(var(--zn-border-color));
+    border-radius: 6px;
+  }
+}