@keenmate/pure-admin-core 1.0.0-rc03 → 1.0.0-rc05

package/src/scss/core-components/_cards.scss

@@ -7,8 +7,8 @@
 // Cards
 .pa-card {
   background: var(--pa-card-bg);
-  border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius-lg;
+  border: $card-border-width solid var(--pa-border-color);
+  border-radius: $card-border-radius;
   margin-bottom: $spacing-base;
   box-shadow: $shadow-sm;
   transition: box-shadow $transition-fast $easing-snappy;
@@ -22,8 +22,8 @@
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
-    border-top-left-radius: $border-radius-lg;
-    border-top-right-radius: $border-radius-lg;
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
     border-bottom: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-header-bg);
     display: flex;
@@ -60,6 +60,12 @@
       color: var(--pa-text-primary);
       font-size: $font-size-base;
     }
+
+    // Buttons in card headers - negative margin to prevent header height growth
+    .pa-btn {
+      margin-top: -0.25rem;
+      margin-bottom: -0.25rem;
+    }
   }
 
   &__title {
@@ -241,6 +247,36 @@
       display: block;
     }
   }
+
+  // Inline tabs in header (for side-by-side card alignment)
+  &__tabs--inline {
+    display: flex;
+    gap: $spacing-xs;
+    margin: -$card-header-padding-v 0; // Negative margin to fill header height
+    border-bottom: none;
+    background: none;
+
+    .pa-card__tab {
+      padding: $card-tab-inline-padding-v $card-tab-inline-padding-h;
+      border: none;
+      border-radius: $border-radius;
+      font-size: $font-size-sm;
+      background: transparent;
+      color: var(--pa-text-secondary);
+      cursor: pointer;
+      transition: all $transition-fast $easing-snappy;
+
+      &:hover {
+        background-color: rgba($accent-color, $card-tab-hover-opacity);
+        color: var(--pa-text-primary);
+      }
+
+      &--active {
+        background: var(--pa-accent);
+        color: var(--pa-btn-primary-text);
+      }
+    }
+  }
 }
 
 // Clickable cards (anchor-wrapped)

package/src/scss/core-components/_profile.scss

