@keenmate/pure-admin-core 2.3.1 → 2.3.3

package/src/scss/core-components/layout/_layout-container.scss

@@ -1,168 +1,168 @@
-/* ========================================
-   Layout Container
-   Main layout wrapper, content areas, sticky/scroll modes
-   ======================================== */
-@use '../../variables' as *;
-
-// Layout wrapper - applied to body for mode-specific classes
-body.pa-layout--sticky {
-  height: 100vh;
-  overflow: hidden;
-}
-
-// Layout Container - centered, starts below navbar
-.pa-layout {
-  max-width: 100%;
-  margin: $header-height auto 0;
-  background-color: var(--pa-main-bg);
-  overflow: visible; // Allow tooltips to escape
-  display: flex;
-  flex-direction: column;
-}
-
-// Constrained widths - controlled by body class
-body.pa-container-sm .pa-layout {
-  max-width: $layout-container-sm;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pa-border-color);
-  border-right: $border-width-base solid var(--pa-border-color);
-}
-
-body.pa-container-md .pa-layout {
-  max-width: $layout-container-md;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pa-border-color);
-  border-right: $border-width-base solid var(--pa-border-color);
-}
-
-body.pa-container-lg .pa-layout {
-  max-width: $layout-container-lg;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pa-border-color);
-  border-right: $border-width-base solid var(--pa-border-color);
-}
-
-body.pa-container-xl .pa-layout {
-  max-width: $layout-container-xl;
-  box-shadow: $shadow-xl;
-  border-left: $border-width-base solid var(--pa-border-color);
-  border-right: $border-width-base solid var(--pa-border-color);
-}
-
-body.pa-container-2xl .pa-layout {
-  max-width: $layout-container-2xl;
-  box-shadow: $shadow-xl;
-  border-left: $border-width-base solid var(--pa-border-color);
-  border-right: $border-width-base solid var(--pa-border-color);
-}
-
-// Sticky mode - fixed height
-body.pa-layout--sticky .pa-layout {
-  height: calc(100vh - #{$header-height}); // Full viewport minus top margin
-}
-
-// Scroll mode - minimum height
-body:not(.pa-layout--sticky) .pa-layout {
-  min-height: calc(100vh - #{$header-height}); // Ensure footer reaches bottom
-}
-
-// Layout inner container - flex wrapper for sidebar + content
-.pa-layout__inner {
-  display: flex;
-  width: 100%;
-  flex: 1; // Take available space, pushing footer to bottom
-}
-
-// Sticky mode - inner container takes full height minus footer
-body.pa-layout--sticky .pa-layout__inner {
-  flex: 1;
-  overflow: hidden; // Prevent overflow, let content wrapper scroll
-}
-
-// Content wrapper - wraps main content only
-.pa-layout__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // Always scrollable
-}
-
-// Main content area
-.pa-layout__main {
-  flex: 1;
-  padding: $spacing-base;
-  container-type: inline-size;
-}
-
-// Footer - outside inner, sibling to inner
-.pa-layout__footer {
-  min-height: $footer-height;
-  background-color: var(--pa-footer-bg);
-  border-top: $border-width-base solid var(--pa-footer-border-color);
-  display: flex;
-  align-items: center;
-  padding: $spacing-xs $spacing-base;
-  flex-shrink: 0; // Don't shrink footer
-  gap: $spacing-base;
-}
-
-// Footer sections - Start/Center/End layout (mirrors navbar structure)
-.pa-footer__start {
-  display: flex;
-  align-items: center;
-  gap: $spacing-base;
-  flex-shrink: 0;
-}
-
-.pa-footer__center {
-  flex: 1;
-  min-width: 0; // Allow shrinking for ellipsis
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pa-footer__end {
-  display: flex;
-  align-items: center;
-  gap: $spacing-base;
-  flex-shrink: 0;
-
-  &--vertical {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: $spacing-xs;
-  }
-}
-
-// Responsive footer - stack sections on mobile
-@media (max-width: $mobile-breakpoint) {
-  .pa-layout__footer {
-    flex-wrap: wrap;
-    min-height: auto;
-    padding: $spacing-sm $spacing-base;
-  }
-
-  .pa-footer__start,
-  .pa-footer__center,
-  .pa-footer__end {
-    flex-shrink: 1;
-    min-width: 0;
-  }
-
-  .pa-footer__start {
-    flex: 1 1 auto;
-  }
-
-  .pa-footer__center {
-    display: none; // Hide empty center on mobile
-  }
-
-  .pa-footer__end {
-    flex: 0 1 auto;
-
-    &--vertical {
-      align-items: flex-end;
-    }
-  }
-}
+/* ========================================
+   Layout Container
+   Main layout wrapper, content areas, sticky/scroll modes
+   ======================================== */
+@use '../../variables' as *;
+
+// Layout wrapper - applied to body for mode-specific classes
+body.pa-layout--sticky {
+  height: 100vh;
+  overflow: hidden;
+}
+
+// Layout Container - centered, starts below navbar
+.pa-layout {
+  max-width: 100%;
+  margin: $header-height auto 0;
+  background-color: var(--pa-main-bg);
+  overflow: visible; // Allow tooltips to escape
+  display: flex;
+  flex-direction: column;
+}
+
+// Constrained widths - controlled by body class
+body.pa-container-sm .pa-layout {
+  max-width: $layout-container-sm;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pa-border-color);
+  border-right: $border-width-base solid var(--pa-border-color);
+}
+
+body.pa-container-md .pa-layout {
+  max-width: $layout-container-md;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pa-border-color);
+  border-right: $border-width-base solid var(--pa-border-color);
+}
+
+body.pa-container-lg .pa-layout {
+  max-width: $layout-container-lg;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pa-border-color);
+  border-right: $border-width-base solid var(--pa-border-color);
+}
+
+body.pa-container-xl .pa-layout {
+  max-width: $layout-container-xl;
+  box-shadow: $shadow-xl;
+  border-left: $border-width-base solid var(--pa-border-color);
+  border-right: $border-width-base solid var(--pa-border-color);
+}
+
+body.pa-container-2xl .pa-layout {
+  max-width: $layout-container-2xl;
+  box-shadow: $shadow-xl;
+  border-left: $border-width-base solid var(--pa-border-color);
+  border-right: $border-width-base solid var(--pa-border-color);
+}
+
+// Sticky mode - fixed height
+body.pa-layout--sticky .pa-layout {
+  height: calc(100vh - #{$header-height}); // Full viewport minus top margin
+}
+
+// Scroll mode - minimum height
+body:not(.pa-layout--sticky) .pa-layout {
+  min-height: calc(100vh - #{$header-height}); // Ensure footer reaches bottom
+}
+
+// Layout inner container - flex wrapper for sidebar + content
+.pa-layout__inner {
+  display: flex;
+  width: 100%;
+  flex: 1; // Take available space, pushing footer to bottom
+}
+
+// Sticky mode - inner container takes full height minus footer
+body.pa-layout--sticky .pa-layout__inner {
+  flex: 1;
+  overflow: hidden; // Prevent overflow, let content wrapper scroll
+}
+
+// Content wrapper - wraps main content only
+.pa-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // Always scrollable
+}
+
+// Main content area
+.pa-layout__main {
+  flex: 1;
+  padding: $spacing-base;
+  container-type: inline-size;
+}
+
+// Footer - outside inner, sibling to inner
+.pa-layout__footer {
+  min-height: $footer-height;
+  background-color: var(--pa-footer-bg);
+  border-top: $border-width-base solid var(--pa-footer-border-color);
+  display: flex;
+  align-items: center;
+  padding: $spacing-xs $spacing-base;
+  flex-shrink: 0; // Don't shrink footer
+  gap: $spacing-base;
+}
+
+// Footer sections - Start/Center/End layout (mirrors navbar structure)
+.pa-footer__start {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pa-footer__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa-footer__end {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: $spacing-xs;
+  }
+}
+
+// Responsive footer - stack sections on mobile
+@media (max-width: $mobile-breakpoint) {
+  .pa-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: $spacing-sm $spacing-base;
+  }
+
+  .pa-footer__start,
+  .pa-footer__center,
+  .pa-footer__end {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .pa-footer__start {
+    flex: 1 1 auto;
+  }
+
+  .pa-footer__center {
+    display: none; // Hide empty center on mobile
+  }
+
+  .pa-footer__end {
+    flex: 0 1 auto;
+
+    &--vertical {
+      align-items: flex-end;
+    }
+  }
+}

package/src/scss/core-components/layout/_layout-responsive.scss

@@ -1,99 +1,99 @@
-/* ========================================
-   Layout Responsive
-   Mobile and tablet media queries
-   ======================================== */
-@use '../../variables' as *;
-
-// Responsive Design - Mobile and Tablet
-@media (max-width: $mobile-breakpoint) {
-  // Mobile: Auto-hide sidebar, content takes full width
-  body:not(.sidebar-visible) {
-    .pa-layout__sidebar {
-      width: 0;
-      opacity: 0;
-      overflow: hidden;
-      border-inline-end: none; // RTL: flips to left
-    }
-
-    // Override icon-collapse mode on mobile - sidebar should be fully hidden
-    .pa-layout__sidebar--icon-collapse {
-      width: 0 !important;
-    }
-  }
-
-  // Mobile: Fullscreen sidebar overlay when visible
-  .sidebar-visible {
-    // Use fixed positioning for mobile overlay
-    .pa-layout__inner {
-      position: relative;
-    }
-
-    .pa-layout__sidebar {
-      position: fixed;
-      top: $header-height;
-      inset-inline-start: 0; // RTL: flips to right
-      bottom: 0;
-      width: $mobile-sidebar-width;
-      z-index: 1050;
-      background-color: var(--pa-sidebar-bg);
-      opacity: 1;
-      overflow-y: auto;
-    }
-
-    // Override icon-collapse mode on mobile - show full width overlay
-    .pa-layout__sidebar--icon-collapse {
-      width: $mobile-sidebar-width !important;
-      overflow-y: auto !important;
-
-      .pa-sidebar__label {
-        opacity: 1 !important;
-        width: auto !important;
-        overflow: visible !important;
-        position: static !important;
-      }
-    }
-
-    // Add backdrop overlay
-    &::before {
-      content: "";
-      position: fixed;
-      top: $header-height;
-      inset-inline: 0; // RTL: covers full width
-      bottom: 0;
-      background-color: $mobile-backdrop-bg;
-      z-index: 1040;
-    }
-  }
-
-  // Adjust header for mobile
-  .pa-header {
-    gap: $spacing-sm;
-
-    &__nav {
-      display: none; // Hide navigation links on mobile
-    }
-
-    &__title h2 {
-      font-size: $font-size-sm;
-    }
-  }
-
-  // Hide theme switcher label on mobile
-  .theme-switcher {
-    label {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: $tablet-breakpoint) and (min-width: $tablet-breakpoint-min) {
-  // Tablet: Reduce sidebar width
-  .pa-layout__sidebar {
-    width: $sidebar-width-tablet;
-
-    &__nav ul li a {
-      padding: $spacing-sm $spacing-md;
-      font-size: $font-size-sm;
-    }
-  }
-}
+/* ========================================
+   Layout Responsive
+   Mobile and tablet media queries
+   ======================================== */
+@use '../../variables' as *;
+
+// Responsive Design - Mobile and Tablet
+@media (max-width: $mobile-breakpoint) {
+  // Mobile: Auto-hide sidebar, content takes full width
+  body:not(.sidebar-visible) {
+    .pa-layout__sidebar {
+      width: 0;
+      opacity: 0;
+      overflow: hidden;
+      border-inline-end: none; // RTL: flips to left
+    }
+
+    // Override icon-collapse mode on mobile - sidebar should be fully hidden
+    .pa-layout__sidebar--icon-collapse {
+      width: 0 !important;
+    }
+  }
+
+  // Mobile: Fullscreen sidebar overlay when visible
+  .sidebar-visible {
+    // Use fixed positioning for mobile overlay
+    .pa-layout__inner {
+      position: relative;
+    }
+
+    .pa-layout__sidebar {
+      position: fixed;
+      top: $header-height;
+      inset-inline-start: 0; // RTL: flips to right
+      bottom: 0;
+      width: $mobile-sidebar-width;
+      z-index: 1050;
+      background-color: var(--pa-sidebar-bg);
+      opacity: 1;
+      overflow-y: auto;
+    }
+
+    // Override icon-collapse mode on mobile - show full width overlay
+    .pa-layout__sidebar--icon-collapse {
+      width: $mobile-sidebar-width !important;
+      overflow-y: auto !important;
+
+      .pa-sidebar__label {
+        opacity: 1 !important;
+        width: auto !important;
+        overflow: visible !important;
+        position: static !important;
+      }
+    }
+
+    // Add backdrop overlay
+    &::before {
+      content: "";
+      position: fixed;
+      top: $header-height;
+      inset-inline: 0; // RTL: covers full width
+      bottom: 0;
+      background-color: $mobile-backdrop-bg;
+      z-index: 1040;
+    }
+  }
+
+  // Adjust header for mobile
+  .pa-header {
+    gap: $spacing-sm;
+
+    &__nav {
+      display: none; // Hide navigation links on mobile
+    }
+
+    &__title h2 {
+      font-size: $font-size-sm;
+    }
+  }
+
+  // Hide theme switcher label on mobile
+  .theme-switcher {
+    label {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: $tablet-breakpoint) and (min-width: $tablet-breakpoint-min) {
+  // Tablet: Reduce sidebar width
+  .pa-layout__sidebar {
+    width: $sidebar-width-tablet;
+
+    &__nav ul li a {
+      padding: $spacing-sm $spacing-md;
+      font-size: $font-size-sm;
+    }
+  }
+}