@inntechcorp/it-design 3.1.24 → 4.0.0-beta.2

package/dist/css/upload.css

@@ -0,0 +1,335 @@
+@layer components {
+
+  /* ===== Wrapper ===== */
+  .itd-upload {
+    position: relative;
+    font-size: 13px;
+    font-weight: 400;
+
+    &[data-fluid="true"] {
+      width: 100%;
+    }
+
+    &[data-fluid="false"] {
+      width: max-content;
+    }
+
+    &[data-disabled="true"] {
+      pointer-events: none;
+      cursor: not-allowed;
+
+      & img {
+        filter: grayscale(1);
+        opacity: .5;
+      }
+    }
+
+    &[data-locked="true"] {
+      cursor: not-allowed;
+
+      & input[type="file"] {
+        pointer-events: none;
+      }
+    }
+
+    & input[type="file"] {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      opacity: 0;
+      z-index: 1;
+    }
+  }
+
+  /* ===== FileContent ===== */
+  .itd-upload-content {
+    transition-property: border-color;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+    border-radius: var(--itd-border-radius);
+    padding: var(--upload-padding, 10px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    min-height: 100px;
+    width: var(--container-width, 100%);
+    height: var(--container-height, auto);
+    border: 1px dashed var(--itd-color-border);
+
+    & > img {
+      max-width: 100%;
+      width: var(--file-width, 100%);
+      height: var(--file-height, auto);
+      max-width: var(--max-file-width, none);
+      max-height: var(--max-file-height, none);
+      overflow: hidden;
+      border-radius: var(--itd-border-radius);
+    }
+
+    & img.itd-image-error-broken {
+      width: 2rem;
+    }
+
+    & .itd-upload-icon,
+    & .itd-broken-file-icon {
+      color: var(--itd-color-text);
+    }
+
+    &[data-variant="filled"],
+    &[data-variant="default"] {
+      background-color: var(--itd-color-background-alt);
+    }
+
+    &[data-state="uploading"] {
+      border: 1px solid var(--itd-color-upload-overlay-uploading-bar);
+    }
+
+    &[data-state="disabled"] {
+      border: 1px solid var(--itd-color-disabled-border);
+
+      & .itd-upload-icon,
+      & .itd-broken-file-icon {
+        color: var(--itd-color-disabled-text);
+      }
+    }
+
+    &[data-state="error"]:not([data-state="uploading"]) {
+      border-color: var(--itd-color-error-border);
+    }
+
+    &[data-border="hover"]:not([data-disabled="true"]):not([data-state="uploading"]) {
+      border-color: var(--itd-color-border-hover);
+    }
+
+    &[data-focus="true"]:not([data-disabled="true"]):not([data-state="uploading"]) {
+      border-color: var(--itd-color-focus-primary);
+    }
+  }
+
+  /* ===== Label ===== */
+  .itd-upload-label {
+    display: block;
+    outline: 0 solid transparent;
+    outline-offset: var(--itd-ring-offset);
+    border-radius: var(--itd-border-radius);
+    transition: outline 100ms linear;
+
+    &[data-focus="true"] {
+      outline: var(--itd-ring-width) solid var(--itd-color-focus-primary-ring);
+    }
+
+    &[data-focus="true"][data-error="true"] {
+      outline: var(--itd-ring-width) solid var(--itd-color-error-outline);
+    }
+  }
+
+  /* ===== IconsWrapper ===== */
+  .itd-upload-icons-wrapper {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+
+    & .itd-upload-delete-button,
+    & .itd-upload-preview-button {
+      background-color: var(--itd-color-background-alt-alpha85);
+      backdrop-filter: blur(4px);
+    }
+
+    &[data-position="default"] {
+      right: 15px;
+      height: auto;
+    }
+
+    &[data-position="corners"] {
+      right: -17px;
+      height: 100%;
+
+      & .delete-icon {
+        position: absolute;
+        bottom: -17px;
+        right: 0;
+      }
+
+      & .preview-icon {
+        position: absolute;
+        top: -17px;
+        right: 0;
+      }
+    }
+
+    & .locked-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  /* ===== CenterContent ===== */
+  .itd-upload-preview-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--preview-padding, 0);
+
+    & img {
+      width: var(--preview-width, 100%);
+      height: var(--preview-height, 100%);
+    }
+  }
+
+  /* ===== OverlayContent ===== */
+  .itd-upload-overlay-content {
+    transition-property: all;
+    transition-duration: 0ms;
+    transition-timing-function: var(--itd-transition-timing-function);
+    transition-delay: 0ms;
+    position: absolute;
+    top: 150%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    & span:nth-child(1) {
+      color: var(--itd-color-upload-text);
+      text-align: center;
+      font-weight: 500;
+    }
+
+    & span:nth-child(2) {
+      color: var(--itd-color-upload-text-alpha50);
+      text-align: center;
+      font-weight: 400;
+    }
+
+    &[data-hover="true"] {
+      top: 50%;
+    }
+  }
+
+  /* ===== Overlay ===== */
+  .itd-upload-overlay {
+    position: absolute;
+    display: flex;
+    pointer-events: all;
+    transition-property: all;
+    transition-duration: var(--itd-transition-duration);
+    transition-timing-function: var(--itd-transition-timing-function);
+    animation-direction: reverse;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    backdrop-filter: blur(0px);
+    border-radius: var(--itd-border-radius);
+    overflow: hidden;
+
+    &[data-hover="true"] {
+      backdrop-filter: blur(2px);
+      background-color: var(--itd-color-background-alt-alpha75);
+    }
+  }
+
+  /* ===== Uploading ===== */
+  .itd-upload-status {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    border-radius: var(--itd-border-radius);
+    overflow: hidden;
+    transition-property: all;
+    transition-duration: var(--itd-transition-duration);
+    transition-timing-function: var(--itd-transition-timing-function);
+
+    & span,
+    & div {
+      color: transparent;
+      z-index: 1;
+      pointer-events: none;
+      transition-property: all;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+    }
+
+    &[data-active="true"] {
+      background-color: var(--itd-color-upload-overlay-uploading);
+
+      & span {
+        color: var(--itd-color-uploading-text);
+      }
+    }
+
+    &[data-active="true"][data-status="success"] {
+      background-color: var(--itd-color-upload-overlay-completed);
+
+      & span {
+        color: var(--itd-color-upload-completed-text);
+      }
+    }
+
+    &[data-active="true"][data-status="error"] {
+      background-color: var(--itd-color-upload-overlay-error);
+
+      & span {
+        color: var(--itd-color-upload-error-text);
+      }
+    }
+  }
+
+  /* ===== UploadStatusBox ===== */
+  .itd-upload-status-box {
+    transition-property: all;
+    transition-duration: var(--itd-transition-duration);
+    transition-timing-function: var(--itd-transition-timing-function);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--upload-progress, 0%);
+
+    &[data-status="success"] {
+      background-color: var(--itd-color-upload-overlay-completed);
+    }
+
+    &[data-status="error"] {
+      background-color: var(--itd-color-upload-overlay-error);
+    }
+
+    &:not([data-status]) {
+      background-color: var(--itd-color-upload-overlay-uploading-bar);
+    }
+  }
+
+  /* ===== Failed (StatusCore + Failed) ===== */
+  .itd-upload-failed {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+
+    &[data-icon="i"]::before {
+      padding: 4px;
+      border-radius: 50px;
+    }
+
+    &::before {
+      background-color: var(--itd-color-error);
+    }
+
+    & svg circle {
+      fill: var(--itd-color-error);
+    }
+
+    & svg {
+      color: var(--itd-color-error-text);
+    }
+  }
+}