@@ -88,7 +88,7 @@
   &__header {
     padding: $spacing-lg;
     background-color: var(--pa-header-bg);
-    border-bottom: 1px solid var(--pa-text-primary);
+    border-bottom: 1px solid var(--pa-border-color);
     display: flex;
     align-items: flex-start;
     gap: $spacing-base;
@@ -115,7 +115,7 @@
 
   &__avatar-icon {
     font-size: $font-size-4xl;
-    color: $accent-color;
+    color: var(--pa-accent);
   }
 
   &__info {
@@ -186,7 +186,7 @@
 
   &__body {
     flex: 1;
-    padding: $spacing-lg;
+    padding: $spacing-lg 0; // Vertical only - items handle horizontal
     display: flex;
     flex-direction: column;
     gap: $profile-section-gap;
@@ -231,7 +231,10 @@
   &__nav-icon {
     font-size: $font-size-base;
     width: $sidebar-icon-size;
-    text-align: center;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__actions {
@@ -239,11 +242,23 @@
     flex-direction: column;
     gap: $spacing-md;
     margin-top: auto;
+    padding: 0 $profile-panel-content-padding;
+  }
+
+  // Fixed footer - always visible at bottom, content scrolls above
+  &__footer {
+    flex-shrink: 0;
+    padding: $spacing-lg; // Matches header padding
+    border-top: $border-width-base solid var(--pa-border-color);
+    background-color: var(--pa-card-bg);
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
   }
 
   // Tabs section
   &__tabs {
-    padding: 0 $spacing-lg;
+    padding: 0 $profile-panel-content-padding;
     border-bottom: $border-width-base solid var(--pa-border-color);
     background-color: var(--pa-header-bg);
 
@@ -258,7 +273,7 @@
 
       &:hover {
         color: var(--pa-header-text);
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: var(--pa-accent-light);
       }
 
       &--active {
@@ -270,10 +285,6 @@
 
   // Favorites section
   &__favorites {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-sm;
-
     ul {
       list-style: none;
       margin: 0;
@@ -312,7 +323,10 @@
   &__favorite-icon {
     font-size: $font-size-base;
     width: $sidebar-icon-size;
-    text-align: center;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__favorite-label {
@@ -325,7 +339,7 @@
     margin-left: auto;
     background: none;
     border: none;
-    padding: $spacing-sm;
+    padding: $spacing-xs;
     color: var(--pa-text-secondary);
     cursor: pointer;
     border-radius: $border-radius;
@@ -348,7 +362,7 @@
 
   &__favorites-add {
     margin-top: auto;
-    padding-top: $spacing-md;
+    padding: $spacing-md $profile-panel-content-padding 0;
   }
 }
 

package/src/scss/core-components/_tables.scss

@@ -40,6 +40,7 @@
   td {
     color: var(--pa-text-primary);
     background-color: var(--pa-table-bg);
+    height: $table-cell-height;
 
     // Buttons in table cells - negative margin to prevent row height growth
     .pa-btn {
@@ -62,28 +63,51 @@
     }
   }
 
-  // 2x spacing variant - comfortable padding (calculated from base)
-  &--2x {
-    th,
+  // Size variants - synchronized with button/input sizes
+  &--xs {
+    th, td {
+      padding: $table-padding-xs-v $table-padding-xs-h;
+    }
     td {
-      padding: ($table-padding-base-v * $table-spacing-2x-multiplier)
-        ($table-padding-base-h * $table-spacing-2x-multiplier);
+      height: $table-cell-height-xs;
     }
   }
 
-  // 3x spacing variant - spacious padding (calculated from base)
-  &--3x {
-    th,
+  &--sm {
+    th, td {
+      padding: $table-padding-sm-v $table-padding-sm-h;
+    }
     td {
-      padding: ($table-padding-base-v * $table-spacing-3x-multiplier)
-        ($table-padding-base-h * $table-spacing-3x-multiplier);
+      height: $table-cell-height-sm;
+    }
+  }
+
+  &--lg {
+    th, td {
+      padding: $table-padding-lg-v $table-padding-lg-h;
+    }
+    td {
+      height: $table-cell-height-lg;
+    }
+  }
+
+  &--xl {
+    th, td {
+      padding: $table-padding-xl-v $table-padding-xl-h;
+    }
+    td {
+      height: $table-cell-height-xl;
     }
   }
 
   // Hover effects
-  tbody tr {
-    // Setup for hover accent border
-    @if $table-hover-accent-width > 0 {
+  @if $table-hover-accent-width > 0 {
+    // Header alignment - add padding-left instead of border
+    th:first-child {
+      padding-left: $table-hover-accent-width + $table-padding-base-h;
+    }
+
+    tbody tr {
       border-#{$table-hover-accent-position}: #{$table-hover-accent-width} solid transparent;
       transition: border-color $transition-normal $easing-smooth;
     }

package/src/scss/core-components/_tabs.scss

@@ -275,6 +275,22 @@
     }
   }
 
+  // Border top variant - active indicator on top instead of bottom
+  &--border-top {
+    border-bottom: none;
+    border-top: $border-width-base solid var(--pa-border-color);
+
+    .pa-tabs__item {
+      border-bottom: none;
+      border-top: $border-width-medium solid transparent;
+
+      &--active {
+        border-top-color: $accent-color;
+        border-bottom-color: transparent;
+      }
+    }
+  }
+
   // Size variants
   &--sm {
     .pa-tabs__item {
@@ -320,6 +336,125 @@
         padding-top: $spacing-md;
       }
     }
+
+    // Card variant - tabs act as card header (same height as pa-card__header)
+    &--card {
+      position: relative; // For dropdown positioning
+      border: $card-border-width solid var(--pa-border-color);
+      border-radius: $card-border-radius;
+      background-color: var(--pa-card-bg);
+      box-shadow: $shadow-sm;
+
+      .pa-tabs {
+        height: $card-header-min-height;
+        padding: $card-header-padding-v $card-header-padding-h;
+        background: var(--pa-card-header-bg);
+        border-bottom: $border-width-base solid var(--pa-border-color);
+        box-sizing: border-box;
+        border-top-left-radius: $card-border-radius;
+        border-top-right-radius: $card-border-radius;
+        margin-bottom: 0;
+        align-items: center;
+        gap: $spacing-xs;
+        flex-wrap: nowrap;
+        overflow: visible; // Allow dropdown to overflow
+      }
+
+      .pa-tabs__content {
+        padding: $card-body-padding-v $card-body-padding-h;
+      }
+
+      .pa-tabs__panel {
+        padding-top: 0;
+      }
+
+      // Overflow toggle for tabs that don't fit
+      .pa-tabs__overflow {
+        position: relative;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .pa-tabs__overflow-toggle {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $card-header-min-height;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pa-text-secondary);
+        cursor: pointer;
+        transition: all $transition-fast $easing-snappy;
+        border-left: $border-width-base solid var(--pa-border-color);
+        margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
+        box-sizing: content-box;
+        height: $card-header-min-height;
+
+        &:hover {
+          background-color: rgba($accent-color, $card-tab-hover-opacity);
+          color: var(--pa-text-primary);
+        }
+
+        // When overflow contains the active tab
+        &--has-active {
+          color: var(--pa-accent);
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: $border-width-medium;
+            background: var(--pa-accent);
+          }
+        }
+
+        i {
+          font-size: $font-size-sm;
+        }
+      }
+
+      .pa-tabs__overflow-menu {
+        position: absolute;
+        top: $card-header-min-height;
+        right: 0;
+        min-width: 15rem;
+        background: var(--pa-card-bg);
+        border: $card-border-width solid var(--pa-border-color);
+        border-radius: $border-radius;
+        box-shadow: $shadow-lg;
+        z-index: $z-index-dropdown;
+        display: none;
+        flex-direction: column;
+        padding: $spacing-xs 0;
+
+        &--open {
+          display: flex;
+        }
+
+        .pa-tabs__item {
+          padding: $spacing-sm $spacing-base;
+          border: none;
+          border-bottom: none;
+          border-radius: 0;
+          text-align: left;
+          white-space: nowrap;
+
+          &:hover {
+            background-color: rgba($accent-color, $card-tab-hover-opacity);
+          }
+
+          &--active {
+            background-color: rgba($accent-color, 0.1);
+            border-bottom: none;
+          }
+        }
+      }
+    }
   }
 
   // Vertical tabs layout wrapper (for proper spacing with content)
@@ -352,87 +487,4 @@
     }
   }
 
-  // Fixed width tab items - multipliers of 1rem
-  .pa-tabs__item {
-    &--w-1x {
-      min-width: 1rem;
-    }
-
-    &--w-2x {
-      min-width: 2rem;
-    }
-
-    &--w-3x {
-      min-width: 3rem;
-    }
-
-    &--w-4x {
-      min-width: 4rem;
-    }
-
-    &--w-5x {
-      min-width: 5rem;
-    }
-
-    &--w-6x {
-      min-width: 6rem;
-    }
-
-    &--w-7x {
-      min-width: 7rem;
-    }
-
-    &--w-8x {
-      min-width: 8rem;
-    }
-
-    &--w-9x {
-      min-width: 9rem;
-    }
-
-    &--w-10x {
-      min-width: 10rem;
-    }
-
-    // Fixed height tab items - multipliers of 1rem
-    &--h-1x {
-      min-height: 1rem;
-    }
-
-    &--h-2x {
-      min-height: 2rem;
-    }
-
-    &--h-3x {
-      min-height: 3rem;
-    }
-
-    &--h-4x {
-      min-height: 4rem;
-    }
-
-    &--h-5x {
-      min-height: 5rem;
-    }
-
-    &--h-6x {
-      min-height: 6rem;
-    }
-
-    &--h-7x {
-      min-height: 7rem;
-    }
-
-    &--h-8x {
-      min-height: 8rem;
-    }
-
-    &--h-9x {
-      min-height: 9rem;
-    }
-
-    &--h-10x {
-      min-height: 10rem;
-    }
-  }
 }

package/src/scss/core-components/_tooltips.scss

@@ -237,6 +237,29 @@
     border-left-color: var(--pa-btn-danger-bg);
   }
 
+  // Numbered color variants (color-1 through color-9)
+  // These use theme-customizable colors from --pa-color-* CSS variables
+  @for $i from 1 through 9 {
+    &--color-#{$i}::before {
+      background-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}::after {
+      border-top-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--right::after {
+      border-top-color: transparent;
+      border-right-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--bottom::after {
+      border-top-color: transparent;
+      border-bottom-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--left::after {
+      border-top-color: transparent;
+      border-left-color: var(--pa-color-#{$i});
+    }
+  }
+
   // Smart positioning - collision detection adjustments
   // Applied dynamically by JavaScript based on viewport boundaries
 
@@ -390,6 +413,7 @@
     font-size: $font-size-sm;
     line-height: $line-height-base;
     color: var(--pa-text-primary);
+    text-align: left; // Reset inherited alignment for rich content
 
     p {
       margin: 0 0 $spacing-sm 0;
@@ -454,6 +478,15 @@
     min-width: $popover-lg-min-width;
     max-width: $popover-lg-max-width;
   }
+
+  // Alignment variants
+  &--center &__body {
+    text-align: center;
+  }
+
+  &--right &__body {
+    text-align: right;
+  }
 }
 
 // ========================================
@@ -500,4 +533,11 @@
     background-color: var(--pa-btn-danger-bg);
     color: var(--pa-btn-danger-text);
   }
+
+  // Numbered color variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &.pa-tooltip--color-#{$i} {
+      background-color: var(--pa-color-#{$i});
+    }
+  }
 }

package/src/scss/core-components/badges/_badge-base.scss

@@ -102,27 +102,6 @@
     border-color: var(--pa-btn-dark-bg);
   }
 
-  // Fixed-width badges with ellipsis
-  &--w-1x { min-width: 1.6rem; max-width: 1.6rem; }
-  &--w-2x { min-width: 3.2rem; max-width: 3.2rem; }
-  &--w-3x { min-width: 4.8rem; max-width: 4.8rem; }
-  &--w-4x { min-width: 6.4rem; max-width: 6.4rem; }
-  &--w-5x { min-width: 8rem; max-width: 8rem; }
-  &--w-6x { min-width: 9.6rem; max-width: 9.6rem; }
-  &--w-7x { min-width: 11.2rem; max-width: 11.2rem; }
-  &--w-8x { min-width: 12.8rem; max-width: 12.8rem; }
-  &--w-9x { min-width: 14.4rem; max-width: 14.4rem; }
-  &--w-10x { min-width: 16rem; max-width: 16rem; }
-
-  // Apply ellipsis to fixed-width badges
-  &[class*="--w-"] {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-
   // Left-side ellipsis for paths/hierarchies where end is important
   &--ellipsis-left {
     direction: rtl;

package/src/scss/core-components/forms/_form-inputs.scss

@@ -6,6 +6,7 @@
 
 .pa-input {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $input-padding-v $input-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -23,6 +24,7 @@
 
 .pa-select {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $select-padding-v $select-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -61,27 +63,31 @@
   }
 }
 
-// Input Sizes
+// Input Sizes - heights aligned with $base-input-size-* variables
 .pa-input--xs,
 .pa-select--xs {
+  height: #{$base-input-size-xs-height}rem;
   padding: $input-padding-xs-v $input-padding-h;
   font-size: $font-size-xs;
 }
 
 .pa-input--sm,
 .pa-select--sm {
+  height: #{$base-input-size-sm-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-sm;
 }
 
 .pa-input--lg,
 .pa-select--lg {
+  height: #{$base-input-size-lg-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-base;
 }
 
 .pa-input--xl,
 .pa-select--xl {
+  height: #{$base-input-size-xl-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-lg;
 }

package/src/scss/themes/audi-light.scss

@@ -90,7 +90,7 @@ $table-header-bg: $audi-gray-100;
 $table-hover-bg: $audi-gray-50;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color;
 $table-hover-accent-position: left;
 
@@ -200,6 +200,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.1);
 // Set body font
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // Import core styles with overridden variables
 @import '../core';
 @import '../utilities';

package/src/scss/themes/audi.scss

@@ -107,7 +107,7 @@ $table-header-bg: $audi-black;
 $table-hover-bg: $audi-gray-light;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color; // Uses the red #ff0000
 $table-hover-accent-position: left;
 
@@ -220,6 +220,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.25);
 // 4. Override font family SCSS variable after fonts are defined
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // 5. Import core framework styles (will use all our SCSS variables)
 @import '../core';
 
@@ -256,8 +260,6 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 }
 
 .pa-card {
-  border-radius: 0 !important; // Sharp edges
-  border: $border-width-medium solid $border-color;
   box-shadow: 0 $spacing-xs ($spacing-sm * 2) rgba($audi-black, 0.8);
 }