@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -1,40 +1,40 @@
-// ============================================================================
-// SCROLLBARS
-// Global scrollbar styling for consistent appearance across browsers
-// ============================================================================
-@use '../variables' as *;
-
-/* Webkit browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-width;
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--pa-main-bg);
-  border-radius: $scrollbar-border-radius;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: var(--pa-border-color);
-  border-radius: $scrollbar-border-radius;
-  border: $border-width-base solid var(--pa-main-bg);
-
-  &:hover {
-    background: var(--pa-accent);
-  }
-
-  &:active {
-    background: var(--pa-accent-hover);
-  }
-}
-
-*::-webkit-scrollbar-corner {
-  background: var(--pa-main-bg);
-}
-
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
-}
+// ============================================================================
+// SCROLLBARS
+// Global scrollbar styling for consistent appearance across browsers
+// ============================================================================
+@use '../variables' as *;
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-main-bg);
+  border-radius: var(--pa-border-radius-sm);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pa-border-color);
+  border-radius: var(--pa-border-radius-sm);
+  border: $border-width-base solid var(--pa-main-bg);
+
+  &:hover {
+    background: var(--pa-accent);
+  }
+
+  &:active {
+    background: var(--pa-accent-hover);
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-main-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
+}

package/src/scss/core-components/_settings-panel.scss

@@ -1,141 +1,141 @@
-/* ========================================
-   Settings Panel Component
-   Floating panel for global settings management
-   ======================================== */
-@use '../variables' as *;
-
-.pa-settings-panel {
-  position: fixed;
-  inset-inline-end: -$profile-panel-width-fixed; // RTL: flips to left, panel hidden by default
-  top: $settings-panel-top; // Position higher up for larger panel
-  z-index: 10000;
-  width: $profile-panel-width-fixed;
-  transition: inset-inline-end $settings-panel-transition-duration $settings-panel-transition-easing;
-
-  &__toggle {
-    position: absolute;
-    inset-inline-end: $profile-panel-width-fixed; // RTL: flips to left
-    top: 0;
-    width: $profile-panel-toggle-size;
-    height: $profile-panel-toggle-size;
-    background: $accent-color;
-    color: white;
-    border: none;
-    border-start-start-radius: $border-radius; // RTL: top-right in RTL
-    border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    cursor: pointer;
-    font-size: $font-size-xl;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all $settings-panel-transition-duration $settings-panel-transition-easing;
-    box-shadow: $shadow-sidebar;
-
-    &:hover {
-      background: $accent-hover;
-      width: $profile-panel-toggle-size-open;
-      inset-inline-end: calc($profile-panel-width-fixed + $settings-panel-hover-offset);
-    }
-  }
-
-  &__content {
-    background: var(--pa-subtle-bg);
-    border: $border-width-base solid var(--pa-border-color);
-    border-inline-end: none; // RTL: flips to border-left: none
-    border-start-start-radius: $border-radius; // RTL: top-right in RTL
-    border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    box-shadow: $shadow-sidebar-open;
-    padding: $spacing-lg;
-    width: 100%;
-    height: $settings-panel-height; // Larger panel height for more settings
-    min-height: $settings-panel-min-height;
-    max-height: calc(100vh - $settings-panel-vertical-clearance); // Leave space from top/bottom
-    overflow-y: auto;
-  }
-
-  &__title {
-    margin: 0 0 $spacing-lg 0;
-    padding-bottom: $card-footer-padding-v;
-    border-bottom: $border-width-medium solid var(--pa-border-color);
-    color: var(--pa-text-color-1);
-    font-size: $font-size-lg;
-    font-weight: $font-weight-semibold;
-  }
-
-  &__section {
-    margin-bottom: $spacing-base;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__label {
-    display: block;
-    margin-bottom: $spacing-sm;
-    color: var(--pa-text-color-1);
-    font-size: $font-size-sm;
-    font-weight: $font-weight-medium;
-  }
-
-  &__select {
-    width: 100%;
-    padding: $spacing-sm;
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-    background: var(--pa-input-bg);
-    color: var(--pa-text-color-1);
-    font-size: $font-size-sm;
-    cursor: pointer;
-
-    &:focus {
-      outline: none;
-      border-color: $accent-color;
-      box-shadow: 0 0 0 $focus-ring-width $accent-light;
-    }
-  }
-
-  &__hint {
-    display: block;
-    margin-top: $spacing-xs;
-    color: var(--pa-text-color-3);
-    font-size: $font-size-xs;
-  }
-
-  &__checkbox-group {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-sm;
-  }
-
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    color: var(--pa-text-color-1);
-    font-size: $font-size-sm;
-
-    input[type="checkbox"] {
-      margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
-      cursor: pointer;
-    }
-
-    &:hover {
-      color: $accent-color;
-    }
-  }
-
-  // Panel states
-  &--open {
-    inset-inline-end: 0; // RTL: flips to left: 0, slide panel into view
-
-    .pa-settings-panel__toggle {
-      background: $accent-hover;
-      transform: rotate(180deg);
-    }
-  }
-}
+/* ========================================
+   Settings Panel Component
+   Floating panel for global settings management
+   ======================================== */
+@use '../variables' as *;
+
+.pa-settings-panel {
+  position: fixed;
+  inset-inline-end: -$profile-panel-width-fixed; // RTL: flips to left, panel hidden by default
+  top: $settings-panel-top; // Position higher up for larger panel
+  z-index: 10000;
+  width: $profile-panel-width-fixed;
+  transition: inset-inline-end $settings-panel-transition-duration $settings-panel-transition-easing;
+
+  &__toggle {
+    position: absolute;
+    inset-inline-end: $profile-panel-width-fixed; // RTL: flips to left
+    top: 0;
+    width: $profile-panel-toggle-size;
+    height: $profile-panel-toggle-size;
+    background: $accent-color;
+    color: white;
+    border: none;
+    border-start-start-radius: var(--pa-border-radius); // RTL: top-right in RTL
+    border-end-start-radius: var(--pa-border-radius);   // RTL: bottom-right in RTL
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    cursor: pointer;
+    font-size: $font-size-xl;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all $settings-panel-transition-duration $settings-panel-transition-easing;
+    box-shadow: $shadow-sidebar;
+
+    &:hover {
+      background: $accent-hover;
+      width: $profile-panel-toggle-size-open;
+      inset-inline-end: calc($profile-panel-width-fixed + $settings-panel-hover-offset);
+    }
+  }
+
+  &__content {
+    background: var(--pa-subtle-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-inline-end: none; // RTL: flips to border-left: none
+    border-start-start-radius: var(--pa-border-radius); // RTL: top-right in RTL
+    border-end-start-radius: var(--pa-border-radius);   // RTL: bottom-right in RTL
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    box-shadow: $shadow-sidebar-open;
+    padding: $spacing-lg;
+    width: 100%;
+    height: $settings-panel-height; // Larger panel height for more settings
+    min-height: $settings-panel-min-height;
+    max-height: calc(100vh - $settings-panel-vertical-clearance); // Leave space from top/bottom
+    overflow-y: auto;
+  }
+
+  &__title {
+    margin: 0 0 $spacing-lg 0;
+    padding-bottom: $card-footer-padding-v;
+    border-bottom: $border-width-medium solid var(--pa-border-color);
+    color: var(--pa-text-color-1);
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__section {
+    margin-bottom: $spacing-base;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: $spacing-sm;
+    color: var(--pa-text-color-1);
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+  }
+
+  &__select {
+    width: 100%;
+    padding: $spacing-sm;
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: var(--pa-border-radius);
+    background: var(--pa-input-bg);
+    color: var(--pa-text-color-1);
+    font-size: $font-size-sm;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      border-color: $accent-color;
+      box-shadow: 0 0 0 $focus-ring-width $accent-light;
+    }
+  }
+
+  &__hint {
+    display: block;
+    margin-top: $spacing-xs;
+    color: var(--pa-text-color-3);
+    font-size: $font-size-xs;
+  }
+
+  &__checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--pa-text-color-1);
+    font-size: $font-size-sm;
+
+    input[type="checkbox"] {
+      margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
+      cursor: pointer;
+    }
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+
+  // Panel states
+  &--open {
+    inset-inline-end: 0; // RTL: flips to left: 0, slide panel into view
+
+    .pa-settings-panel__toggle {
+      background: $accent-hover;
+      transform: rotate(180deg);
+    }
+  }
+}