@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,464 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-/* ── 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-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);
-}
-
-/* ── 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;
-  align-items: center;
-  gap: var(--Size-6, 32px);
-  align-self: stretch;
-  border-radius: var(--Border-2, 8px);
-  border: 1px dashed var(--Gray-Gray-200, #c3c9d9);
-  background: var(--Neutral-White, #ffffff);
-  text-align: center;
-  transition: border-color 0.3s ease;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.info.size-small-upload {
-  flex-direction: row;
-  gap: var(--Size-3, 12px);
-}
-
-.info-desc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Size-1, 4px);
-}
-
-.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;
-}
-
-/* ── 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;
-  }
-}