create-yss-spec 3.5.3 → 3.5.5

package/template/.codex/skills/yss-prototype-stage/assets/vue-business-patterns/workspace.css

@@ -0,0 +1,101 @@
+.prototype-workspace-root {height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
+.enterprise-shell {--workspace-sidebar-width:var(--yss-components-workspace-sidebar-width);display:grid;grid-template:var(--yss-components-workspace-header-height) minmax(0,1fr) / var(--workspace-sidebar-width) minmax(0,1fr);min-width:0;min-height:0;transition:grid-template-columns var(--brand-motion-duration-mid) var(--brand-motion-ease-out)}
+.enterprise-shell.sidebar-collapsed {--workspace-sidebar-width:var(--yss-components-workspace-sidebar-collapsed-width)}
+.enterprise-header {grid-column:1/-1;display:flex;align-items:center;gap:var(--brand-size);padding-inline:var(--brand-size);border-bottom:1px solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);min-width:0;z-index:20}
+.enterprise-brand {display:flex;align-items:center;gap:var(--brand-size-xs);white-space:nowrap;min-width:0}
+.enterprise-brand>svg {color:var(--yss-color-primary-control);width:var(--brand-size-lg);height:var(--brand-size-lg);flex:none}
+.enterprise-brand strong {overflow:hidden;text-overflow:ellipsis}
+.module-navigation {display:flex;align-items:center;gap:var(--brand-size-xs);min-width:0}
+.module-navigation [aria-current="true"] {color:var(--yss-color-primary-control);background:var(--yss-colors-primary-bg)}
+.workspace-environment {display:flex;align-items:center;gap:var(--brand-size-xxs);margin-left:auto;color:var(--brand-color-text-secondary);white-space:nowrap;font-size:var(--brand-font-size-sm)}
+.workspace-environment svg {width:var(--brand-size);height:var(--brand-size)}
+.enterprise-sidebar {display:flex;flex-direction:column;min-height:0;background:var(--brand-color-bg-container);border-right:1px solid var(--brand-color-border-secondary);padding:var(--brand-size-xs)}
+.enterprise-sidebar>nav {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
+.navigation-group+.navigation-group {margin-top:var(--brand-size-sm)}
+.enterprise-shell .group-toggle {width:100%;justify-content:space-between;color:var(--brand-color-text-secondary);margin-bottom:var(--brand-size-xxs)}
+.group-toggle[aria-expanded="false"]>svg {transform:rotate(-90deg)}
+.enterprise-shell .navigation-item,.workspace-mobile-navigation .navigation-item {width:100%;min-height:var(--yss-components-button-default-height);height:auto;justify-content:flex-start;gap:var(--brand-size-xs);padding-block:var(--brand-size-xxs);margin-bottom:var(--brand-size-xxs);white-space:normal;text-align:left;font-weight:var(--yss-typography-body-font-weight)}
+.navigation-item svg {flex:none}
+.navigation-item[aria-current="page"] {color:var(--yss-color-primary-control);background:var(--yss-colors-primary-bg)}
+.enterprise-shell.sidebar-collapsed .navigation-item {justify-content:center;position:relative;width:100%;height:calc(var(--yss-components-workspace-sidebar-collapsed-width) - var(--brand-size-xs) * 2);padding:0;border-radius:var(--brand-border-radius);white-space:nowrap}
+.enterprise-shell.sidebar-collapsed .navigation-item[aria-current="page"]::before {content:"";position:absolute;left:0;height:var(--brand-size);width:2px;background:var(--yss-color-primary-control);border-radius:var(--brand-border-radius-sm)}
+.enterprise-shell.sidebar-collapsed .sidebar-toggle {padding:0;justify-content:center}
+.enterprise-shell.sidebar-collapsed .navigation-group+.navigation-group {border-top:1px solid var(--brand-color-border-secondary);padding-top:var(--brand-size-xs);margin-top:var(--brand-size-xs)}
+.enterprise-sidebar .navigation-item:focus-visible {outline-offset:-2px}
+.enterprise-sidebar .navigation-item>span:not(.draft-indicator) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sidebar-toggle {margin-top:var(--brand-size-xs);flex-shrink:0}
+.draft-indicator {margin-left:auto;color:var(--yss-color-primary-control)}
+.enterprise-workarea {display:grid;gap:0;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0}
+.workspace-tagbar {display:flex;gap:var(--brand-size-xs);align-items:center;padding:var(--brand-size-xxs) var(--brand-size-xs);background:var(--yss-components-workspace-tabs-background-color);border-bottom:1px solid var(--brand-color-border-secondary);min-height:var(--yss-components-workspace-tabs-height);min-width:0}
+.workspace-page-tags {display:flex;align-items:center;gap:var(--brand-size-xs);flex:1;overflow-x:auto;min-width:0;scrollbar-width:thin;padding:var(--brand-size-xxs)}
+.workspace-page-tag[data-slot="badge"] {display:inline-flex;align-items:center;gap:0;flex:none;padding:0;border:1px solid var(--brand-color-border);border-radius:var(--brand-border-radius);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary);overflow:visible;font-size:var(--brand-font-size);transition:background-color var(--brand-motion-duration-fast) var(--brand-motion-ease-in-out),border-color var(--brand-motion-duration-fast) var(--brand-motion-ease-in-out)}
+.workspace-page-tag:hover {border-color:var(--brand-color-primary-border-hover)}
+.workspace-page-tag.current-page-tag {background:var(--yss-colors-primary-bg);color:var(--yss-color-primary-control);border-color:var(--brand-color-primary-border)}
+.workspace-page-tag .page-tag-label {white-space:nowrap;font-weight:var(--yss-typography-body-font-weight);color:inherit;background:transparent;padding-inline:var(--brand-size-xs);gap:var(--brand-size-xxs);border:0;border-radius:var(--brand-border-radius);box-shadow:none}
+.workspace-page-tag.current-page-tag .page-tag-label {font-weight:var(--brand-font-weight-strong)}
+.workspace-page-tag .page-tag-label:hover {background:var(--brand-color-fill-tertiary)}
+.workspace-page-tag .page-tag-close {min-width:var(--yss-components-button-small-height);width:var(--yss-components-button-small-height);padding:0;margin-right:var(--brand-size-xxs);color:inherit;background:transparent;border:0;border-radius:var(--brand-border-radius-sm)}
+.workspace-page-tag .page-tag-close:hover {background:var(--brand-color-fill-secondary)}
+.workspace-page-tag button:focus-visible {outline:2px solid var(--yss-color-primary-control);outline-offset:2px}
+.page-tag-draft {font-size:var(--brand-font-size-sm);color:inherit}
+.workspace-page-heading {display:flex;align-items:center;gap:var(--brand-size-sm);padding:var(--brand-size-sm) var(--yss-components-page-shell-padding);min-width:0}
+.workspace-page-heading h1 {margin:0;font-size:var(--yss-typography-heading-md-font-size);font-weight:var(--yss-typography-heading-md-font-weight);line-height:var(--yss-typography-heading-md-line-height)}
+.workspace-page-heading>.muted {font-size:var(--brand-font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+main.workspace-scroll {max-width:none;width:100%;margin:0;padding:0 var(--yss-components-page-shell-padding) var(--yss-components-page-shell-padding);overflow-y:auto;overflow-x:hidden;min-height:0;min-width:0;scroll-padding:var(--brand-size-sm)}
+.workspace-scroll:focus-visible {outline:2px solid var(--yss-color-primary-control);outline-offset:-2px}
+.workspace-scroll .surface {margin-bottom:var(--brand-size-sm)}
+.workspace-scroll .section-heading {margin-bottom:var(--brand-size-xs)}
+.workspace-scroll .section-heading h2,.workspace-scroll .toolbar h2 {font-size:var(--brand-font-size);line-height:var(--brand-line-height);margin:0}
+.workspace-scroll .query-filters {max-width:none;grid-template-columns:minmax(180px,2fr) minmax(160px,1fr) auto;gap:var(--brand-size-sm)}
+.workspace-scroll .form-layout {max-width:1080px;margin-inline:auto;gap:var(--brand-size);grid-template-columns:200px minmax(0,1fr)}
+.workspace-scroll .step-help {font-size:var(--brand-font-size-sm)}
+.workspace-scroll .workspace-footer {margin-top:var(--brand-size-sm)}
+.workspace-review {background:var(--brand-color-bg-container);border-top:1px solid var(--brand-color-border);padding:var(--brand-size-xxs) var(--brand-size-sm);max-height:30dvh;overflow-y:auto}
+.workspace-review .review-controls {border:0;border-radius:0;background:transparent;margin:0;padding:var(--brand-size-xxs)}
+.workspace-review summary {cursor:pointer;min-height:var(--yss-components-button-small-height);display:list-item}
+.workspace-review .review-options {margin-top:var(--brand-size-xs)}
+.workspace-mobile-navigation [data-slot="sheet-header"] {padding:var(--brand-size)}
+.workspace-mobile-navigation>nav {overflow-y:auto;padding:var(--brand-size);min-height:0}
+.workspace-mobile-navigation h2 {font-size:var(--brand-font-size);color:var(--brand-color-text-secondary)}
+.workspace-entry-error {max-width:none;margin:0;padding:var(--brand-size-lg)}
+.query-workspace {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--brand-size-sm)}
+.query-workspace.with-detail {grid-template-columns:minmax(0,1fr) var(--yss-components-workspace-detail-width)}
+.query-main {min-width:0}
+.inline-detail {position:sticky;top:0;max-height:calc(100dvh - var(--yss-components-workspace-header-height) - var(--yss-components-workspace-tabs-height) - var(--brand-size-xxl) * 3);overflow-y:auto;min-width:0}
+.detail-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-xs);border-bottom:1px solid var(--brand-color-border-secondary);padding-bottom:var(--brand-size-xs)}
+.detail-heading h2 {margin:0;font-size:var(--brand-font-size)}
+.inline-detail dl {display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--brand-size-sm);margin-bottom:0}
+.inline-detail dt {color:var(--brand-color-text-secondary)}
+.inline-detail dd {margin:0;overflow-wrap:anywhere}
+.workspace-scroll .metrics {margin-bottom:var(--brand-size-sm)}
+.workspace-scroll .metrics [data-slot="card-header"] {padding-bottom:var(--brand-size-xs)}
+.workspace-scroll .approval-toolbar {position:sticky;top:0;background:var(--brand-color-bg-container);padding-block:var(--brand-size-xs);z-index:2;border-bottom:1px solid var(--brand-color-border-secondary)}
+/* At real browser zoom, short viewports must leave row actions unobscured. */
+@media(max-height:600px) {.workspace-scroll .approval-toolbar {position:static}}
+@media(max-width:1199px) {.workspace-scroll .form-layout {grid-template-columns:180px minmax(0,1fr)}}
+@media(max-width:767px) {
+ .enterprise-shell {grid-template-columns:minmax(0,1fr)}
+ .enterprise-header {padding-inline:var(--brand-size-xs);gap:var(--brand-size-xs)}
+ .enterprise-brand {flex:1;gap:var(--brand-size-xxs)}
+ .workspace-environment {display:none}
+ .enterprise-workarea {grid-column:1}
+ .workspace-page-tag:not(.current-page-tag) {display:none}
+ .workspace-page-tags {overflow-x:auto}
+ .workspace-tagbar .page-tag-close {min-width:var(--yss-components-button-default-height);width:var(--yss-components-button-default-height)}
+ .workspace-page-heading {padding:var(--brand-size-sm);flex-wrap:wrap;gap:var(--brand-size-xxs) var(--brand-size-xs)}
+ .workspace-page-heading>.muted {display:none}
+ main.workspace-scroll {padding:0 var(--brand-size-sm) var(--brand-size-sm)}
+ .workspace-scroll .query-filters,.workspace-scroll .form-layout {grid-template-columns:minmax(0,1fr)}
+ .workspace-scroll .step-help {display:none}
+ .workspace-review {padding:var(--brand-size-xxs) var(--brand-size-xs)}
+ .workspace-review .review-options {flex-direction:row;align-items:center}
+ .workspace-review .review-options>span {flex-basis:100%}
+}
+
+.detail-current-row {background:var(--yss-colors-primary-bg)}
+.draft-resume {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--brand-size-xs)}
+
+.workspace-active-panel {display:flex;flex-direction:column;min-height:0;min-width:0;margin:0;overflow:hidden}
+.workspace-active-panel>main {flex:1}
+
+@media(prefers-reduced-motion:reduce) {.enterprise-shell,.workspace-page-tag {transition:none}}