@layer components { /* ── ds-speed-dial — MUI SpeedDial (Image #151) ───────────────────────── * Brand-blue FAB that, on click, fans out a stack of smaller circular * action buttons. Each action carries its own data-tooltip on the left * side (using the existing ds-tooltip component). * * Reference: https://mui.com/material-ui/react-speed-dial/#basic-speed-dial * * Markup: *
* *
* * … *
*
* * Wiring (ds-speed-dial.js): * - Click .ds-speed-dial__fab → toggles .is-open on the wrapper. * - Click outside / Esc → close. * - Action click fires through to the action's own handler. * * Direction: defaults to "down" (actions appear below the FAB, suitable * for a header-bar SpeedDial). Add modifier `.ds-speed-dial--up` to flip. */ .ds-speed-dial { position: relative; display: inline-flex; flex-direction: column; align-items: center; } /* Floating action button — brand-blue 40px circle with MUI elevation-6 * shadow. The two icons (closed = cog, open = X) are absolute-positioned * inside; the closed icon fades to the open icon via opacity + 45deg * rotation as the dial opens. */ .ds-speed-dial__fab { position: relative; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.20), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-speed-dial__fab:hover { background: var(--color-accent-hover, #2c47db); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.22), 0 8px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 20px 0 rgba(0, 0, 0, 0.14); } .ds-speed-dial__fab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.35), 0 3px 5px -1px rgba(0, 0, 0, 0.20), 0 6px 10px 0 rgba(0, 0, 0, 0.14); } /* Crossfading icons — `--closed` is visible by default, `--open` fades * in (and the cog rotates a half-turn during the swap). */ .ds-speed-dial__icon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-speed-dial__icon svg { width: 20px; height: 20px; } .ds-speed-dial__icon--open { opacity: 0; transform: rotate(-45deg); } .ds-speed-dial.is-open .ds-speed-dial__icon--closed { opacity: 0; transform: rotate(45deg); } .ds-speed-dial.is-open .ds-speed-dial__icon--open { opacity: 1; transform: rotate(0); } /* Actions container — sits below the FAB by default (header use case). * Hidden via opacity + pointer-events; each action also has its own * scale-in animation so the fan-out happens cleanly. */ .ds-speed-dial__actions { position: absolute; top: calc(100% + 16px); /* clears the FAB */ display: flex; flex-direction: column; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; } .ds-speed-dial.is-open .ds-speed-dial__actions { opacity: 1; pointer-events: auto; } /* Action button — 40px white circle, grey icon. Scales in on open with * a staggered delay so the topmost action appears first. MUI's default * stagger is ~30ms per action. */ .ds-speed-dial__action { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-surface); color: rgba(0, 0, 0, 0.54); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.20), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); transform: scale(0); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-speed-dial.is-open .ds-speed-dial__action { transform: scale(1); } .ds-speed-dial.is-open .ds-speed-dial__action:nth-child(2) { transition-delay: 30ms; } .ds-speed-dial.is-open .ds-speed-dial__action:nth-child(3) { transition-delay: 60ms; } .ds-speed-dial.is-open .ds-speed-dial__action:nth-child(4) { transition-delay: 90ms; } .ds-speed-dial__action:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); } .ds-speed-dial__action:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(63, 91, 255, 0.45), 0 3px 5px -1px rgba(0, 0, 0, 0.20), 0 6px 10px 0 rgba(0, 0, 0, 0.14); } .ds-speed-dial__action svg { width: 20px; height: 20px; } /* Direction modifiers — by default actions appear below (down). */ .ds-speed-dial--up .ds-speed-dial__actions { top: auto; bottom: calc(100% + 16px); flex-direction: column-reverse; } /* Left — actions fan out horizontally to the left of the FAB. Useful in * a header bar where the area BELOW the FAB already has other UI (section * panels, headers, expand/collapse chevrons) that would clash with a * downward-opening dial. */ .ds-speed-dial--left .ds-speed-dial__actions { top: 50%; bottom: auto; left: auto; right: calc(100% + 16px); transform: translateY(-50%); flex-direction: row-reverse; /* first action ends up closest to the FAB */ } /* Stagger cascade for the left direction — first .ds-speed-dial__action * inside row-reverse is the rightmost (closest to FAB). Use simple * nth-of-type instead of nth-child so the delays don't shift when * other markup is inserted. */ .ds-speed-dial--left.is-open .ds-speed-dial__action:nth-of-type(1) { transition-delay: 0ms; } .ds-speed-dial--left.is-open .ds-speed-dial__action:nth-of-type(2) { transition-delay: 30ms; } .ds-speed-dial--left.is-open .ds-speed-dial__action:nth-of-type(3) { transition-delay: 60ms; } .ds-speed-dial--left.is-open .ds-speed-dial__action:nth-of-type(4) { transition-delay: 90ms; } } /* end @layer components */