@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/core-components/layout/_sidebar.scss

@@ -1,234 +1,234 @@
-/* ========================================
-   Sidebar Component
-   Sidebar navigation with nested submenus
-   ======================================== */
-@use '../../variables' as *;
-
-// Local CSS variables for sidebar (runtime state, modified by JS for resize)
-:root {
-  --pa-local-sidebar-width: #{$sidebar-width};
-  --pa-local-sidebar-min-width: 18rem;
-  --pa-local-sidebar-max-width: 50rem;
-}
-
-// Sidebar layout element - width in :where() for low specificity (utility classes can override)
-:where(.pa-layout__sidebar) {
-  width: var(--pa-local-sidebar-width);
-}
-
-.pa-layout__sidebar {
-  background-color: var(--pa-sidebar-bg);
-  border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to border-left
-  flex-shrink: 0;
-  position: relative;
-}
-
-// Resize handle on sidebar edge
-.pa-sidebar-resize {
-  position: absolute;
-  top: 0;
-  inset-inline-end: 0; // RTL: flips to left
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  z-index: 100;
-
-  // Visual indicator on hover
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-    width: 2px;
-    height: 100%;
-    background-color: transparent;
-    transition: background-color $transition-fast $easing-snappy;
-  }
-
-  &:hover::after,
-  &--active::after {
-    background-color: var(--pa-accent);
-  }
-}
-
-// Disable text selection during resize
-body.pa-sidebar-resizing {
-  cursor: ew-resize !important;
-  user-select: none;
-
-  * {
-    cursor: ew-resize !important;
-  }
-}
-
-// Sticky mode - sidebar scrolls
-body.pa-layout--sticky .pa-layout__sidebar {
-  overflow-y: auto;
-  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
-  overflow-x: visible; // Allow tooltips to escape (right in LTR, left in RTL)
-}
-
-// Sidebar component (separate BEM block)
-.pa-sidebar {
-  &__nav {
-    padding: $spacing-base 0;
-
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &__item {
-    // Base styles for all sidebar items (regular links and submenu toggles)
-  }
-
-  &__link {
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    color: var(--pa-sidebar-text-secondary);
-    text-decoration: none;
-    font-weight: $font-weight-medium;
-    border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
-
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
-    &:hover {
-      color: var(--pa-sidebar-text);
-      background-color: var(--pa-accent-light);
-    }
-
-    &--active {
-      color: var(--pa-accent);
-      background-color: var(--pa-accent-hover);
-      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
-      font-weight: $font-weight-semibold;
-    }
-  }
-
-  &__toggle {
-    // For submenu toggle buttons (non-link items)
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    color: var(--pa-sidebar-text-secondary);
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: start; // RTL: flips to right
-    font-weight: $font-weight-medium;
-    cursor: pointer;
-
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
-    &:hover {
-      color: var(--pa-sidebar-text);
-      background-color: var(--pa-accent-light);
-    }
-
-    &--active {
-      color: var(--pa-accent);
-      background-color: var(--pa-accent-hover);
-    }
-  }
-
-  // Icon and label styles
-  &__icon {
-    width: $sidebar-icon-size;
-    min-width: $sidebar-icon-size;
-    height: $sidebar-icon-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: $font-size-base;
-    text-align: center;
-    line-height: 1; // Prevent emoji baseline shift
-  }
-
-  &__label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    body.loaded & {
-      transition: opacity $transition-normal $easing-snappy, width $transition-normal $easing-snappy;
-    }
-  }
-
-  // Submenu styles - Level 2
-  &__submenu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: none;
-    background-color: var(--pa-sidebar-submenu-bg);
-
-    &--open {
-      display: block;
-    }
-  }
-
-  // Level 2 submenu links
-  &__submenu > &__item > &__link {
-    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
-    font-size: $font-size-md;
-    border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
-
-    &:hover {
-      background-color: var(--pa-sidebar-submenu-hover-bg);
-    }
-
-    &--active {
-      background-color: var(--pa-sidebar-submenu-active-bg);
-      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
-    }
-  }
-
-  // Level 2 submenu toggles (for third level)
-  &__submenu > &__item > &__toggle {
-    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
-    font-size: $font-size-md;
-  }
-
-  // Level 3 submenu links
-  &__submenu &__submenu > &__item > &__link {
-    padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
-    font-size: $font-size-sm;
-    border-inline-end: $border-width-base solid transparent; // RTL: flips to border-left
-
-    &--active {
-      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
-    }
-  }
-
-  // Chevron icon for toggle buttons
-  &__chevron {
-    margin-inline-start: auto; // RTL: flips to margin-right: auto
-    font-size: $font-size-xs;
-
-    body.loaded & {
-      transition: transform $transition-fast $easing-snappy;
-    }
-
-    // Chevron points right (›) in LTR, left (‹) in RTL
-    // When open, rotates 90deg clockwise in LTR, -90deg (counter-clockwise) in RTL
-    .pa-sidebar__item--open & {
-      transform: rotate(90deg);
-    }
-
-    [dir="rtl"] .pa-sidebar__item--open & {
-      transform: rotate(-90deg);
-    }
-  }
-}
+/* ========================================
+   Sidebar Component
+   Sidebar navigation with nested submenus
+   ======================================== */
+@use '../../variables' as *;
+
+// Local CSS variables for sidebar (runtime state, modified by JS for resize)
+:root {
+  --pa-local-sidebar-width: #{$sidebar-width};
+  --pa-local-sidebar-min-width: 18rem;
+  --pa-local-sidebar-max-width: 50rem;
+}
+
+// Sidebar layout element - width in :where() for low specificity (utility classes can override)
+:where(.pa-layout__sidebar) {
+  width: var(--pa-local-sidebar-width);
+}
+
+.pa-layout__sidebar {
+  background-color: var(--pa-sidebar-bg);
+  border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to border-left
+  flex-shrink: 0;
+  position: relative;
+}
+
+// Resize handle on sidebar edge
+.pa-sidebar-resize {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0; // RTL: flips to left
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+
+  // Visual indicator on hover
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: transparent;
+    transition: background-color $transition-fast $easing-snappy;
+  }
+
+  &:hover::after,
+  &--active::after {
+    background-color: var(--pa-accent);
+  }
+}
+
+// Disable text selection during resize
+body.pa-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+
+  * {
+    cursor: ew-resize !important;
+  }
+}
+
+// Sticky mode - sidebar scrolls
+body.pa-layout--sticky .pa-layout__sidebar {
+  overflow-y: auto;
+  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
+  overflow-x: visible; // Allow tooltips to escape (right in LTR, left in RTL)
+}
+
+// Sidebar component (separate BEM block)
+.pa-sidebar {
+  &__nav {
+    padding: $spacing-base 0;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__item {
+    // Base styles for all sidebar items (regular links and submenu toggles)
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-sidebar-text-secondary);
+    text-decoration: none;
+    font-weight: $font-weight-medium;
+    border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
+
+    body.loaded & {
+      transition: all $transition-fast $easing-snappy;
+    }
+
+    &:hover {
+      color: var(--pa-sidebar-text);
+      background-color: var(--pa-accent-light);
+    }
+
+    &--active {
+      color: var(--pa-accent);
+      background-color: var(--pa-accent-hover);
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  &__toggle {
+    // For submenu toggle buttons (non-link items)
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-sidebar-text-secondary);
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: start; // RTL: flips to right
+    font-weight: $font-weight-medium;
+    cursor: pointer;
+
+    body.loaded & {
+      transition: all $transition-fast $easing-snappy;
+    }
+
+    &:hover {
+      color: var(--pa-sidebar-text);
+      background-color: var(--pa-accent-light);
+    }
+
+    &--active {
+      color: var(--pa-accent);
+      background-color: var(--pa-accent-hover);
+    }
+  }
+
+  // Icon and label styles
+  &__icon {
+    width: $sidebar-icon-size;
+    min-width: $sidebar-icon-size;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    text-align: center;
+    line-height: 1; // Prevent emoji baseline shift
+  }
+
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    body.loaded & {
+      transition: opacity $transition-normal $easing-snappy, width $transition-normal $easing-snappy;
+    }
+  }
+
+  // Submenu styles - Level 2
+  &__submenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: none;
+    background-color: var(--pa-sidebar-submenu-bg);
+
+    &--open {
+      display: block;
+    }
+  }
+
+  // Level 2 submenu links
+  &__submenu > &__item > &__link {
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
+    font-size: $font-size-md;
+    border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
+
+    &:hover {
+      background-color: var(--pa-sidebar-submenu-hover-bg);
+    }
+
+    &--active {
+      background-color: var(--pa-sidebar-submenu-active-bg);
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
+    }
+  }
+
+  // Level 2 submenu toggles (for third level)
+  &__submenu > &__item > &__toggle {
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
+    font-size: $font-size-md;
+  }
+
+  // Level 3 submenu links
+  &__submenu &__submenu > &__item > &__link {
+    padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
+    font-size: $font-size-sm;
+    border-inline-end: $border-width-base solid transparent; // RTL: flips to border-left
+
+    &--active {
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
+    }
+  }
+
+  // Chevron icon for toggle buttons
+  &__chevron {
+    margin-inline-start: auto; // RTL: flips to margin-right: auto
+    font-size: $font-size-xs;
+
+    body.loaded & {
+      transition: transform $transition-fast $easing-snappy;
+    }
+
+    // Chevron points right (›) in LTR, left (‹) in RTL
+    // When open, rotates 90deg clockwise in LTR, -90deg (counter-clockwise) in RTL
+    .pa-sidebar__item--open & {
+      transform: rotate(90deg);
+    }
+
+    [dir="rtl"] .pa-sidebar__item--open & {
+      transform: rotate(-90deg);
+    }
+  }
+}

package/src/scss/main.scss

@@ -1,7 +1,7 @@
-/* Pure Admin Visual Framework - Main Entry Point */
-
-// Utilities (spacing, etc.)
-@use "utilities" as *;
-
-// Core framework (includes variables and all core-components)
-@use 'core' as *;
+/* Pure Admin Visual Framework - Main Entry Point */
+
+// Utilities (spacing, etc.)
+@use "utilities" as *;
+
+// Core framework (includes variables and all core-components)
+@use 'core' as *;