Build Module Studio application composition
This commit is contained in:
DCCONSTRUCTIONS
@@ -231,6 +231,327 @@ textarea {
|
||||
padding: 0.75rem 1rem 1.75rem;
|
||||
}
|
||||
|
||||
.catalog-page-template {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-map-template-preview {
|
||||
position: relative;
|
||||
min-height: 26rem;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
background:
|
||||
radial-gradient(circle at 68% 34%, color-mix(in srgb, var(--catalog-accent) 34%, transparent) 0 0.45rem, transparent 0.5rem),
|
||||
linear-gradient(145deg, color-mix(in srgb, var(--nodedc-nested-surface) 90%, #274438), var(--nodedc-nested-surface));
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.22;
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--nodedc-text-muted) 30%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--nodedc-text-muted) 30%, transparent) 1px, transparent 1px);
|
||||
background-size: 2.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__route {
|
||||
position: absolute;
|
||||
inset: 28% 24% 22% 18%;
|
||||
border: 3px solid var(--catalog-accent);
|
||||
border-block-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: rotate(-17deg);
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__point {
|
||||
position: absolute;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border: 3px solid var(--nodedc-text-on-accent);
|
||||
border-radius: 50%;
|
||||
background: var(--catalog-accent);
|
||||
box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--catalog-accent) 22%, transparent);
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__point--one { top: 34%; left: 42%; }
|
||||
.catalog-map-template-preview__point--two { right: 31%; bottom: 28%; }
|
||||
|
||||
.catalog-map-template-preview__actions {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__actions span {
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__inspector {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
display: grid;
|
||||
width: min(18rem, 38%);
|
||||
align-content: start;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--nodedc-glass-border);
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
background: var(--nodedc-glass-panel-surface);
|
||||
box-shadow: var(--nodedc-glass-shadow);
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(var(--nodedc-glass-blur));
|
||||
}
|
||||
|
||||
.catalog-map-template-preview__inspector span {
|
||||
border-radius: var(--nodedc-radius-control);
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
padding: 0.85rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.catalog-page-template__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.catalog-page-template__actions > span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.catalog-page-template__list {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.catalog-page-template__list > div {
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border-radius: var(--nodedc-radius-control);
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
padding: 0.55rem 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-page-template__list > div > svg {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.catalog-page-template__list span {
|
||||
display: grid;
|
||||
gap: 0.14rem;
|
||||
}
|
||||
|
||||
.catalog-page-template__list small,
|
||||
.catalog-page-template__list code {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.catalog-module-switcher,
|
||||
.catalog-module-switcher .nodedc-select-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.catalog-module-switcher .nodedc-select-trigger {
|
||||
min-height: 3.55rem;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-panel-item-active-bg);
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.catalog-module-mode {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.catalog-module-preview {
|
||||
display: grid;
|
||||
min-height: 38rem;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
background: var(--nodedc-nested-surface);
|
||||
}
|
||||
|
||||
.catalog-module-preview__navigation {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
}
|
||||
|
||||
.catalog-module-preview__navigation span {
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
padding: 0.7rem 1rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
font-weight: var(--nodedc-font-weight-strong);
|
||||
}
|
||||
|
||||
.catalog-module-preview__stage {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
gap: 0.6rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.catalog-module-preview__stage > svg { width: 2rem; height: 2rem; }
|
||||
.catalog-module-preview__stage strong { color: var(--nodedc-text-primary); font-size: 1.35rem; }
|
||||
|
||||
.catalog-page-composer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-page-composer__column {
|
||||
display: grid;
|
||||
min-height: 21rem;
|
||||
grid-template-rows: auto 1fr;
|
||||
align-content: start;
|
||||
gap: 0.5rem;
|
||||
border-radius: var(--nodedc-radius-control);
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.catalog-page-composer__column.is-drag-over { background: var(--nodedc-panel-item-hover-bg); }
|
||||
|
||||
.catalog-page-composer__column > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
padding: 0.55rem 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-page-composer__column > header > span {
|
||||
display: grid;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.catalog-page-composer__column > header > div,
|
||||
.catalog-page-composer__row > span,
|
||||
.catalog-save-profile-current span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
|
||||
.catalog-page-composer__column small,
|
||||
.catalog-page-composer__list small,
|
||||
.catalog-save-profile-current small {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.catalog-page-composer__list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.22rem;
|
||||
}
|
||||
|
||||
.catalog-page-composer__draggable { min-width: 0; }
|
||||
|
||||
.catalog-page-composer__row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 3.55rem;
|
||||
align-items: center;
|
||||
gap: 0.86rem;
|
||||
border: 0;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
color: var(--nodedc-text-primary);
|
||||
padding: 5px 0.72rem 5px 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.catalog-page-composer__row > span:nth-child(2) { flex: 1 1 auto; }
|
||||
|
||||
.catalog-page-composer__icon {
|
||||
display: grid !important;
|
||||
width: 2.92rem;
|
||||
height: 2.92rem;
|
||||
flex: 0 0 2.92rem;
|
||||
place-items: center;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-panel-icon-bg);
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.catalog-page-composer__draggable.is-dragging { position: relative; z-index: 8; }
|
||||
|
||||
.catalog-page-composer__row .nodedc-icon-button {
|
||||
width: var(--nodedc-icon-button-size);
|
||||
height: var(--nodedc-icon-button-size);
|
||||
flex-basis: var(--nodedc-icon-button-size);
|
||||
}
|
||||
|
||||
.catalog-page-composer__empty {
|
||||
display: grid;
|
||||
min-height: 9rem;
|
||||
place-items: center;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.catalog-page-composer__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.catalog-page-composer__footer > span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.catalog-page-composer__footer > span[data-state="saved"] { color: var(--nodedc-status-success); }
|
||||
|
||||
.catalog-save-profile-current {
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border-radius: var(--nodedc-radius-control);
|
||||
background: var(--nodedc-panel-item-bg);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-map-template-preview--application { min-height: 42rem; }
|
||||
|
||||
.catalog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -316,6 +637,62 @@ textarea {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-application-draft {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-application-draft__fields {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
|
||||
}
|
||||
|
||||
.catalog-application-draft__fields .nodedc-field-frame:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.catalog-application-draft__readonly,
|
||||
.catalog-application-draft__status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.catalog-application-draft__readonly > span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
|
||||
.catalog-application-draft__readonly small,
|
||||
.catalog-application-draft__status code {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.catalog-application-draft__features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-application-draft__status {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.catalog-application-draft__status > span {
|
||||
font-weight: var(--nodedc-font-weight-strong);
|
||||
}
|
||||
|
||||
.catalog-application-draft__status > span[data-state="saved"] {
|
||||
color: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.catalog-application-draft__status > span[data-state="error"] {
|
||||
color: rgb(var(--nodedc-danger-rgb));
|
||||
}
|
||||
|
||||
.catalog-modal-action-list,
|
||||
.catalog-detail-modal {
|
||||
display: grid;
|
||||
@@ -549,6 +926,7 @@ textarea {
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.catalog-page-composer { grid-template-columns: 1fr; }
|
||||
.catalog-icon-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@@ -610,6 +988,15 @@ textarea {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog-application-draft__fields,
|
||||
.catalog-application-draft__features {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog-application-draft__fields .nodedc-field-frame:last-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.catalog-window-actions-demo .nodedc-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user