@dropi/ui-components 1.0.0

package/src/components-source/dropi-table/dropi-table.component.scss

@@ -0,0 +1,506 @@
+.cell-container {
+  height: 80px;
+}
+
+.table-container {
+  border-radius: var(--Border-3);
+  padding: 0 var(--Size-4) var(--Size-4) var(--Size-4);
+  background-color: var(--Neutral-White);
+  .search-container {
+    margin-block: var(--Size-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--Size-4);
+    .table-title {
+      padding-block: var(--Size-2);
+    }
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  .width-actions {
+    width: calc(100% - 104px);
+  }
+
+  .width-no-actions {
+    width: 100%;
+  }
+
+  .custom-table {
+    width: auto;
+    min-width: 100%;
+    border-collapse: collapse;
+    .headers-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--Size-1);
+      img {
+        width: 24px;
+        height: 24px;
+      }
+      .headers {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+
+        span {
+          font-weight: var(--font-weight-bold);
+          color: var(--Gray-Gray-600);
+          font-size: var(--font-size-xs);
+          text-align: center;
+        }
+
+        .order-icons {
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          app-icon {
+            height: 6px;
+            display: flex;
+          }
+        }
+      }
+    }
+
+    th,
+    td {
+      position: relative;
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-xs);
+      color: var(--Gray-Gray-700);
+      padding: 0.5rem;
+    }
+
+    th::after,
+    td::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: var(--Gray-Gray-100);
+    }
+
+    td.actions,
+    th.actions {
+      position: absolute;
+      background-color: var(--Neutral-White);
+      right: 0;
+      width: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    td {
+      height: 80px;
+      min-width: 100px;
+      padding: var(--Size-3);
+      font-weight: var(--font-weight-regular);
+      font-size: var(--font-size-s);
+      .action-icon {
+        cursor: pointer;
+      }
+
+      .cell-content {
+        display: inline-block;
+        width: 100%;
+      }
+    }
+
+    .short-actions {
+      display: flex;
+      gap: var(--Size-2);
+      align-items: center;
+      justify-content: center;
+    }
+
+    .action-button {
+      .actions-menu {
+        position: absolute;
+        top: 0;
+        right: 80px;
+        padding: var(--Size-2);
+        border-radius: var(--Border-2);
+        background-color: var(--Neutral-White);
+        box-shadow: var(--Shadow-medium);
+        z-index: 10;
+
+        &.fade-in {
+          animation: fadeIn 0.3s ease-in-out forwards;
+        }
+      }
+
+      .action-item {
+        padding: var(--Size-2);
+        font-size: var(--font-size-xs);
+        color: var(--Gray-Gray-600);
+        height: 45px;
+        width: 190px;
+        display: flex;
+        gap: var(--Size-4);
+        align-items: center;
+        justify-content: left;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--Gray-Gray-50);
+        }
+      }
+    }
+    th {
+      height: 55px;
+    }
+
+    th.sortable {
+      user-select: none;
+      cursor: pointer;
+    }
+
+    tr.table-row:hover {
+      background-color: var(--Gray-Gray-50);
+      transition: background-color 0.3s ease;
+    }
+
+    tr.table-row:hover td:last-child {
+      background-color: var(--Gray-Gray-50);
+      transition: background-color 0.3s ease;
+    }
+
+    .actions-header {
+      width: 60px;
+      user-select: none;
+    }
+
+    .checkbox-header {
+      padding: var(--Size-3);
+    }
+  }
+
+  .pagination {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    button {
+      padding: 0.5rem;
+    }
+
+    .page-size-selector {
+      display: flex;
+      gap: 5px;
+      align-items: baseline;
+
+      label {
+        font-weight: var(--font-weight-regular);
+        font-size: var(--font-size-xs);
+        color: var(--Gray-Gray-700);
+      }
+
+      select {
+        width: fit-content;
+        height: 29px;
+        border-radius: var(--Border-2);
+        padding: var(--Size-1);
+        border: 1px solid var(--Gray-Gray-200);
+        color: var(--Gray-Gray-500);
+        background: var(--Neutral-White);
+      }
+    }
+  }
+}
+
+.table-labels {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+  white-space: nowrap;
+}
+
+.date-label {
+  display: inline-flex;
+  flex-direction: column;
+  span {
+    font-weight: var(--font-weight-regular);
+    font-weight: var(--font-weight-regular);
+    color: var(--Gray-Gray-600);
+    white-space: nowrap;
+  }
+}
+
+.carrier-label {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--Size-1);
+  img {
+    width: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  span {
+    color: var(--Gray-Gray-600);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-s);
+  }
+}
+
+.text-icon-label {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--Size-2);
+  span {
+    color: var(--Gray-Gray-600);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-s);
+  }
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.conteiner-tex-link {
+  display: flex;
+  // justify-content: space-between;
+  gap: var(--Border-2);
+}
+
+.low-opacity {
+  opacity: 0.5;
+}
+
+.highlight-column {
+  background: var(--Primary-Primary-50);
+  border: none !important;
+}
+
+.text-link-label {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  gap: var(--Size-1);
+
+  span {
+    color: var(--Gray-Gray-600);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-s);
+  }
+
+  a {
+    color: var(--Info-Info-500);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-s);
+  }
+}
+
+app-icon {
+  display: flex;
+  align-items: flex-start;
+}
+
+.image-label {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  .img-container {
+    display: flex;
+    width: 24px;
+    padding-bottom: var(--Size-1, 4px);
+    align-items: center;
+    gap: 10px;
+    img {
+      border-radius: 60px;
+      display: flex;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 0;
+    }
+  }
+
+  span {
+    overflow: hidden;
+    color: var(--Gray-600, #475066);
+    text-overflow: ellipsis;
+  }
+}
+
+.container {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.child-arrow-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.child-arrow-btn .fa-chevron-down {
+  transition: transform 0.2s;
+}
+.child-arrow-btn .fa-chevron-down.rotated {
+  transform: rotate(180deg);
+}
+
+.sub-row-container {
+  background-color: var(--light-gray);
+}
+
+.sub-table-container {
+  overflow: hidden;
+  max-height: 0;
+  height: auto;
+  font-weight: var(--font-weight-medium);
+  gap: var(--Size-3);
+  font-size: var(--font-size-s);
+  cursor: pointer;
+  opacity: 0;
+  padding: 0 var(--Size-3) 0 var(--Size-8);
+}
+
+.sub-table-container.expanded {
+  height: 200px;
+  opacity: 1;
+}
+
+.sub-row td:first-child {
+  padding-left: 2rem !important;
+}
+
+.status-label {
+  display: inline-flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--Size-1);
+
+  .status-description {
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-s);
+    color: var(--Gray-Gray-600);
+  }
+
+  .status-dot {
+    display: flex;
+    gap: var(--Size-2);
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .status-text {
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-xs);
+    color: var(--Gray-Gray-700);
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .dot-low {
+    background-color: var(--Success-Success-500);
+  }
+  .dot-medium {
+    background-color: var(--Warning-Warning-500);
+  }
+  .dot-high {
+    background-color: var(--Error-Error-500);
+  }
+}
+
+.loading-container {
+  height: 25%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-table {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex: 1 0 0;
+  align-self: stretch;
+  min-height: 400px;
+
+  .message-container {
+    display: flex;
+    width: 420px;
+    padding: var(--Size-4, 16px);
+    flex-direction: column;
+    align-items: center;
+    gap: var(--Size-4, 16px);
+    img {
+      height: 60px;
+      width: auto;
+    }
+    .message {
+      color: var(--Gray-500, #69738c);
+      text-align: center;
+    }
+  }
+}
+
+.flag-container {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3);
+}
+
+.currency-color-mode {
+  color: var(--label-color-table, inherit);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.custom-table.has-checkbox {
+  th.checkbox-header,
+  td:first-child {
+    width: fit-content;
+    min-width: fit-content;
+    max-width: fit-content;
+    text-align: center;
+    padding: 8px !important;
+  }
+
+  /* Centra el checkbox visualmente */
+  th.checkbox-header app-dropi-checkbox,
+  td:first-child app-dropi-checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+  }
+}
+
+/* Cuando NO hay checkbox, se mantiene el diseño normal */
+.custom-table:not(.has-checkbox) {
+  th,
+  td {
+    min-width: 100px;
+    padding: var(--Size-3);
+  }
+}