publish.css

/* GROUP PUBLISH COMPONENT
=================================================== */
.publish-fields,
.field-grid {
    display: grid;
    --grid-columns: 12;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    @apply gap-x-3 gap-6 @lg/panel:gap-8;

    aside & {
        @apply gap-x-2 gap-y-6;
    }

    .form-group {
        /* Stacked, until the panel is wide enough for the configured widths to make sense. */
        grid-column: span var(--grid-columns);

        @variant @lg/panel {
            grid-column: span var(--col-span, var(--grid-columns));
        }
    }

    .spacer-fieldtype {
        /** It should be hidden so we dont see it, but we want it to take up space. */
        visibility: hidden;

        @variant @max-lg/panel {
            /* When stacked we don't want it to take up space. */
            display: none;
        }
    }
}

/* GROUP PUBLISH COMPONENT / FIELD GRID (e.g. BLUEPRINT)
=================================================== */
.field-grid {
    > * {
        grid-column: span var(--grid-columns);

        @variant @lg/panel {
            grid-column: span var(--col-span, var(--grid-columns));
        }
    }
}


/* GROUP PUBLISH COMPONENT / FIELD
=================================================== */
.publish-field {
    position: relative;
    .read-only-overlay {
        @apply absolute inset-0 cursor-not-allowed bg-white/25;
        z-index: var(--z-index-portal);
    }

    .has-field-dropdown {
        .field-inner {
            @apply pr-6;
        }
        .field-dropdown {
            @apply absolute bottom-[-3px] right-0 block;
        }
        &:not(.has-field-label) {
            .field-inner {
                @apply mb-2 min-h-[19.5px];
            }
        }
    }

    code {
        @apply bg-blue-50 text-blue-600 font-medium px-1 rounded-sm;
    }
}

.publish-field-label {
    @apply flex items-center font-medium text-sm mb-2;
}

.publish-sections .publish-sections-section {
    @apply mb-8;
    [data-cards-wrap="fields"] & {
        @apply mb-12;
    }
}

.publish-section-header {
    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-gray-900 dark:bg-gray-850;
}

.publish-section-header-inner {
    @apply px-4 pb-3 pt-4 @lg:px-6;
}

.publish-sidebar {
    @apply shrink-0 ms-8 w-[300px];

    .publish-fields .form-group {
        @apply p-0;
    }
}

.publish-tab-actions-footer {
    @apply mt-6;
}

.sneak-peek-editing .publish-tabs {
    position: sticky;
    top: 0;
    z-index: var(--z-index-portal);
}

/* GROUP COLLAPSIBLE PUBLISH SECTIONS
=================================================== */
.publish-section-collapsible {
    --timing: ease;
    /* No animation on load; enable once the user has toggled this section. */
    --speed: 0ms;

    /* Only setting the animation speed when the section is interacted with. Prevents the animation triggering on page load. */
    &.publish-section-collapsible--interacted {
        --speed: 250ms;
    }

    @media (prefers-reduced-motion: reduce) {
        --speed: 0ms;
    }
}

.publish-section-collapsible--expanded {
    /* We can animate collapse/expand using grid rows */
    animation: expand-rows var(--speed) var(--timing) forwards;

    .publish-section-collapsible__inner {
        animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
        overflow: clip;
        /* We need to increase the clip margin here vs regular collapsible sections because we have things appearing outside the section such as the logic indicator icon. */
        overflow-clip-margin: 2.5rem;
    }
}

.publish-section-collapsible--collapsed {
    animation: collapse-rows var(--speed) var(--timing) forwards;

    .publish-section-collapsible__inner {
        animation:
            clip-overflow 0ms var(--speed) forwards,
            make-invisible 0ms var(--speed) forwards;
        overflow: clip;
    }
}

@keyframes section-fade-in { from { opacity: 0%; } to { opacity: 100%; } }
@keyframes make-invisible { from { visibility: visible; } to { visibility: hidden; } }
@keyframes collapse-rows  { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
@keyframes expand-rows    { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
@keyframes clip-overflow  { to { overflow: clip; } }