@sparqjs/schema-vue 0.1.0

package/src/custom-components/Upload/style.css

@@ -0,0 +1,313 @@
+@import '../../asset/preview/style.css';
+
+.sparq-upload {
+    --sparq-upload-size: 120px;
+    --sparq-upload-border: var(--sq-schema-border);
+    --sparq-upload-border-strong: var(--sq-schema-border-strong);
+    --sparq-upload-bg: var(--sq-schema-surface);
+    --sparq-upload-muted-bg: var(--sq-schema-surface-muted);
+    --sparq-upload-text: var(--sq-schema-text);
+    --sparq-upload-muted: var(--sq-schema-muted);
+    --sparq-upload-soft-text: color-mix(in srgb, var(--sq-schema-muted) 72%, var(--sq-schema-surface));
+    --sparq-upload-accent: var(--sq-schema-primary);
+    --sparq-upload-accent-strong: var(--sq-schema-primary-strong);
+    --sparq-upload-accent-soft: color-mix(in srgb, var(--sq-schema-primary-soft) 84%, var(--sq-schema-surface));
+    --sparq-upload-danger: var(--sq-schema-danger);
+    --sparq-upload-overlay: color-mix(in srgb, var(--sq-schema-overlay) 92%, transparent);
+    --sparq-upload-progress-track: color-mix(in srgb, var(--sq-schema-border) 72%, var(--sq-schema-surface-muted) 28%);
+    --sparq-upload-glass: color-mix(in srgb, var(--sq-schema-panel-glass) 92%, transparent);
+    width: 100%;
+}
+
+.sparq-upload__image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.sparq-upload__image-entry,
+.sparq-upload__image-item {
+    position: relative;
+    display: flex;
+    width: var(--sparq-upload-size);
+    height: var(--sparq-upload-size);
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px dashed var(--sparq-upload-border-strong);
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: var(--sparq-upload-bg);
+}
+
+.sparq-upload__image-entry {
+    cursor: pointer;
+}
+
+.sparq-upload__image-plus {
+    color: var(--sparq-upload-soft-text);
+    font-size: 30px;
+    line-height: 1;
+}
+
+.sparq-upload__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sparq-upload__overlay {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: var(--sparq-upload-overlay);
+}
+
+.sparq-upload__image-entry:hover .sparq-upload__overlay,
+.sparq-upload__image-item:hover .sparq-upload__overlay {
+    display: flex;
+}
+
+.sparq-upload__overlay-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px;
+}
+
+.sparq-upload__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.sparq-upload__button,
+.sparq-upload__icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    border: 1px solid var(--sparq-upload-border);
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: var(--sparq-upload-bg);
+    color: var(--sparq-upload-text);
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1;
+    transition:
+        border-color 160ms ease,
+        background-color 160ms ease,
+        color 160ms ease,
+        box-shadow 160ms ease;
+}
+
+.sparq-upload__button {
+    padding: 0 10px;
+}
+
+.sparq-upload__icon-button {
+    min-width: 42px;
+    padding: 0 8px;
+}
+
+.sparq-upload__button:hover:not(:disabled),
+.sparq-upload__icon-button:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--sparq-upload-accent) 32%, var(--sparq-upload-border));
+    color: var(--sparq-upload-accent);
+    background: var(--sparq-upload-accent-soft);
+}
+
+.sparq-upload__button:disabled,
+.sparq-upload__icon-button:disabled {
+    color: var(--sparq-upload-soft-text);
+    cursor: not-allowed;
+}
+
+.sparq-upload__title-input {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 28px;
+    width: 100%;
+    border: 0;
+    border-top: 1px solid color-mix(in srgb, var(--sparq-upload-border) 88%, transparent);
+    background: var(--sparq-upload-glass);
+    padding: 0 8px;
+    color: var(--sparq-upload-text);
+    font-size: 12px;
+    outline: none;
+}
+
+.sparq-upload__image-task {
+    display: grid;
+    width: 100%;
+    gap: 8px;
+    padding: 10px;
+}
+
+.sparq-upload__image-task-name,
+.sparq-upload__file-title {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--sparq-upload-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sparq-upload__image-task-name {
+    font-size: 12px;
+    text-align: center;
+}
+
+.sparq-upload__progress {
+    overflow: hidden;
+    width: 100%;
+    height: 6px;
+    border-radius: var(--sq-schema-radius-pill);
+    background: var(--sparq-upload-progress-track);
+}
+
+.sparq-upload__progress-bar {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--sparq-upload-accent);
+    transition: width 160ms ease;
+}
+
+.sparq-upload__status {
+    color: var(--sparq-upload-muted);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.sparq-upload__file-area {
+    display: grid;
+    gap: 10px;
+    max-width: 560px;
+}
+
+.sparq-upload__file-list {
+    display: grid;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 1px dashed var(--sparq-upload-border-strong);
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    list-style: none;
+}
+
+.sparq-upload__file-item {
+    display: grid;
+    grid-template-columns: 42px minmax(0, 1fr) 78px auto;
+    align-items: center;
+    gap: 8px;
+    min-height: 48px;
+    padding: 6px 8px;
+    border-bottom: 1px dashed var(--sparq-upload-border);
+    background: var(--sparq-upload-bg);
+}
+
+.sparq-upload__file-item:last-child {
+    border-bottom: 0;
+}
+
+.sparq-upload__file-icon {
+    display: flex;
+    width: 35px;
+    height: 35px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: var(--sq-schema-radius-pill);
+    background: var(--sparq-upload-muted-bg);
+}
+
+.sparq-upload__file-thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sparq-upload__file-label {
+    display: inline-grid;
+    width: 28px;
+    height: 32px;
+    place-items: center;
+    border: 1px solid var(--sparq-upload-border);
+    border-radius: var(--sq-schema-radius-3xs);
+    background:
+        linear-gradient(135deg, transparent 0 72%, color-mix(in srgb, var(--sparq-upload-border) 92%, var(--sparq-upload-bg)) 72%),
+        var(--sparq-upload-bg);
+    color: var(--sparq-upload-muted);
+    font-size: 8px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.sparq-upload__file-main {
+    display: grid;
+    min-width: 0;
+    gap: 6px;
+}
+
+.sparq-upload__file-title {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    text-align: left;
+    cursor: pointer;
+}
+
+.sparq-upload__file-title:hover {
+    color: var(--sparq-upload-accent);
+}
+
+.sparq-upload__file-title-input {
+    width: 100%;
+    height: 28px;
+    border: 1px solid var(--sparq-upload-border);
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: var(--sparq-upload-bg);
+    padding: 0 8px;
+    color: var(--sparq-upload-text);
+    outline: none;
+}
+
+.sparq-upload__file-size {
+    color: var(--sparq-upload-muted);
+    font-size: 12px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+.sparq-upload__file-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.sparq-upload__error {
+    margin-top: 6px;
+    color: var(--sparq-upload-danger);
+    font-size: 13px;
+}
+
+@media (max-width: 560px) {
+    .sparq-upload__file-item {
+        grid-template-columns: 42px minmax(0, 1fr);
+    }
+
+    .sparq-upload__file-size,
+    .sparq-upload__file-actions {
+        grid-column: 2;
+        justify-content: flex-start;
+        text-align: left;
+    }
+}