@verbb/formie-browser 1.0.4 → 1.0.6

package/dist/css/theme/fields/_upload-manager.css

@@ -0,0 +1,279 @@
+@layer formie-theme {
+    .formie-upload-manager {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-gap-field);
+    }
+
+    .formie-upload-manager-dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-4);
+        min-height: calc(var(--formie-control-height) * 3);
+        border: var(--formie-border-width) dashed var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface-subtle);
+        color: var(--formie-color-text);
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .formie-upload-manager-dropzone:hover,
+    .formie-upload-manager-dropzone.formie-upload-manager-dropzone-active {
+        border-color: var(--formie-color-focus-ring);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-upload-manager-dropzone:focus {
+        outline: 0;
+    }
+
+    .formie-upload-manager-dropzone:focus-visible {
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-field-has-error .formie-upload-manager-dropzone {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-prompt {
+        margin: 0;
+        font-size: var(--formie-font-size-sm);
+        color: var(--formie-color-text-muted);
+    }
+
+    .formie-upload-manager-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-space-2);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .formie-upload-manager-item {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8rem) auto;
+        align-items: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-2) var(--formie-space-3);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+    }
+
+    .formie-upload-manager-item.is-error {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-item.is-complete .formie-upload-manager-progress {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
+    .formie-upload-manager-filename {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--formie-font-size-sm);
+    }
+
+    .formie-upload-manager-progress {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--formie-space-1);
+        min-height: var(--formie-button-icon-button-size);
+        align-self: center;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 200ms ease, visibility 200ms ease;
+    }
+
+    .formie-upload-manager-progress-track {
+        position: relative;
+        height: 0.375rem;
+        border-radius: var(--formie-radius-full);
+        background: var(--formie-color-surface-muted);
+        overflow: hidden;
+    }
+
+    .formie-upload-manager-progress-bar {
+        height: 100%;
+        width: 0;
+        border-radius: inherit;
+        background: var(--formie-color-primary);
+        transition: width 180ms ease-out, background-color 200ms ease;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-bar {
+        width: 100% !important;
+        background: var(--formie-color-success, var(--formie-color-primary));
+    }
+
+    .formie-upload-manager-item.is-uploading:not(.is-upload-complete) .formie-upload-manager-progress-track[data-indeterminate="true"] .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-preparing .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        width: 35%;
+        animation: formie-upload-manager-progress-indeterminate 1.1s ease-in-out infinite;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        opacity: 0.85;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-label {
+        color: var(--formie-color-text);
+    }
+
+    @keyframes formie-upload-manager-progress-indeterminate {
+        0% {
+            transform: translateX(-120%);
+        }
+
+        100% {
+            transform: translateX(320%);
+        }
+    }
+
+    .formie-upload-manager-progress-label {
+        font-size: var(--formie-font-size-xs);
+        line-height: 1.2;
+        color: var(--formie-color-text-muted);
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-label {
+        color: var(--formie-color-success, var(--formie-color-primary));
+        font-weight: var(--formie-font-weight-medium);
+    }
+
+    .formie-upload-manager-error {
+        grid-column: 1 / -1;
+        font-size: var(--formie-font-size-xs);
+        color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-browse-button {
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-upload-manager-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--formie-space-2);
+        align-self: center;
+        flex-shrink: 0;
+    }
+
+    .formie-upload-manager-sort-controls {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.0625rem;
+        padding: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+    }
+
+    .formie-upload-manager-sort-controls[hidden] {
+        display: none;
+    }
+
+    .formie-upload-manager-sort-button,
+    .formie-upload-manager-action-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.375rem;
+        height: 1.375rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+        color: var(--formie-color-text-muted);
+        cursor: pointer;
+        font-size: 0;
+        line-height: 0;
+        text-indent: -9999px;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
+    }
+
+    .formie-upload-manager-sort-button {
+        width: 1.375rem;
+        height: 1.375rem;
+    }
+
+    .formie-upload-manager-sort-button:hover:not(:disabled),
+    .formie-upload-manager-action-button:hover {
+        background: var(--formie-color-surface-muted);
+        color: var(--formie-color-text);
+    }
+
+    .formie-upload-manager-sort-button:focus-visible,
+    .formie-upload-manager-action-button:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-upload-manager-sort-button:disabled {
+        opacity: 0.28;
+        cursor: not-allowed;
+    }
+
+    .formie-upload-manager-sort-button::after,
+    .formie-upload-manager-action-button::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        content: '';
+        transform: translate(-50%, -50%);
+        background-color: currentColor;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-up"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-up);
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-down"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-down);
+    }
+
+    .formie-upload-manager-action-button[data-formie-icon="close"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-close);
+    }
+
+    .formie-upload-manager-sort-button::after {
+        width: 0.75rem;
+        height: 0.75rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-action-button::after {
+        width: 0.825rem;
+        height: 0.825rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-remove-button {
+        flex-shrink: 0;
+    }
+}