@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -1,125 +1,125 @@
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
-@use '../variables' as *;
-
-// 10px rem base for intuitive sizing (1rem = 10px)
-// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
-html {
-  font-size: 10px;
-}
-
-// Reset and base styles
-* {
-  box-sizing: border-box;
-}
-
-// Standard HTML element spacing (using framework variables)
-// Headings
-h1, h2, h3, h4, h5, h6 {
-  margin: $heading-margin-top 0 $heading-margin-bottom 0;
-  padding: 0;
-}
-
-// Paragraphs
-p {
-  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
-  padding: 0;
-}
-
-// Lists - styled lists (default browser styling)
-ul, ol {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-  padding-inline-start: $list-padding-left; // RTL: flips to right
-
-  li {
-    margin-bottom: $list-item-margin-bottom;
-  }
-}
-
-// Lists - unstyled (for navigation, etc.)
-ul.unstyled, ol.unstyled {
-  list-style: none;
-  padding-inline-start: 0; // RTL: flips to right
-
-  li {
-    margin-bottom: 0;
-  }
-}
-
-// Definition lists
-dl {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-}
-
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-// Blockquote
-blockquote {
-  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
-  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
-}
-
-// Pre/Code blocks
-pre {
-  overflow-x: auto;
-}
-
-// Horizontal rule
-hr {
-  margin: $hr-margin-top 0 $hr-margin-bottom 0;
-}
-
-// Figure
-figure {
-  margin: $figure-margin-top 0 $figure-margin-bottom 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--base-font-family);
-  font-size: 1.6rem; // 16px default text (with 10px rem base)
-  color: var(--pa-text-color-1);
-  background-color: var(--pa-main-bg);
-  line-height: $line-height-base;
-  overflow-x: hidden; // Hide horizontal scrollbar when sidebar slides out on mobile
-  overflow-y: scroll; // Always show vertical scrollbar gutter to prevent layout shift
-
-  // Background pattern for constrained layouts
-  &::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-      radial-gradient(circle at $bg-pattern-circle-1-x $bg-pattern-circle-1-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop),
-      radial-gradient(circle at $bg-pattern-circle-2-x $bg-pattern-circle-2-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop);
-    pointer-events: none;
-    z-index: -1;
-  }
-}
-
-// Sticky sidebar mode: Prevent body scroll, let containers handle it
-body.sidebar-sticky {
-  overflow: hidden;
-  height: 100vh;
-}
-
-// Ensure form elements and labels inherit theme font and size instead of browser defaults
-button,
-input,
-select,
-textarea,
-label {
-  font-family: inherit;
-  font-size: inherit;
-}
+/* ========================================
+   Reset and Base Styles
+   ======================================== */
+@use '../variables' as *;
+
+// 10px rem base for intuitive sizing (1rem = 10px)
+// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
+html {
+  font-size: 10px;
+}
+
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+
+// Standard HTML element spacing (using framework variables)
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin-top 0 $heading-margin-bottom 0;
+  padding: 0;
+}
+
+// Paragraphs
+p {
+  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
+  padding: 0;
+}
+
+// Lists - styled lists (default browser styling)
+ul, ol {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+  padding-inline-start: $list-padding-left; // RTL: flips to right
+
+  li {
+    margin-bottom: $list-item-margin-bottom;
+  }
+}
+
+// Lists - unstyled (for navigation, etc.)
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0; // RTL: flips to right
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+// Definition lists
+dl {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+// Blockquote
+blockquote {
+  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
+  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
+}
+
+// Pre/Code blocks
+pre {
+  overflow-x: auto;
+}
+
+// Horizontal rule
+hr {
+  margin: $hr-margin-top 0 $hr-margin-bottom 0;
+}
+
+// Figure
+figure {
+  margin: $figure-margin-top 0 $figure-margin-bottom 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem; // 16px default text (with 10px rem base)
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
+  line-height: $line-height-base;
+  overflow-x: hidden; // Hide horizontal scrollbar when sidebar slides out on mobile
+  overflow-y: scroll; // Always show vertical scrollbar gutter to prevent layout shift
+
+  // Background pattern for constrained layouts
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      radial-gradient(circle at $bg-pattern-circle-1-x $bg-pattern-circle-1-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop),
+      radial-gradient(circle at $bg-pattern-circle-2-x $bg-pattern-circle-2-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop);
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+// Sticky sidebar mode: Prevent body scroll, let containers handle it
+body.sidebar-sticky {
+  overflow: hidden;
+  height: 100vh;
+}
+
+// Ensure form elements and labels inherit theme font and size instead of browser defaults
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}

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

@@ -7,10 +7,11 @@
 // Buttons
 .pa-btn {
   display: inline-block;
+  vertical-align: middle;
   height: $btn-height-base;
   padding: $btn-padding-v $btn-padding-h;
   border: $btn-border-width solid transparent;
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
   text-align: center;
@@ -20,9 +21,6 @@
   background: none;
   color: var(--pa-text-color-1);
 
-  &:hover {
-    transform: translateY($btn-hover-lift);
-  }
 
   &--primary {
     background-color: var(--pa-accent);
@@ -151,8 +149,8 @@
 
   &--outline-secondary {
     background-color: transparent;
-    border-color: var(--pa-btn-secondary-bg);
-    color: var(--pa-btn-secondary-bg);
+    border-color: var(--pa-btn-secondary-outline-color);
+    color: var(--pa-btn-secondary-outline-color);
 
     &:hover {
       background-color: var(--pa-btn-secondary-bg);
@@ -463,22 +461,20 @@
 .pa-btn-split {
   position: relative;
   display: inline-flex;
+  border-radius: var(--pa-border-radius);
+  overflow: hidden;
 
-// Joined buttons with no gap
+  // All buttons inside: no individual radius — container handles corners
   .pa-btn {
     border-radius: 0;
 
     &:first-child {
-      border-start-start-radius: $border-radius;
-      border-end-start-radius: $border-radius;
       border-inline-end: none;
     }
   }
 
   // Toggle button (chevron) - fixed square width
   &__toggle {
-    border-start-end-radius: $border-radius;
-    border-end-end-radius: $border-radius;
     border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
     padding-inline: 0;
     display: inline-flex;
@@ -505,24 +501,28 @@
   // Dropdown menu (moved to body and positioned by Floating UI)
   &__menu {
     display: none;
-    flex-direction: column;
-    gap: $spacing-xs;
     position: fixed;
     top: 0;
     left: 0;
     width: max-content;
     background: var(--pa-card-bg);
     border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
+    border-radius: var(--pa-border-radius);
     box-shadow: $shadow-2xl;
     z-index: $z-index-dropdown;
-    padding: $spacing-xs 0;
+    overflow: hidden;
 
     &--open {
-      display: flex;
+      display: block;
     }
   }
 
+  &__menu-inner {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+  }
+
   // Menu items
   &__item {
     display: flex;
@@ -552,6 +552,21 @@
     }
   }
 
+  // Row with item + action button (e.g. delete)
+  &__item-row {
+    display: flex;
+    align-items: center;
+
+    .pa-btn-split__item {
+      flex: 1;
+    }
+
+    > .pa-btn:last-child {
+      flex-shrink: 0;
+      margin-inline-end: $spacing-sm;
+    }
+  }
+
   &__item-icon {
     width: $sidebar-icon-size;
     min-width: $sidebar-icon-size;

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

@@ -1,152 +1,152 @@
-/* ========================================
-   Callout Components
-   Documentation-style callouts with left border accent
-   For tips, notes, warnings in content areas
-   ======================================== */
-@use '../variables' as *;
-
-// Callout base
-.pa-callout {
-  position: relative;
-  padding: $card-footer-padding-v $card-footer-padding-h;
-  margin-bottom: $spacing-base;
-  border-inline-start: $callout-border-width solid var(--pa-border-color); // RTL: flips to right
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  background-color: var(--pa-card-bg);
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-
-  // Callout variants
-  &--primary {
-    border-inline-start-color: var(--pa-accent);
-    background-color: rgba($accent-color, $opacity-subtle);
-  }
-
-  &--secondary {
-    border-inline-start-color: var(--pa-text-color-2);
-    background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
-  }
-
-  &--success {
-    border-inline-start-color: var(--pa-success-bg);
-    background-color: var(--pa-success-bg-subtle);
-  }
-
-  &--danger {
-    border-inline-start-color: var(--pa-danger-bg);
-    background-color: var(--pa-danger-bg-subtle);
-  }
-
-  &--warning {
-    border-inline-start-color: var(--pa-warning-bg);
-    background-color: var(--pa-warning-bg-subtle);
-  }
-
-  &--info {
-    border-inline-start-color: var(--pa-info-bg);
-    background-color: var(--pa-info-bg-subtle);
-  }
-
-  // Theme color slot variants (color-1 through color-9)
-  @for $i from 1 through 9 {
-    &--color-#{$i} {
-      border-inline-start-color: var(--pa-color-#{$i});
-      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 10%, transparent);
-    }
-  }
-
-  // Callout sizes
-  &--sm {
-    padding: $spacing-sm $spacing-md;
-    font-size: $font-size-xs;
-  }
-
-  &--lg {
-    padding: $spacing-lg $spacing-xl;
-    font-size: $font-size-base;
-  }
-
-  // Callout components
-  &__icon {
-    float: left;
-    margin-inline-end: $spacing-sm; // RTL: flips to margin-left
-
-    [dir="rtl"] & {
-      float: right;
-    }
-
-    font-size: $font-size-lg;
-    line-height: 1;
-  }
-
-  &__heading {
-    margin: 0 0 $spacing-sm 0;
-    font-size: $font-size-base;
-    font-weight: $font-weight-semibold;
-  }
-
-  &__content {
-    // Clearfix for floated icon
-    &::after {
-      content: '';
-      display: table;
-      clear: both;
-    }
-  }
-
-  // Remove margin from last child
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  // Paragraphs inside callouts
-  p {
-    margin: 0 0 $spacing-sm 0;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // Lists inside callouts
-  ul, ol {
-    margin: $spacing-sm 0;
-    padding-inline-start: $spacing-lg; // RTL: flips to right
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // Code inside callouts
-  code {
-    background-color: rgba(0, 0, 0, $opacity-subtle);
-    padding: 0.1em 0.3em;
-    border-radius: $border-radius-sm;
-    font-size: 0.9em;
-  }
-
-  // Links styling
-  a {
-    color: inherit;
-    text-decoration: underline;
-    font-weight: $font-weight-medium;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // Headings inside callouts
-  h1, h2, h3, h4, h5, h6 {
-    color: inherit;
-    margin-top: 0;
-  }
-}
+/* ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   For tips, notes, warnings in content areas
+   ======================================== */
+@use '../variables' as *;
+
+// Callout base
+.pa-callout {
+  position: relative;
+  padding: $card-footer-padding-v $card-footer-padding-h;
+  margin-bottom: $spacing-base;
+  border-inline-start: $callout-border-width solid var(--pa-border-color); // RTL: flips to right
+  border-radius: var(--pa-border-radius);
+  font-size: $font-size-sm;
+  background-color: var(--pa-card-bg);
+
+  // Remove margins when first/last child in card body
+  .pa-card__body &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body &:last-child {
+    margin-bottom: 0;
+  }
+
+  // Callout variants
+  &--primary {
+    border-inline-start-color: var(--pa-accent);
+    background-color: rgba($accent-color, $opacity-subtle);
+  }
+
+  &--secondary {
+    border-inline-start-color: var(--pa-text-color-2);
+    background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
+  }
+
+  &--success {
+    border-inline-start-color: var(--pa-success-bg);
+    background-color: var(--pa-success-bg-subtle);
+  }
+
+  &--danger {
+    border-inline-start-color: var(--pa-danger-bg);
+    background-color: var(--pa-danger-bg-subtle);
+  }
+
+  &--warning {
+    border-inline-start-color: var(--pa-warning-bg);
+    background-color: var(--pa-warning-bg-subtle);
+  }
+
+  &--info {
+    border-inline-start-color: var(--pa-info-bg);
+    background-color: var(--pa-info-bg-subtle);
+  }
+
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      border-inline-start-color: var(--pa-color-#{$i});
+      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 10%, transparent);
+    }
+  }
+
+  // Callout sizes
+  &--sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-xs;
+  }
+
+  &--lg {
+    padding: $spacing-lg $spacing-xl;
+    font-size: $font-size-base;
+  }
+
+  // Callout components
+  &__icon {
+    float: left;
+    margin-inline-end: $spacing-sm; // RTL: flips to margin-left
+
+    [dir="rtl"] & {
+      float: right;
+    }
+
+    font-size: $font-size-lg;
+    line-height: 1;
+  }
+
+  &__heading {
+    margin: 0 0 $spacing-sm 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__content {
+    // Clearfix for floated icon
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
+  // Remove margin from last child
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // Paragraphs inside callouts
+  p {
+    margin: 0 0 $spacing-sm 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Lists inside callouts
+  ul, ol {
+    margin: $spacing-sm 0;
+    padding-inline-start: $spacing-lg; // RTL: flips to right
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Code inside callouts
+  code {
+    background-color: rgba(0, 0, 0, $opacity-subtle);
+    padding: 0.1em 0.3em;
+    border-radius: var(--pa-border-radius-sm);
+    font-size: 0.9em;
+  }
+
+  // Links styling
+  a {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Headings inside callouts
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+    margin-top: 0;
+  }
+}