@cratis/components 2.9.1 → 3.1.0

package/dist/esm/Toolbar/Toolbar.css

@@ -1,357 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-/* ── Toolbar container ───────────────────────────────────────────────────── */
-.toolbar {
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-/* ── Toolbar button ──────────────────────────────────────────────────────── */
-.toolbar-button {
-    color: var(--cratis-text-color-secondary);
-    background: transparent;
-    border: none;
-    transition: background 0.15s, color 0.15s;
-}
-
-.toolbar-button:hover {
-    background: var(--cratis-surface-100);
-    color: var(--cratis-text-color);
-}
-
-.toolbar-button--active {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
-}
-
-.toolbar-button--active:hover {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
-}
-
-.toolbar-button--draggable {
-    cursor: grab;
-}
-
-.toolbar-button--draggable:active {
-    cursor: grabbing;
-}
-
-.toolbar-button__text {
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-}
-
-/* ── Toolbar project name label ──────────────────────────────────────────── */
-.toolbar-project-name {
-    padding: 0 8px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--cratis-text-color);
-    white-space: nowrap;
-}
-
-/* ── Toolbar section (context switching) ────────────────────────────────── */
-
-/*
- * The section is a fixed-size container that transitions smoothly between
- * the dimensions required by each context.
- * Overflow stays visible in the settled state so absolutely-positioned
- * children (e.g. fan-out panels) can extend beyond the section's bounds.
- * During a context resize transition, a temporary modifier clips incoming
- * content so buttons do not float outside the current toolbar bounds.
- */
-.toolbar-section {
-    position: relative;
-    transition:
-        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toolbar-section--transitioning {
-    overflow: hidden;
-}
-
-/*
- * Every context is absolutely stacked at the top-left of the section.
- * Only the active one is visible; the others fade out and lose pointer events.
- */
-.toolbar-context {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: opacity 0.2s ease;
-}
-
-.toolbar-context--active {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.toolbar-context--inactive {
-    opacity: 0;
-    pointer-events: none;
-}
-
-/* ── Toolbar separator ───────────────────────────────────────────────────── */
-
-.toolbar-separator {
-    background: var(--cratis-surface-border);
-    flex-shrink: 0;
-    align-self: stretch;
-}
-
-/* Separator inside a vertical toolbar — renders as a horizontal rule */
-.toolbar-separator--in-vertical {
-    height: 1px;
-    margin: 0.125rem 0.25rem;
-}
-
-/* Separator inside a horizontal toolbar — renders as a vertical rule */
-.toolbar-separator--in-horizontal {
-    width: 1px;
-    margin: 0.25rem 0.125rem;
-}
-
-/* ── Toolbar fan-out item ────────────────────────────────────────────────── */
-
-/*
- * The wrapper provides the positioning context for the absolutely-placed panel.
- */
-.toolbar-fanout-item {
-    position: relative;
-}
-
-/*
- * The fan-out panel is a floating pill that mirrors the Toolbar container style.
- * When collapsed, it's hidden. When expanded, it appears elevated at the same
- * position as the trigger button, with the trigger button as the first item.
- * Vertically centered with where the collapsed button would be.
- */
-.toolbar-fanout-panel {
-    position: absolute;
-    top: 50%;
-    left: calc(-0.5rem - 1px);
-    transform: translateY(-50%);
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.5rem;
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    border-radius: 1rem;
-    white-space: nowrap;
-    z-index: 10;
-    pointer-events: none;
-    opacity: 0;
-    clip-path: inset(0 100% 0 0 round 1rem);
-    transition:
-        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.2s ease;
-}
-
-/* Panel fans out to the left — reveal animates right → left */
-.toolbar-fanout-panel--left {
-    left: auto;
-    right: calc(-0.5rem - 1px);
-    clip-path: inset(0 0 0 100% round 1rem);
-}
-
-.toolbar-fanout-panel--up {
-    top: auto;
-    right: auto;
-    bottom: calc(100% + 0.5rem);
-    left: 50%;
-    transform: translateX(-50%);
-    clip-path: inset(100% 0 0 0 round 1rem);
-}
-
-.toolbar-fanout-panel--down {
-    top: calc(100% + 0.5rem);
-    right: auto;
-    left: 50%;
-    transform: translateX(-50%);
-    clip-path: inset(0 0 100% 0 round 1rem);
-}
-
-/* Expanded state — fully visible, pointer events restored */
-.toolbar-fanout-panel--visible {
-    clip-path: inset(0 0 0 0 round 1rem);
-    opacity: 1;
-    pointer-events: auto;
-}
-
-/*
- * Reveal complete. The clip-path did its job — the wipe cannot run without it,
- * because `clip-path: none` is a discrete value that snaps instead of
- * interpolating. But clip-path also clips every descendant, so leaving a zero
- * inset in place slices off the hover tooltips of the outermost buttons, which
- * paint outside the panel by design.
- *
- * ToolbarFanOutItem therefore adds this class once the reveal transition ends,
- * and takes it off again (restoring an interpolable inset) before the close
- * transition starts — so both wipes keep their exact timing and a settled panel
- * clips nothing.
- */
-.toolbar-fanout-panel--settled {
-    clip-path: none;
-}
-
-/* ── Toolbar folder ──────────────────────────────────────────────────────── */
-
-.toolbar-folder-item {
-    position: relative;
-}
-
-/*
- * Folder panel is a floating grid that grows naturally with item count.
- * The trigger stays in place while the panel animates in/out.
- */
-.toolbar-folder-panel {
-    position: absolute;
-    top: 50%;
-    left: calc(100% + 0.75rem);
-    transform: translateY(-50%) scale(0.92);
-    transform-origin: left center;
-    display: grid;
-    grid-auto-rows: minmax(2.5rem, auto);
-    gap: 0.25rem;
-    padding: 0.5rem;
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    border-radius: 1rem;
-    z-index: 10;
-    pointer-events: none;
-    opacity: 0;
-    clip-path: inset(0 100% 0 0 round 1rem);
-    transition:
-        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.2s ease;
-}
-
-.toolbar-folder-panel--left {
-    left: auto;
-    right: calc(100% + 0.75rem);
-    transform-origin: right center;
-    clip-path: inset(0 0 0 100% round 1rem);
-}
-
-.toolbar-folder-panel--visible {
-    clip-path: none;
-    transform: translateY(-50%) scale(1);
-    opacity: 1;
-    pointer-events: auto;
-}
-
-/* List-mode folder panel — vertical stack instead of a grid */
-.toolbar-folder-panel--list {
-    display: flex;
-    flex-direction: column;
-    min-width: 10rem;
-}
-
-/* ── Toolbar button — list mode ──────────────────────────────────────────── */
-
-/*
- * Inside a list-mode folder the button fills the available width and renders
- * its icon and title label side by side, left-aligned.
- */
-.toolbar-button--list {
-    width: 100%;
-    justify-content: flex-start;
-}
-
-.toolbar-button__label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: inherit;
-    white-space: nowrap;
-}
-
-/* ── Toolbar group ───────────────────────────────────────────────────────── */
-
-/*
- * When a Toolbar contains ToolbarGroup children it becomes a transparent
- * layout wrapper — each group renders as its own pill.
- */
-.toolbar:has(.toolbar-group) {
-    background: transparent;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    gap: 0.5rem;
-}
-
-/*
- * Each ToolbarGroup is a self-contained pill that matches the visual style
- * of a standalone Toolbar.
- */
-.toolbar-group {
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-
-/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
-
-/*
- * Size-morphing container for slot content inside a ToolbarGroup or ToolbarLayout.
- * Mirrors the .toolbar-section transition parameters for visual consistency —
- * the container resizes smoothly while content cross-fades.
- * Overflow stays visible in the settled state so absolutely-positioned children
- * (fan-out and folder panels, and the hover tooltips inside them) can escape the
- * section's bounds; it is only clipped while outgoing content is fading out, so
- * that content does not bleed past the container mid-transition.
- */
-.toolbar-slot-section {
-    position: relative;
-    transition:
-        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toolbar-slot-section--transitioning {
-    overflow: hidden;
-}
-
-@keyframes toolbar-slot-fade-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-@keyframes toolbar-slot-fade-out {
-    from { opacity: 1; }
-    to   { opacity: 0; }
-}
-
-/*
- * Incoming slot content — fades in on mount.
- * Duration matches the toolbar-context opacity transition (0.2s ease).
- */
-.toolbar-slot-incoming {
-    position: absolute;
-    top: 0;
-    left: 0;
-    animation: toolbar-slot-fade-in 0.2s ease forwards;
-}
-
-/*
- * Outgoing slot content — fades out, then React unmounts it after
- * the animation completes.
- */
-.toolbar-slot-outgoing {
-    position: absolute;
-    top: 0;
-    left: 0;
-    animation: toolbar-slot-fade-out 0.2s ease forwards;
-    pointer-events: none;
-}