@keenmate/pure-admin-theme-audi 1.5.0 → 1.5.1

package/dist/audi.css

@@ -3121,6 +3121,26 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 2.4rem 1.6rem;
 }
 
+.pa-card--ghost {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.pa-card--ghost:hover {
+  box-shadow: none !important;
+}
+
+.pa-card--ghost .pa-card__header {
+  background: transparent !important;
+  border-bottom: none !important;
+}
+
+.pa-card--ghost .pa-card__footer {
+  background: transparent !important;
+  border-top: none !important;
+}
+
 .pa-card--color-1 {
   border-color: var(--pa-color-1);
 }
@@ -8979,6 +8999,12 @@ web-multiselect {
 .pa-table-card:has(.pa-detail-view) .pa-table-card__body {
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.pa-table-card:has(.pa-detail-view) .pa-table-card__body .pa-detail-view {
+  flex: 1;
 }
 
 .pa-table-card__header {
@@ -12777,6 +12803,10 @@ code {
   position: relative;
 }
 
+.pa-detail-panel__content--bordered {
+  border-block: 1px solid var(--pa-border-color);
+}
+
 .pa-detail-panel--overlay .pa-detail-panel__content {
   position: absolute;
   top: 0;
@@ -12877,6 +12907,7 @@ code {
 .pa-detail-panel__body {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 1.2rem 1.6rem;
 }
 
@@ -13233,6 +13264,10 @@ code {
   margin-top: 2.4rem;
 }
 
+.pa-fields-container {
+  container-type: inline-size;
+}
+
 .pa-fields {
   display: flex;
   flex-direction: column;
@@ -13258,6 +13293,11 @@ code {
   grid-template-columns: repeat(4, 1fr);
 }
 
+@container (max-width: 768px) {
+  .pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
 @media (max-width: 768px) {
   .pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
     grid-template-columns: 1fr;
@@ -13348,6 +13388,11 @@ code {
   min-width: 0;
 }
 
+@container (max-width: 768px) {
+  .pa-fields--row {
+    flex-direction: column;
+  }
+}
 @media (max-width: 768px) {
   .pa-fields--row {
     flex-direction: column;
@@ -13436,6 +13481,427 @@ code {
   padding-inline-start: 0;
 }
 
+.pa-fields--linear {
+  gap: 0.8rem;
+  border-inline-start: none;
+  padding-inline-start: 0;
+}
+
+.pa-fields--linear .pa-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 1.2rem;
+  font-size: 1.4rem;
+  line-height: 1.5;
+  min-height: 2.8rem;
+}
+
+.pa-fields--linear .pa-field__label {
+  flex: 0 0 10rem;
+  font-size: 1.4rem;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 1;
+  font-weight: 400;
+  color: var(--pa-text-color-2);
+}
+
+.pa-fields--linear .pa-field__value {
+  flex: 1;
+  min-width: 0;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--pa-text-color-1);
+}
+
+.pa-fields--chips {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.6rem 1.4rem;
+  padding: 0.4rem 0;
+  border-inline-start: none;
+  padding-inline-start: 0;
+}
+
+.pa-fields--chips .pa-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.4rem;
+}
+
+.pa-fields--chips .pa-field__label {
+  font-size: 1.4rem;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 1;
+  font-weight: 400;
+  color: var(--pa-text-color-2);
+}
+
+.pa-fields--chips .pa-field__value {
+  background: rgba(128, 128, 128, 0.1);
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  padding: 0.2rem 0.8rem;
+  border-radius: 4px;
+  font-size: 1.3rem;
+}
+
+.pa-fields--chips .pa-field__value--success {
+  background: var(--pa-success-bg-light, rgba(0, 200, 80, 0.12));
+  color: var(--pa-success-color, #28a745);
+}
+
+.pa-fields--chips .pa-field__value--warning {
+  background: var(--pa-warning-bg-light, rgba(255, 165, 0, 0.12));
+  color: var(--pa-warning-color, #e68a00);
+}
+
+.pa-fields--chips .pa-field__value--danger {
+  background: var(--pa-danger-bg-light, rgba(255, 0, 0, 0.12));
+  color: var(--pa-danger-color, #dc3545);
+}
+
+.pa-desc-container {
+  container-type: inline-size;
+}
+
+.pa-desc-table {
+  display: grid;
+  grid-template-columns: repeat(3, auto 1fr);
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.pa-desc-table--cols-2 {
+  grid-template-columns: repeat(2, auto 1fr);
+}
+
+.pa-desc-table--fixed {
+  grid-template-columns: repeat(3, minmax(0, var(--label-width, 14rem)) minmax(0, 1fr));
+}
+
+.pa-desc-table--fixed.pa-desc-table--cols-2 {
+  grid-template-columns: repeat(2, minmax(0, var(--label-width, 14rem)) minmax(0, 1fr));
+}
+
+.pa-desc-table__label, .pa-desc-table__value {
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  font-size: 1.4rem;
+  line-height: 1.5;
+}
+
+.pa-desc-table__label {
+  background: rgba(128, 128, 128, 0.06);
+  color: var(--pa-text-color-2);
+  font-weight: 400;
+  white-space: nowrap;
+  border-inline-end: 1px solid var(--pa-border-color);
+}
+
+.pa-desc-table__label::after {
+  content: ":";
+  margin-inline-start: 2px;
+}
+
+.pa-desc-table__value {
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  border-inline-end: 1px solid var(--pa-border-color);
+  min-width: 0;
+}
+
+.pa-desc-table__value--full {
+  grid-column: 2/-1;
+}
+
+.pa-desc-table--middle .pa-desc-table__label, .pa-desc-table--middle .pa-desc-table__value {
+  display: flex;
+  align-items: center;
+}
+
+.pa-desc-table--label-end .pa-desc-table__label {
+  text-align: end;
+  justify-content: flex-end;
+}
+
+.pa-desc-table--label-center .pa-desc-table__label {
+  text-align: center;
+  justify-content: center;
+}
+
+.pa-desc-table--truncate .pa-desc-table__label, .pa-desc-table--truncate .pa-desc-table__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@container (max-width: 768px) {
+  .pa-desc-table, .pa-desc-table--cols-2 {
+    grid-template-columns: auto 1fr;
+  }
+  .pa-desc-table--fixed, .pa-desc-table--fixed.pa-desc-table--cols-2 {
+    grid-template-columns: minmax(0, var(--label-width, 14rem)) minmax(0, 1fr);
+  }
+  .pa-desc-table .pa-desc-table__value--full {
+    grid-column: 2;
+  }
+}
+@media (max-width: 768px) {
+  .pa-desc-table, .pa-desc-table--cols-2 {
+    grid-template-columns: auto 1fr;
+  }
+  .pa-desc-table--fixed, .pa-desc-table--fixed.pa-desc-table--cols-2 {
+    grid-template-columns: minmax(0, var(--label-width, 14rem)) minmax(0, 1fr);
+  }
+  .pa-desc-table .pa-desc-table__value--full {
+    grid-column: 2;
+  }
+}
+.pa-dot-leaders {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.pa-dot-leaders__item {
+  display: flex;
+  align-items: baseline;
+  padding: 0.6rem 0;
+}
+
+.pa-dot-leaders__item--total {
+  margin-top: 0.4rem;
+  padding-top: 0.8rem;
+  border-top: 2px solid var(--pa-text-color-1);
+}
+
+.pa-dot-leaders__label {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--pa-text-color-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.pa-dot-leaders__leader {
+  flex: 1;
+  border-bottom: 2px dotted var(--pa-border-color);
+  margin: 0 0.8rem;
+  margin-bottom: 0.25em;
+  min-width: 2rem;
+}
+
+.pa-dot-leaders__value {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  white-space: nowrap;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.pa-dot-leaders__item--total .pa-dot-leaders__label {
+  font-weight: 700;
+  color: var(--pa-text-color-1);
+}
+
+.pa-dot-leaders__item--total .pa-dot-leaders__value {
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.pa-prop-card {
+  border: 1px solid var(--pa-border-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.pa-prop-card__header {
+  padding: 1rem 1.6rem;
+  font-weight: 600;
+  font-size: 1.3rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pa-text-color-2);
+  background: rgba(128, 128, 128, 0.04);
+  border-bottom: 1px solid var(--pa-border-color);
+}
+
+.pa-prop-card__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.6rem;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
+  font-size: 1.4rem;
+  gap: 1.6rem;
+}
+
+.pa-prop-card__row:last-child {
+  border-bottom: none;
+}
+
+.pa-prop-card__label {
+  color: var(--pa-text-color-2);
+  font-weight: 400;
+  flex-shrink: 0;
+}
+
+.pa-prop-card__value {
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  text-align: end;
+  overflow-wrap: anywhere;
+}
+
+.pa-prop-card__value--bold {
+  font-weight: 700;
+}
+
+.pa-banded-container {
+  container-type: inline-size;
+}
+
+.pa-banded {
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.pa-banded__row {
+  display: flex;
+  border-bottom: 1px solid var(--pa-border-color);
+  font-size: 1.4rem;
+  align-items: stretch;
+}
+
+.pa-banded__row:last-child {
+  border-bottom: none;
+}
+
+.pa-banded__label {
+  flex: 0 0 auto;
+  width: 14rem;
+  padding: 0.8rem 1.2rem;
+  background: rgba(128, 128, 128, 0.06);
+  color: var(--pa-text-color-2);
+  font-weight: 500;
+  border-inline-end: 1px solid var(--pa-border-color);
+  display: flex;
+  align-items: flex-start;
+}
+
+.pa-banded__value {
+  flex: 1;
+  padding: 0.8rem 1.2rem;
+  color: var(--pa-text-color-1);
+  font-weight: 400;
+  display: flex;
+  align-items: flex-start;
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.pa-banded--narrow .pa-banded__label {
+  width: 10rem;
+}
+
+.pa-banded--wide .pa-banded__label {
+  width: 20rem;
+}
+
+.pa-banded--middle .pa-banded__label, .pa-banded--middle .pa-banded__value {
+  align-items: center;
+}
+
+.pa-banded--label-end .pa-banded__label {
+  justify-content: flex-end;
+}
+
+.pa-banded--label-center .pa-banded__label {
+  justify-content: center;
+}
+
+.pa-banded--truncate .pa-banded__label, .pa-banded--truncate .pa-banded__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@container (max-width: 768px) {
+  .pa-banded__row {
+    flex-direction: column;
+  }
+  .pa-banded .pa-banded__label {
+    width: auto !important;
+    border-inline-end: none;
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-banded .pa-banded__label, .pa-banded .pa-banded__value {
+    display: block;
+  }
+}
+@media (max-width: 768px) {
+  .pa-banded__row {
+    flex-direction: column;
+  }
+  .pa-banded .pa-banded__label {
+    width: auto !important;
+    border-inline-end: none;
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-banded .pa-banded__label, .pa-banded .pa-banded__value {
+    display: block;
+  }
+}
+.pa-accent-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 0.8rem;
+}
+
+.pa-accent-grid__item {
+  padding: 0.8rem 1.2rem;
+  padding-inline-start: 1.4rem;
+  border-inline-start: 3px solid var(--pa-accent, #3b82f6);
+}
+
+.pa-accent-grid__item--success {
+  border-inline-start-color: var(--pa-success-color, #28a745);
+}
+
+.pa-accent-grid__item--warning {
+  border-inline-start-color: var(--pa-warning-color, #e68a00);
+}
+
+.pa-accent-grid__item--danger {
+  border-inline-start-color: var(--pa-danger-color, #dc3545);
+}
+
+.pa-accent-grid__item--info {
+  border-inline-start-color: var(--pa-info-color, #17a2b8);
+}
+
+.pa-accent-grid__label {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--pa-text-color-2);
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pa-accent-grid__value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  line-height: 1.2;
+}
+
 /* ========================================
    Utility Components
    Font utilities, compact mode, component showcase
@@ -16249,6 +16715,26 @@ html.font-size-xlarge {
   min-height: 50rem !important;
 }
 
+.minhr-60 {
+  min-height: 60rem !important;
+}
+
+.minhr-70 {
+  min-height: 70rem !important;
+}
+
+.minhr-80 {
+  min-height: 80rem !important;
+}
+
+.minhr-90 {
+  min-height: 90rem !important;
+}
+
+.minhr-100 {
+  min-height: 100rem !important;
+}
+
 .maxhr-1 {
   max-height: 1rem !important;
 }
@@ -16893,6 +17379,10 @@ html.font-size-xlarge {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
 }
 
+.pa-cq {
+  container-type: inline-size;
+}
+
 .pa-btn--color-1 {
   font-weight: 700;
   color: #ffffff !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-theme-audi",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Audi theme for Pure Admin - includes dark and light variants",
   "style": "dist/audi.css",
   "exports": {