@natec/mef-dev-ui-kit 20.1.16 → 20.1.18

package/src/lib/styles/pg/vendor/md-datatable.scss

@@ -1,4 +1,5 @@
 @use '../../vars.scss' as *;
+@use '../../fonts.scss' as *;
 @use 'sass:color' as color;
 
 // MD Datatable Theme
@@ -324,6 +325,347 @@
   }
 }
 
+// ═══════════════════════════════════════════════════════════════════════════
+// MD Cards Grid Table Style
+// Makes md-grid look like ngx-datatable
+// ═══════════════════════════════════════════════════════════════════════════
+//
+// USAGE:
+// <md-grid class="md-grid-table" ...>
+// <md-grid class="md-grid-table zebra-white" ...>
+// <md-grid class="md-grid-table zebra-grey" ...>
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+.md-grid-table {
+  // ═════════════════════════════════════════════════════════════════════════
+  // HOST STYLES
+  // ═════════════════════════════════════════════════════════════════════════
+
+  &.md-grid,
+  .md-grid {
+    @extend .body-6;
+    background: tansparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // HEADER
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-header {
+    background: $Light-Gray-2;
+    border: none;
+    box-shadow: none;
+    width: 100%;
+    min-width: fit-content;
+  }
+
+  .md-grid-header-inner {
+    padding: 0;
+    width: 100%;
+    min-width: fit-content;
+  }
+
+  .md-grid-header-cell {
+    padding: 13px 8px 10px 8px;
+    background: transparent;
+    font-family: $font-header;
+    font-size: 14px;
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $Dark-Gray-2;
+    vertical-align: middle;
+
+    &:not(:first-child) {
+      border-left: 2px solid $White;
+    }
+
+    &.sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    &.sort-active {
+      color: $Dark-Gray-2;
+    }
+  }
+
+  .md-grid-header-cell-label {
+    line-height: 1.2;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // SORT ICONS
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-sort-icon {
+    color: $Light-Gray-1;
+
+    &.md-grid-sort-asc,
+    &.md-grid-sort-desc {
+      color: $Dark-Gray-2;
+    }
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // BODY
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-body {
+    padding: 0;
+    background: transparent;
+    gap: 0 !important;
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .md-grid-group-rows {
+    gap: 0 !important;
+    width: 100%;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // CARD (ROW) - Table row style
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-card {
+    background: $White;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    width: 100%;
+    min-width: fit-content;
+
+    // Hover effect same as ngx-datatable
+    &:hover {
+      background: color.mix($Light-Gray-2, $White, 30%);
+      box-shadow: none;
+      transform: none;
+    }
+
+    // Active/selected row
+    &.md-grid-card-editing {
+      background: color.mix($Link, $White, 10%) !important;
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // CELL
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-cell {
+    padding: 8px;
+    @extend .body-6;
+    color: $Black-Color;
+    background: transparent;
+    max-height: 30px;
+    border: none;
+  }
+
+  .md-grid-cell-value {
+    display: block;
+    width: 100%;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // ACTIONS CELL
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-actions-cell {
+    border-left: none;
+    background: transparent;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // FOOTER / PAGINATION
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-footer {
+    background: $Light-Gray-2;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 8px;
+    font-size: 12px;
+    color: $Dark-Gray-2;
+  }
+
+  .md-grid-pager {
+    gap: 2px;
+  }
+
+  .md-grid-pager-btn {
+    min-width: 24px;
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 4px;
+    border: none;
+    background: transparent;
+    color: $Dark-Gray-2;
+    font-size: 12px;
+
+    &:hover:not(:disabled) {
+      background: transparent;
+      color: $Red;
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+
+  .md-grid-pager-info {
+    padding: 0 8px;
+    font-weight: 400;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // GROUP HEADER
+  // ═════════════════════════════════════════════════════════════════════════
+
+  .md-grid-group-header {
+    background: color.mix($Light-Gray-2, $White, 50%);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 12px 20px;
+    margin-bottom: 0;
+    border-radius: 0;
+    font-weight: 600;
+    font-size: 13px;
+    color: $Dark-Gray-1;
+  }
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // RESPONSIVE
+  // ═════════════════════════════════════════════════════════════════════════
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+
+    .md-grid-header-cell {
+      padding: 10px 12px;
+      font-size: 10px;
+    }
+
+    .md-grid-cell {
+      padding: 12px;
+      font-size: 12px;
+    }
+
+    .md-grid-footer {
+      flex-direction: column;
+      gap: 8px;
+      align-items: flex-start;
+      padding: 8px 12px;
+    }
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════
+// Modifier: zebra-white (white header, zebra rows)
+// ═════════════════════════════════════════════════════════════════════════
+
+.md-grid-table.zebra-white {
+  .md-grid-header {
+    background: $White;
+  }
+
+  .md-grid-header-cell {
+    &:not(:first-child) {
+      border-left: 2px solid $Light-Gray-3;
+    }
+  }
+
+  .md-grid-card {
+    &:nth-child(odd) {
+      background: transparent;
+    }
+
+    &:nth-child(even) {
+      background: $White;
+    }
+
+    &:hover {
+      background: color.mix($Light-Gray-2, $White, 30%) !important;
+    }
+  }
+
+  .md-grid-group-rows {
+    .md-grid-card {
+      &:nth-child(odd) {
+        background: transparent;
+      }
+
+      &:nth-child(even) {
+        background: $White;
+      }
+
+      &:hover {
+        background: color.mix($Light-Gray-2, $White, 30%) !important;
+      }
+    }
+  }
+
+  .md-grid-footer {
+    background: $White;
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════
+// Modifier: zebra-grey (grey header, zebra with grey)
+// Same as md-datatable-style.zebra-grey
+// ═════════════════════════════════════════════════════════════════════════
+
+.md-grid-table.zebra-grey {
+  .md-grid-card {
+    // White rows (odd)
+    &:nth-child(odd) {
+      background: $White;
+
+      &:hover {
+        background: color.mix($Light-Gray-2, $White, 30%) !important;
+      }
+    }
+
+    // Grey rows (even)
+    &:nth-child(even) {
+      background: $Light-Gray-2;
+
+      &:hover {
+        background: color.mix($Light-Gray-2, $White, 30%) !important;
+      }
+    }
+  }
+
+  .md-grid-group-rows {
+    .md-grid-card {
+      &:nth-child(odd) {
+        background: $White;
+
+        &:hover {
+          background: color.mix($Light-Gray-2, $White, 30%) !important;
+        }
+      }
+
+      &:nth-child(even) {
+        background: $Light-Gray-2;
+
+        &:hover {
+          background: color.mix($Light-Gray-2, $White, 30%) !important;
+        }
+      }
+    }
+  }
+}
+
 // Dark background variant
 .bg-dark .md-datatable-style,
 .dark-mode .md-datatable-style,