@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/editor/tree/scss/index.scss

@@ -0,0 +1,732 @@
+@use '/shared';
+@use '/tokens';
+@use 'variables';
+
+// The folder's bottom edge mid-motion, 0 to --motion-rows rows down, read from the element's own progress.
+$edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
+
+// Animated on the tree while a folder opens or closes, its end settling the motion, and on each element that moves
+// with it. Not inherited, so a frame restyles those elements alone rather than everything under the tree.
+@property --file-tree-progress {
+    inherits: false;
+    initial-value: 0;
+    syntax: '<number>';
+}
+
+.file-tree {
+    color: var(--color);
+    font-size: var(--font-size);
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    &--indicator {
+        --indicator-display: block;
+
+        // On the tree rather than the viewport, so the copies standing in for rows mid-motion, laid beside the
+        // viewport, brighten and show along with the rest.
+        &:hover {
+            --indicator-color: var(--indicator-hover);
+        }
+    }
+
+    &--indicator-hover {
+        --indicator-opacity: 0;
+
+        &:hover {
+            --indicator-opacity: 1;
+        }
+    }
+
+    // The accordion: the folder's bottom edge travels over its rows, 0 to --motion-rows rows down. Runs under
+    // reduced motion as well, since its end is what settles the motion.
+    &--motion {
+        animation: file-tree-collapse var(--collapse-duration) var(--motion-easing) forwards;
+    }
+
+    &--motion-open {
+        animation-duration: var(--expand-duration);
+        animation-name: file-tree-expand;
+    }
+
+    &-badge {
+        display: flex;
+        flex-shrink: 0;
+        font-size: var(--badge-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--badge-font-weight);
+        gap: var(--badge-gap);
+        margin-inline-start: auto;
+        padding-inline-start: var(--item-gap);
+
+        &-part {
+            @each $tone in additions, added, conflict, deleted, deletions, error, ignored, modified, open, submodule, unsaved, warning {
+                &--#{$tone} {
+                    color: var(--#{$tone}-color);
+                }
+            }
+
+            // Changes in the index sit in a tinted chip, so a file staged and then edited again reads as two letters.
+            &--staged {
+                background: color-mix(in srgb, currentColor var(--staged-tint), transparent);
+                border-radius: var(--staged-radius);
+                padding-inline: var(--staged-padding);
+            }
+        }
+    }
+
+    &-chevron {
+        transition: rotate var(--chevron-duration) ease-out;
+
+        // Mirrored to point left, so opening turns it the other way to still point down.
+        &:dir(rtl) {
+            scale: -1 1;
+
+            [aria-expanded='true'] > * > & {
+                rotate: -90deg;
+            }
+        }
+
+        [aria-expanded='true'] > * > & {
+            rotate: 90deg;
+        }
+    }
+
+    // The drag moves it to the pointer by its 'translate'.
+    &-drag {
+        @extend %reset-popover;
+        background: var(--drag-background);
+        border-radius: var(--drag-radius);
+        box-shadow: var(--drag-box-shadow);
+        color: var(--color);
+        font-size: var(--font-size);
+        gap: var(--item-gap);
+        left: 0;
+        margin: var(--drag-offset) 0 0 var(--drag-offset);
+        padding: var(--drag-padding);
+        top: 0;
+        white-space: nowrap;
+
+        &:popover-open {
+            align-items: center;
+            display: flex;
+        }
+
+        &--copy {
+            --drag-copy-display: block;
+        }
+
+        &-copy {
+            color: var(--added-color);
+            display: var(--drag-copy-display, none);
+            font-weight: var(--badge-font-weight);
+        }
+
+        &-count {
+            color: var(--ignored-color);
+            font-size: var(--badge-font-size);
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--badge-font-weight);
+        }
+    }
+
+    // Over the rows rather than above them, so the list and the sticky folders keep their places as it comes and goes.
+    &-find {
+        display: flex;
+        flex-direction: column;
+        inset-block-start: 0;
+        inset-inline-end: var(--find-offset);
+        max-width: calc(100% - var(--find-offset) * 2);
+        position: absolute;
+        z-index: 2;
+
+        &-bar {
+            align-items: center;
+            background: var(--find-background);
+            border: 1px solid var(--find-border-color);
+            border-radius: var(--find-radius);
+            box-shadow: var(--find-shadow);
+            display: flex;
+            gap: var(--find-gap);
+            padding: var(--find-padding);
+        }
+
+        &-button {
+            align-items: center;
+            background: none;
+            border: 0;
+            border-radius: var(--input-radius);
+            color: inherit;
+            cursor: pointer;
+            display: flex;
+            flex-shrink: 0;
+            height: var(--find-button-size);
+            justify-content: center;
+            outline: 0 solid var(--focus-color);
+            padding: 0;
+            width: var(--find-button-size);
+
+            &:disabled {
+                cursor: default;
+                opacity: 0.4;
+            }
+
+            &:focus-visible {
+                outline-width: 1px;
+            }
+
+            &:not(:disabled):hover {
+                background: var(--background-hover);
+            }
+
+            &[aria-pressed='true'] {
+                background: var(--background-active);
+                box-shadow: inset 0 0 0 1px var(--input-border-color);
+            }
+        }
+
+        &-count {
+            color: var(--find-note-color);
+            flex-shrink: 0;
+            font-size: var(--find-note-font-size);
+            font-variant-numeric: tabular-nums;
+            padding-inline: var(--find-gap);
+            white-space: nowrap;
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        &-input {
+            background: var(--input-background);
+            border: 1px solid transparent;
+            border-radius: var(--input-radius);
+            color: inherit;
+            font: inherit;
+            height: var(--find-button-size);
+            min-width: 0;
+            outline: none;
+            padding-inline: var(--input-padding);
+            user-select: text;
+            width: var(--find-input-width);
+
+            &:focus {
+                border-color: var(--input-border-color);
+            }
+
+            &[aria-invalid='true'] {
+                border-color: var(--error-color);
+            }
+        }
+
+        &-note {
+            align-self: flex-end;
+            background: var(--find-background);
+            border: 1px solid var(--find-border-color);
+            border-block-start: 0;
+            border-end-end-radius: var(--find-radius);
+            border-end-start-radius: var(--find-radius);
+            color: var(--find-note-color);
+            font-size: var(--find-note-font-size);
+            margin: 0 var(--find-radius);
+            padding: 0 var(--find-padding);
+        }
+    }
+
+    &-input {
+        background: var(--input-background);
+        border: 1px solid var(--input-border-color);
+        border-radius: var(--input-radius);
+        color: inherit;
+        flex: 1;
+        font: inherit;
+        height: calc(var(--row-height) - 2px);
+        min-width: 0;
+        outline: none;
+        padding-inline: var(--input-padding);
+        user-select: text;
+
+        &[aria-invalid='true'] {
+            border-color: var(--error-color);
+        }
+
+        &[readonly] {
+            opacity: 0.6;
+        }
+    }
+
+    // Inline, so a long name marked still ends in an ellipsis.
+    &-match {
+        background: var(--match-background);
+        border-radius: var(--match-radius);
+        color: var(--match-color);
+        font-weight: var(--match-font-weight);
+    }
+
+    // Hangs below the row over the ones beneath, aligned with the input, so the list doesn't shift while typing.
+    &-message {
+        background: var(--message-background);
+        border: 1px solid var(--error-color);
+        border-radius: var(--input-radius);
+        font-size: var(--message-font-size);
+        inset-inline: calc(var(--padding) + var(--twistie-size) + var(--icon-size) + var(--item-gap) * 2) 0;
+        padding: var(--message-padding);
+        position: absolute;
+        top: 100%;
+        white-space: normal;
+        z-index: 1;
+    }
+
+    // Laid over the viewport, which stays the tree's one tab stop.
+    &-empty {
+        @extend %absolute-full;
+        align-items: center;
+        color: var(--empty-color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-200);
+        justify-content: center;
+        padding: var(--size-400);
+        text-align: center;
+    }
+
+    // Laid over the viewport's visible box; the layer starts at the folder's bottom edge.
+    &-motion {
+        display: none;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+
+        &-layer {
+            left: 0;
+            position: absolute;
+            right: 0;
+        }
+    }
+
+    &-name {
+        @extend %text-truncate;
+        color: var(--tone, inherit);
+        min-width: 0;
+        text-decoration: var(--name-decoration, none);
+    }
+
+    &-notice {
+        color: var(--notice-color);
+
+        // Nothing to act on while loading; the error row retries.
+        &:not(.file-tree-row--error) {
+            cursor: var(--drag-cursor, default);
+        }
+    }
+
+    &-row {
+        @extend %drag-item;
+        --guide-direction: 1;
+        align-items: center;
+        border-radius: var(--row-radius);
+        cursor: var(--drag-cursor, pointer);
+        display: flex;
+        gap: var(--item-gap);
+        height: var(--row-height);
+        // Nested rows start at their depth, so the one highlight resizes and shifts as it moves between them.
+        margin-inline-start: calc(var(--depth) * var(--indent));
+        outline: 0 solid var(--focus-color);
+        outline-offset: -1px;
+        padding-inline: var(--padding);
+        position: relative;
+        user-select: none;
+
+        &:dir(rtl) {
+            --guide-direction: -1;
+        }
+
+        // One guide per ancestor under each ancestor's chevron, outside the row's box so the highlight covers the row
+        // alone; rows carry no vertical margins, so each row's share joins into an unbroken line. The parent's guide
+        // is a 1px box and the others are its shadows ('--guides'), whole indents further out: boxes snap to whole
+        // pixels the same way on every row, where a gradient's line falls between pixels and each row rounds it its
+        // own way.
+        &::before {
+            background: currentColor;
+            box-shadow: var(--guides);
+            color: var(--indicator-color);
+            content: '';
+            display: var(--indicator-display, none);
+            inset-block: 0;
+            inset-inline-start: calc(var(--padding) + var(--twistie-size) / 2 - 0.5px - var(--indent));
+            opacity: var(--indicator-opacity, 1);
+            position: absolute;
+            transition: opacity var(--indicator-duration) ease-out;
+            // Top-level rows have no parent to draw.
+            width: calc(min(var(--depth), 1) * 1px);
+        }
+
+        // The contents alone, so the guide and a selection behind the row keep their strength.
+        &--cut > * {
+            opacity: var(--cut-opacity);
+        }
+
+        &.--disabled {
+            cursor: var(--drag-cursor, not-allowed);
+            opacity: 0.5;
+        }
+
+        &--deleted {
+            --name-decoration: line-through;
+        }
+
+        // Set while moving, not copying.
+        &--dragged {
+            opacity: var(--dragged-opacity);
+        }
+
+        // A root's header, set apart from the folders under it as VS Code sets its workspace folders.
+        &--root {
+            font-size: var(--root-font-size);
+            font-weight: var(--root-font-weight);
+            text-transform: uppercase;
+        }
+
+        // The drop target and its open contents read as one box, from the folder's indent down to its last row.
+        &--drop::after {
+            background: var(--drop-background);
+            border: 0 solid var(--drop-border-color);
+            border-inline-width: var(--border-width-400);
+            content: '';
+            inset-block: 0;
+            inset-inline: calc((var(--drop-depth) - var(--depth)) * var(--indent)) 0;
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &--drop-end::after,
+        &--drop-only::after {
+            border-block-end-width: var(--border-width-400);
+            border-end-end-radius: var(--row-radius);
+            border-end-start-radius: var(--row-radius);
+        }
+
+        &--drop-only::after,
+        &--drop-start::after {
+            border-block-start-width: var(--border-width-400);
+            border-start-end-radius: var(--row-radius);
+            border-start-start-radius: var(--row-radius);
+        }
+
+        // Every match tinted, the one the find bar is on outlined as well; a selected match shows its selection.
+        &--match {
+            background: var(--found-background);
+        }
+
+        &--match-current {
+            box-shadow: inset 0 0 0 1px var(--found-border-color);
+        }
+
+        // Selected rows besides the primary, which the highlight covers.
+        &--selected {
+            background: var(--background-selected);
+        }
+
+        // A folder's rows fade in a beat behind the opening.
+        &--reveal {
+            animation: file-tree-reveal var(--reveal-duration) ease-out var(--reveal-delay) backwards;
+        }
+
+        // A square band across the tree's full width, back past the row's depth inset, so a scope's rows join into
+        // one block. Isolated, the band sits over the highlight and under the row's content and guides.
+        &--scope {
+            isolation: isolate;
+
+            &::after {
+                background: color-mix(in srgb, var(--scope) var(--scope-tint), transparent);
+                content: '';
+                inset-block: 0;
+                inset-inline: calc(var(--depth) * var(--indent) * -1) 0;
+                pointer-events: none;
+                position: absolute;
+                z-index: -1;
+            }
+        }
+
+        // A copy in the sticky stack, which covers the highlight, so it shows its own hover and selection.
+        &--pinned {
+            --background-selected: var(--background-active);
+
+            &:not(.--disabled, .file-tree-row--selected):hover {
+                background: var(--background-hover);
+            }
+
+            // The deepest folder, pushed up by the rows after its own, slides under the one above it.
+            &:last-child {
+                clip-path: inset(var(--sticky-push, 0px) calc(var(--depth) * var(--indent) * -1) 0);
+                margin-block-start: calc(var(--sticky-push, 0px) * -1);
+            }
+        }
+
+        .file-tree-viewport:focus-visible &--focused {
+            outline-width: 1px;
+        }
+    }
+
+    // A compact row's folders, underlined under the pointer and when one before the row's own is selected, as in
+    // VS Code; the one a drag would drop into is tinted, and the find bar's current match outlined within its row.
+    &-segment {
+        border-radius: var(--border-radius-100);
+
+        #{tokens.state(active)},
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &--match-current {
+            box-shadow: inset 0 0 0 1px var(--found-border-color);
+        }
+
+        &--drop {
+            background: var(--drop-background);
+            box-shadow: inset 0 0 0 var(--border-width-400) var(--drop-border-color);
+        }
+    }
+
+    &-separator {
+        color: var(--separator-color);
+        margin-inline: var(--separator-gap);
+    }
+
+    &-spinner {
+        flex-shrink: 0;
+    }
+
+    // Takes no room in the list, so the rows scroll on beneath it; it only covers them.
+    &-sticky {
+        height: 0;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &-rows {
+            background: var(--sticky-background);
+            box-shadow: var(--sticky-shadow);
+
+            &:not(:has(> .file-tree-row)) {
+                display: none;
+            }
+        }
+    }
+
+    &-toggle.button {
+        bottom: 4px;
+        height: 32px;
+        inset-inline-end: var(--size-100);
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        position: absolute;
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+    }
+
+    &-tooltip {
+        &-meta {
+            color: color-mix(in srgb, currentColor 70%, transparent);
+            display: block;
+            font-size: var(--font-size-200);
+            white-space: nowrap;
+        }
+
+        &-path {
+            display: block;
+            overflow-wrap: anywhere;
+        }
+    }
+
+    &-twistie {
+        display: flex;
+        flex-shrink: 0;
+        width: var(--twistie-size);
+    }
+
+    &-viewport {
+        height: 100%;
+        outline: none;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        // The viewport holds the pointer for the whole drag, so its cursor is the one that shows; its rows take it too.
+        &--drag {
+            --drag-cursor: grabbing;
+            cursor: var(--drag-cursor);
+        }
+
+        &--drag-copy {
+            --drag-cursor: copy;
+        }
+
+        &--drag-none {
+            --drag-cursor: no-drop;
+        }
+
+        &--drop {
+            background: var(--drop-background);
+            box-shadow: inset 0 0 0 var(--border-width-400) var(--drop-border-color);
+        }
+    }
+
+    // The list has already swapped rows, so the rows below are drawn back where they sat and ride the edge home, and
+    // copies stand in for any no longer rendered. Opening: the folder's rows show above the edge. Closing: copies of
+    // them fade out above it. The real rows move, not their contents, so the highlight follows the selected one. Each
+    // moving element runs the tree's progress itself, started on the same frame, so a frame restyles only them; their
+    // own keyframes would put each on a compositor layer, dropping its text's subpixel antialiasing mid-motion.
+    @media (prefers-reduced-motion: no-preference) {
+        &-motion {
+            @include tokens.state(active) {
+                display: block;
+            }
+
+            &-layer--close {
+                animation: file-tree-collapse var(--collapse-duration) var(--motion-easing) forwards, file-tree-conceal var(--conceal-duration) ease-out forwards;
+                height: $edge;
+                overflow: hidden;
+            }
+
+            &-layer--open {
+                animation: file-tree-expand var(--expand-duration) var(--motion-easing) forwards;
+                translate: 0 $edge;
+            }
+        }
+
+        &-row {
+            // Marked only while closing.
+            &--motion ~ .file-tree-row {
+                animation: file-tree-collapse var(--collapse-duration) var(--motion-easing) forwards;
+                translate: 0 $edge;
+            }
+
+            // Marked only while opening.
+            &--reveal {
+                animation: file-tree-expand var(--expand-duration) var(--motion-easing) forwards, file-tree-reveal var(--reveal-duration) ease-out var(--reveal-delay) backwards;
+                // Open at the sides, so the guides drawn outside the row still show.
+                clip-path: inset(
+                    0
+                    calc(var(--depth) * var(--indent) * -1)
+                    clamp(0px, calc((var(--reveal-index) + 1) * var(--row-height) - $edge), var(--row-height))
+                    calc(var(--depth) * var(--indent) * -1)
+                );
+
+                ~ .file-tree-row:not(.file-tree-row--reveal) {
+                    animation: file-tree-expand var(--expand-duration) var(--motion-easing) forwards;
+                    translate: 0 calc($edge - var(--motion-rows) * var(--row-height));
+                }
+            }
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-chevron {
+            transition: none;
+        }
+
+        &-row--reveal {
+            animation-name: file-tree-fade;
+        }
+    }
+
+    // High contrast themes swap every color for the system palette and drop tints and shadows, which would take the
+    // highlight, the scope bands and all but the parent's guide with them.
+    @media (forced-colors: active) {
+        --indicator-color: GrayText;
+        --indicator-hover: CanvasText;
+
+        // The wash is dropped with the other tints, so an underline marks the match along with its weight.
+        &-match {
+            text-decoration: underline;
+        }
+
+        &-row {
+            // Opted out, so the shadow copies drawing the further ancestors' guides survive.
+            &::before {
+                forced-color-adjust: none;
+            }
+
+            // Opted out, or the backplate drawn behind text in Canvas hides the name.
+            @include tokens.state(active) {
+                background: Highlight;
+                forced-color-adjust: none;
+
+                &,
+                .file-tree-badge > *,
+                .file-tree-name,
+                .icon {
+                    color: HighlightText;
+                }
+            }
+
+            &.--disabled {
+                color: GrayText;
+                opacity: 1;
+            }
+
+            @include tokens.state(hover) {
+                outline: 1px dashed Highlight;
+            }
+
+            &--match {
+                outline: 1px dotted CanvasText;
+            }
+
+            &--match-current {
+                outline-style: solid;
+            }
+
+            &--scope::after {
+                display: none;
+            }
+
+            .file-tree-viewport:focus-visible > &--focused {
+                outline: 1px solid CanvasText;
+            }
+        }
+    }
+}
+
+@keyframes file-tree-collapse {
+    from {
+        --file-tree-progress: 1;
+    }
+
+    to {
+        --file-tree-progress: 0;
+    }
+}
+
+@keyframes file-tree-conceal {
+    to {
+        filter: blur(2px);
+        opacity: 0;
+    }
+}
+
+@keyframes file-tree-expand {
+    from {
+        --file-tree-progress: 0;
+    }
+
+    to {
+        --file-tree-progress: 1;
+    }
+}
+
+@keyframes file-tree-fade {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes file-tree-reveal {
+    from {
+        filter: blur(2px);
+        opacity: 0;
+    }
+}