@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-file-upload/dropi-file-upload.css

@@ -1,66 +1,464 @@
-:host { display: block; width: 100%; }
-*, *::before, *::after { box-sizing: border-box; }
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
 
-.upload-wrap {
+/* ── Contenedor principal ───────────────────────────────────── */
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3, 12px);
+  width: 100%;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.upload-header {
   display: flex;
   flex-direction: column;
   gap: var(--Size-1, 4px);
+  align-items: flex-start;
+  align-self: stretch;
 }
 
-.upload-label {
-  font-size: var(--font-size-xs, 10px);
+.upload-header .text {
   color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 12px);
+  font-style: normal;
+  line-height: 150%;
+}
+
+.upload-header .title {
+  font-weight: var(--font-weight-medium, 500);
+}
+
+.upload-header .label {
+  font-weight: var(--font-weight-regular, 400);
 }
 
-.upload-zone {
+/* ── Drop zone wrapper ──────────────────────────────────────── */
+.file-upload {
   display: flex;
+  width: 100%;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  gap: var(--Size-3, 12px);
+  background: var(--Neutral-White, #ffffff);
+}
+
+.file-upload__zone {
+  display: flex;
+  padding: var(--Size-5, 24px);
+  flex-direction: column;
   justify-content: center;
-  gap: var(--Size-2, 8px);
-  padding: var(--Size-6, 32px) var(--Size-4, 16px);
-  border: 2px dashed var(--Gray-Gray-200, #c3c9d9);
+  align-items: center;
+  gap: var(--Size-6, 32px);
+  align-self: stretch;
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
+  border: 1px dashed var(--Gray-Gray-200, #c3c9d9);
+  background: var(--Neutral-White, #ffffff);
   text-align: center;
+  transition: border-color 0.3s ease;
 }
 
-.upload-zone:hover:not(.upload-zone--disabled) {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-  background: var(--Primary-Primary-50, #fff5eb);
+.file-upload__zone.drag-over {
+  border: 1px dashed var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-50, #fef8f1);
+}
+
+/* ── Drop zone info ─────────────────────────────────────────── */
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  align-self: stretch;
 }
 
-.upload-zone--dragging {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-  background: var(--Primary-Primary-50, #fff5eb);
+.info .title {
+  color: var(--Gray-Gray-700, #32394d);
+  text-align: center;
+  font-size: var(--font-size-m, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: 150%;
 }
 
-.upload-zone--disabled {
-  background: var(--Gray-Gray-50, #f7f8fa);
-  cursor: not-allowed;
-  opacity: 0.6;
+.info.size-small-upload {
+  flex-direction: row;
+  gap: var(--Size-3, 12px);
 }
 
-.upload-zone__text {
-  margin: 0;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
+.info-desc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-1, 4px);
 }
 
-.upload-zone__hint {
-  margin: 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-400, #858ea6);
+.description {
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+  font-size: var(--font-size-s, 14px);
+  font-style: normal;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
 }
 
 .upload-hidden {
   display: none;
 }
 
-.upload-error {
-  margin: 0;
-  font-size: var(--font-size-xs, 10px);
+/* ── Lista de archivos ──────────────────────────────────────── */
+.files-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3, 12px);
+}
+
+/* ── Grid list ──────────────────────────────────────────────── */
+.grid-list {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-5, 24px);
+  align-self: stretch;
+  flex-wrap: wrap;
+}
+
+/* ── Add image button (grid) ────────────────────────────────── */
+.add-img {
+  display: flex;
+  height: 88px;
+  width: 88px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  align-self: stretch;
+  border-radius: var(--Border-2, 8px);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  cursor: pointer;
+}
+
+.add-img:hover {
+  transform: scale(1.1);
+}
+
+.add-img .icon {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--Border-3, 12px);
+  background: var(--Gray-Gray-100, #e6eaf2);
+}
+
+.add-img .text {
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+  font-size: var(--font-size-xs, 12px);
+  font-style: normal;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
+}
+
+/* ── Card list ──────────────────────────────────────────────── */
+.card-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+  align-self: stretch;
+  width: 100%;
+}
+
+/* ── Card view ──────────────────────────────────────────────── */
+.file-card {
+  display: flex;
+  padding: var(--Size-4, 16px);
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  align-self: stretch;
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  background: var(--Neutral-White, #ffffff);
+  width: 100%;
+}
+
+.file-card.error {
+  border-color: var(--Error-Error-300, #f89b9c);
+  background: var(--Error-Error-50, #fef0f0);
+}
+
+/* Preview imagen en card */
+.file-card .preview-wrapper {
+  width: 34px;
+  height: 34px;
+  position: relative;
+  display: inline-block;
+  border-radius: var(--Border-2, 8px);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.file-card .preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.file-card .preview.uploading {
+  filter: blur(2px);
+}
+
+.file-card .overlay-icon {
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--Border-3, 12px);
+  background: var(--Neutral-White, #ffffff);
+}
+
+/* Ícono de documento */
+.file-card .file-icon {
+  flex-shrink: 0;
+}
+
+/* Info en card */
+.file-card .info-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--Size-2, 8px);
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.file-card .file-name {
+  overflow: hidden;
+  color: var(--Gray-Gray-600, #475066);
+  text-overflow: ellipsis;
+  font-size: var(--font-size-xs, 12px);
+  font-style: normal;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.file-card .file-name.error-text {
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+.file-card .progress-bar-container {
+  width: 100%;
+  height: 4px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.file-card .progress-bar {
+  height: 100%;
+  border-radius: 4.5px;
+  background: var(--Primary-Primary-500, #f49a3d);
+  transition: width 0.3s ease;
+}
+
+.file-card .error-label {
   color: var(--Error-Error-500, #f46a6b);
+  font-size: 11px;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
+}
+
+/* Eliminando en card */
+.file-card .deleting-container {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+}
+
+.file-card .deleting-label {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-xs, 12px);
+  font-style: italic;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
+}
+
+/* Acciones card */
+.file-card .delete,
+.file-card .preview-image {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+  border-radius: var(--Border-2, 8px);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.file-card .delete:hover,
+.file-card .preview-image:hover {
+  transform: scale(1.1);
+}
+
+/* Confirmar eliminar en card */
+.file-card .delete-confirm {
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 12px);
+  font-style: normal;
+  font-weight: var(--font-weight-medium, 500);
+  line-height: 150%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  flex: 1 0 0;
+}
+
+.file-card .delete-confirm .message {
+  flex: 1;
+}
+
+.file-card .delete-confirm .actions {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-2, 8px);
+}
+
+/* ── Grid view ──────────────────────────────────────────────── */
+.img-view {
+  display: flex;
+  width: 88px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--Size-2, 8px);
+}
+
+.img-view .preview-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 88px;
+  height: 88px;
+}
+
+.img-view .preview-container {
+  border-radius: var(--Border-2, 8px);
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.img-view .preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.img-view .preview.uploading {
+  filter: blur(2px);
+}
+
+.img-view .overlay-icon {
+  width: 24px;
+  height: 24px;
+  padding: 6px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--Border-3, 12px);
+  background: var(--Neutral-White, #ffffff);
+}
+
+.img-view .delete {
+  position: absolute;
+  top: -12px;
+  right: -9px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--Border-3, 12px);
+  background: var(--Neutral-White, #ffffff);
+  cursor: pointer;
+}
+
+.img-view .delete:hover {
+  transform: scale(1.1);
+}
+
+.img-view.error .preview-wrapper {
+  border: 2px solid var(--Error-Error-500, #f46a6b);
+  border-radius: var(--Border-2, 8px);
+}
+
+.img-view.deleting .preview-wrapper {
+  opacity: 0.4;
+}
+
+.img-view .progress-bar-container {
+  width: 100%;
+  height: 4px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.img-view .progress-bar {
+  height: 100%;
+  border-radius: 4.5px;
+  background: var(--Primary-Primary-500, #f49a3d);
+  transition: width 0.3s ease;
+}
+
+.img-view .deleting-info {
+  width: 100%;
+  text-align: center;
+}
+
+.img-view .deleting-info-label {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-xxs, 10px);
+  font-style: italic;
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 150%;
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media screen and (max-width: 599px) {
+  .info.size-small-upload {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .file-card .file-name {
+    max-width: 100px;
+  }
 }